Унаследовать цвет от родительского и выполнить затенение цвета в CSS - PullRequest
Новая
       8

Унаследовать цвет от родительского и выполнить затенение цвета в CSS

4 голосов
/ 13 ноября 2009

Есть ли в CSS способ взять активный цвет, определенный классом CSS, и затемнить или осветлить цвет, который будет использоваться в другом классе CSS?

СЦЕНАРИЙ РАЗВИТИЯ:
У нас есть диалог, который использует стиль CSS, который определяет его цвет как оттенок серого. В этом окне у нас есть кнопки, которые используют 2 разных стиля CSS, которые имитируют состояние кнопки «вверх» и «кнопка вниз».

Можно ли использовать стиль (ы) CSS кнопок, чтобы использовать цвет диалога, но затемнить или осветлить его для внешнего вида кнопки. Лицо кнопки должно быть светлее, чем основной цвет диалогового окна, и использовать более светлые и темные цвета для границ, которые дают вид трехмерной рамки кнопки.

ЗАДАЧА:
Если мы изменим цвет диалогового окна, кнопки также изменятся без необходимости внесения каких-либо изменений в код для двух стилей CSS, которые используются для визуализации состояний «вверх» и «вниз» для кнопки.


Я предполагаю, что в JavaScript есть способ сделать это, но есть ли в CSS способ выполнить это действие?

Ответы [ 5 ]

3 голосов
/ 13 ноября 2009

Вы можете использовать белый или черный фон с непрозрачностью , соответствующей нужной вам величине яркости. Непрозрачность немного сложна в использовании (по сравнению с другими более распространенными свойствами CSS), поскольку она требует взломов, специфичных для браузера. Согласно этой записи в блоге , следующий (хакерский) CSS будет работать во всех браузерах для поддержки непрозрачности 50%: 

.show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; }

Кстати, я ответил на другой вопрос о стекопереработке, связанный с Opacity , и он содержит несколько примеров кода jQuery, которые можно использовать для применения прозрачности нейтральным для браузера способом. Вы можете использовать это вместо этого, если CSS выше заставляет вас заткнуться. :-) Обратите внимание, что я добавил «zoom: 1» выше, чтобы убедиться, что элемент имеет «layout», что является специфическим условием IE для применения непрозрачности - эта проблема также описана в этой теме, связанной выше.

Вы также можете использовать PNG-изображение, которое имеет белый цвет, но имеет значение прозрачности, которое вы предпочитаете. Это требует обычного решения PNG-fix в IE6.

Вот пример кода, показывающий, что возможно (и некоторые ограничения): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css">
        .button { background-color:green; height:30px; width:100px; border: solid 1px red; color:#FFF; margin:20px; text-align:center;  }
        .buttonText { height:30px; width:100px;  color:#FFF; margin:20px; text-align:center;  }
        .show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; zoom:1; } 
        .lighter { background-color:#CCCCCC; height:100%; width:100%; }
        .darker { background-color:#000000; height:100%; width:100%;}
        .whitetext {color:#fff; height:100%; width:100%; padding-top:6px;}
        .moveText {margin-top:-52px; color:#fff; padding-top:6px; z-index: 10; }
    </style>
</head>
<body>
 <div class="button"></div>
 <div class="buttonText moveText">Regular button</div>
 <div class="button"><div class="show-50 lighter"></div></div>
 <div class="buttonText moveText">Lighter button</div>
 <div class="button"><div class="show-50 darker"></div></div>
 <div class="buttonText moveText">Darker button</div>
</body>
</html>

На IE8 текст выглядит идеально (он же белый). На FF и Safari текст, к сожалению, затемнен. Хак выше, где я поместил текст в другой DIV, обманул IE для отображения белого текста на разноцветных фонах, но тот же трюк не работал на FF и Safari. Я подозреваю, что вы могли бы проявить творческий подход и найти способы улучшить это, чтобы текст оставался одинаковым во всех браузерах. Реальная реализация, вероятно, также хотела бы использовать абсолютное позиционирование, а не мой отрицательный взлом верхнего края.

1 голос
/ 13 ноября 2009

Рассматривали ли вы использование МЕНЬШЕ ? Он поддерживает переменные среди многих других вещей: 

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

Однако LESS требует предварительной обработки во время развертывания - поэтому, если вам нужно выполнить вышеизложенное во время выполнения, это может быть не вариант (но тогда, в любом случае, JavaScript будет единственным приемлемым вариантом).

0 голосов
/ 04 октября 2014

Или вы можете просто использовать фоновое изображение. Один черный (этого достаточно для одного пиксельного изображения) с непрозрачностью, равной двадцати или около того, и один белый, равный примерно 20.

0 голосов
/ 14 ноября 2012

Ответ CSS - нет, вы не можете. Однако вы можете использовать SASS http://sass -lang.com , который также требует предварительной обработки.

0 голосов
/ 14 ноября 2009

Вы также можете создать динамический CSS-файл с PHP и иметь функцию для автоматического расчета яркости цвета. У вас может быть настройка, которая меняет цвет, который определяется во многих разных местах, просто меняя 1 поле. Вот пример: 

<?php
//adjust brightness by taking a value between -255 and 255
function brightness($color, $brightness){
   if(!$color) return false;
   $c = trim($color);
   $c = str_replace('#','', $c);
   $l = strlen($c) == 3 ? 1 : (strlen($c) == 6 ? 2 : false);

   if($l){
     $rgb[0] = hexdec(substr($c, 0,1*$l)) + $brightness;
     $rgb[1] = hexdec(substr($c, 1*$l,1*$l)) + $brightness;
     $rgb[2] = hexdec(substr($c, 2*$l,1*$l)) + $brightness;



    }else{
      return false;
    }

    $out = '#';
    for($i = 0; $i<3; $i++)
      $rgb[$i] = dechex(($rgb[$i] <= 0)?0:(($rgb[$i] >= 255)?255:$rgb[$i]));

    for($i = 0; $i<3; $i++)
      $out .= ((strlen($rgb[$i]) < 2)?'0':'').$rgb[$i];

   return $out;
}

// Color Setup
$myColor = "#3399CC";
$myLighterColor = brightness($myColor, "50");
$myDarkerColor = brightness($myColor, "-50");


// Include this if using a seperate style sheet
// header("Content-Type: text/css");
?>
<style type="text/css">
  body {
    background-color:<?=$myLighterColor;?>;
  }

  #div1 {
    background-color:<?=$myColor;?>;
    border: 1px solid <?=$myDarkerColor?>;
  }
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...