Menu
Is there a way in CSS to take the active color defined by a CSS class and either darken or lighten the color to be used in another CSS class?
DEVELOPMENT SCENARIO:
We have a dialog that uses a CSS style that defines its color as a shade of gray. In the dailog, we have buttons that use 2 different CSS styles that simulate the button up and a button down states.
Is it possible to have the CSS style(s) of the buttons to use the dialog color but have it darkened or lightened for the button appearance. The button face should be lighter than the main dialog color, and use lighter and darker colors for the borders which give the appearnce of a 3D button frame.
GOAL:
If we change the color of the dialog, the buttons would also change without having to make any code changes to the 2 CSS styles that are used to render the up and down states for a button.
I am guessing that there is a way to do this in JavaScript, but is there a way in CSS to perform this action?
973
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">
<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.
148
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).
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
