Наследовать цвет от родителя и выполнять затенение цвета в CSS

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

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

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

ЦЕЛЬ:
Если мы изменим цвет диалога, кнопки также будут менять без необходимости вносить какие-либо изменения в код стилей CSS 2, которые используются для отображения вверх и вниз состояния для кнопки.

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

источник

2009-11-13 cbuck12000

Нет никакого чистого CSS-способа изменить цвета, потому что не имеет таких вещей, как уравнения, функции , или переменные. Будет интересно посмотреть, есть ли у Justin непрозрачность. – davethegr8

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

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

BTW, я ответил another stackoverflow question related to Opacity, и он содержит некоторые примеры кода JQuery, которые могут быть использованы для применения непрозрачности в браузере -сторонний путь. Вы можете использовать это вместо этого, если CSS выше сделает вас кляпом. :-) Обратите внимание, что я добавил «zoom: 1» выше, чтобы гарантировать, что элемент имеет «макет», который является необходимым условием для применения прозрачности 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. Я подозреваю, что вы можете проявить творческий подход и найти способы улучшить это, чтобы текст оставался одним и тем же цветом во всех браузерах. Реальная реализация, вероятно, также захочет использовать абсолютное позиционирование, а не мой негативный верхний маркер.

источник

2009-11-13 18:31:02

Считаете ли вы использование LESS? Он поддерживает переменный среди многих других вещей:

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

#header { color: @light-blue; }

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

источник

2009-11-13 18:39:00 ChssPly76

Ничего себе, МЕНЬШЕ выглядит очень круто. Я думаю, что в этот уик-энд я порежу его в PHP. – eyelidlessness

@eyelidlessness - это было сделано :-) http://leafo.net/lessphp/docs/ – ChssPly76

Спасибо ChssPly76! – eyelidlessness

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

<?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>

источник

2009-11-13 23:15:15

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

источник

2012-11-14 12:38:20

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

источник

2014-10-04 01:41:20 Nisse

Наследовать цвет от родителя и выполнять затенение цвета в CSS

ответ

Смежные вопросы