| home / programming / css_color / part2 / 1 |   [next] |
|
|
|
The World Wide Web Consortium (W3C) is planning to improve the current state of CSS properties with their work on the forthcoming CSS3 specification. This new spec is designed not only to expand upon existing CSS1 and CSS2 properties but also to introduce wholly new concepts in a modular fashion, to make it easier for browser developers and Web developers to get a handle on new developments before they're made official.
The previous article looked at some of the ways the current draft CSS3 module on color would provide Web developers with new and innovative ways of setting CSS color values. But the CSS3 color module does not limit itself solely to setting colors – if adopted, it will also provide the means for setting a range of transparency and opacity values as well.
RGBA, HSLA and the Transparent Value
Most Web developers familiar with CSS already know how to set RGB ("red green blue") color values; you can use either a numeric or a percentage triplet value, with each part of the triplet representing the "strength" of the color. So a value of rgb (255,0,0) or rgb (100%,0%,0%) is equivalent to the color name "red", and rgb (255,127,80) or rgb (100%,50%,31%) is equivalent to the color name "coral". The draft CSS3 color module takes this a step further, adding an alpha channel to the RGB value, effectively allowing you to change the opacity of an object. This additional alpha value takes a range from "0.0", which is fully transparent, to "1.0", which is fully opaque. To specify an RGBA color value, you set it explicitly by using "rgba" and add the alpha value to the end of the RGB statement, as you can see in the following example code.<html>
<head>
<title> RGBA Example</title>
<style>
h1 {font-size: x-large}
.opaque {color: rgba(0,0,255,1.0)}
.three-quarters-opaque {color: rgba(0,0,255,0.75)}
.half-opaque {color: rgba(0,0,255,0.5)}
.one-quarter-opaque {color: rgba(0,0,255,0.25)}
.transparent {color: rgba(0,0,255,0.0)}
</style>
</head>
<body>
<h1 class="opaque">This header is fully opaque</h1>
<h1 class="three-quarters-opaque">This header is set to 0.75
opacity</h1>
<h1 class="half-opaque">This header is set to 0.5 opacity</h1>
<h1 class="one-quarter-opaque">This header is set to 0.25 opacity</h1>
<h1 class="transparent">This header is fully transparent</h1>
</body>
</html>
You can see what effect this could produce in a compatible browser in the following image:
The new Hue, Saturation and Light ("HSL") color values proposed in
the latest draft CSS3 color module describes color in terms of the location
of three color values on a rainbow color circle. Using this scheme, the color
name "red" is represented by the HSL value hsl (0deg,100%,100%), and
"coral" would be hsl (16deg,69%,100%). HSLA is a simple extension
to HSL, simply adding an alpha channel to it in the same way as an alpha channel
is added to RGB to make it RGBA. The following example code should produce exactly
the same result – blue headers of increasing transparency – as the
previous RGBA color example code.
<style>
h1 {font-size: x-large}
.opaque {color: hsla(240deg,100%,100%,1.0)}
.three-quarters-opaque {color: hsla(240deg,100%,100%,0.75)}
.half-opaque {color: hsla(240deg,100%,100%,0.5)}
.one-quarter-opaque {color: hsla(240deg,100%,100%,0.25)}
.transparent {color: hsla(240deg,100%,100%,0.0)}
</style>
| home / programming / css_color / part2 / 1 | [next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: June 17, 2003
URL: http://webreference.com/programming/css_color/2
