ansaurus

Question

Inherit Color from Parent and Perform Color Shading in CSS

Answer 1

+1 A:

You can use a white or black background with an opacity appropriate for the amount you want it lightened. Opacity is a bit challenging to use (relative to other more common CSS properties) since it requires browser-specific hacks. According to this blog post, the following (hacky) CSS will work across browsers to support 50% opacity :

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

BTW, I answered another stackoverflow question related to Opacity, and it contains some jQuery code samples which can be used to apply opacity in a browser-neutral way. You can use that instead if the CSS above makes you gag. :-) Note that I added the "zoom:1" above to ensure the element has "layout" which is an IE-specific prerequisite for applying opacity-- this issue is also described in this thread linked above.

You can also use a PNG image which is white but has the transparency value you prefer. This requires the usual PNG-fix solution in IE6.

Here's a code sample illustrating what's possible (and some limitations):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<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>

On IE8, the text looks perfect (aka white). On FF and Safari, the text is unfortunately darkened. The hack above where I put the text into a different DIV tricked IE into displaying white text over the different-colored backgrounds, but the same trick didn't work on FF and Safari. I suspect you could get creative and find ways to improve upon this so the text stays the same color in all browsers. A real impletation would probably also want to use absolute positioning rather than my negative top-margin hack.

Justin Grant 2009-11-13 18:31:02

Answer 2

+1 A:

Have you considered using LESS? It supports variables among many other things:

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

#header { color: @light-blue; }

LESS does require preprocessing during deployment, however - so if you need to do the above at runtime, this may not be an option (but then JavaScript would be the only viable option, anyway).

ChssPly76 2009-11-13 18:39:00

Wow, LESS looks really cool. I think I'll take a stab at porting it to PHP this weekend.

eyelidlessness 2009-11-13 18:47:56

@eyelidlessness - it's been done :-) http://leafo.net/lessphp/docs/

ChssPly76 2009-11-13 18:50:47

Thanks ChssPly76!

eyelidlessness 2009-11-13 19:05:59

Answer 3

A:

You could also create a dynamic css file with PHP and have a function to calculate the brightness of a color automatically. You can have a setup that changes a color that is defined in many different places by just changing 1 field. Here is an example:

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

Brandon G 2009-11-13 23:15:15

ansaurus

tags:

views:

answers:

Inherit Color from Parent and Perform Color Shading in CSS

related questions