| home / programming / css_color / part2 / 1 |   [previous] |
|
|
|
Opacity
The RGBA and HSLA color values allow you to set transparency values to the colors you specify. But the draft CSS3 color module goes further, allowing you to set transparency values without the need to set a color value along with them. So in other words, you can set the relative opacity of other objects – like images – as well. This has the potential to let Web developer create some interesting blending effects.
Like the RGBA and HSLA color values, the opacity property would take a decimal value ranging from 0.0 (fully transparent) to 1.0 (fully opaque), with any value greater or lower than this clipped so that it stays within this range. The opacity value is applied across the entire element – any outline, border or background that may be associated with a selected element are all rendered using the same opacity value.
The following sample code shows how it could be used, whose results should show headers that are increasingly transparent:
<html>
<head>
<title>opacity Example</title>
<style>
h1 {font-size: x-large}
.opaque {opacity: 1.0}
.point-eight-opaque {opacity: 0.8}
.point-six-opaque {opacity: 0.6}
.point-four-opaque {opacity: 0.4}
.point-two-opaque (opacity: 0.2)
.transparent {opacity: 0.0}
</style>
</head>
<body>
<h1 class="opaque">This header is fully opaque</h1>
<h1 class="point-eight-opaque">This header is set to 0.8 opacity</h1>
<h1 class="point-six-opaque">This header is set to 0.6 opacity</h1>
<h1 class="point-four-opaque">This header is set to 0.4 opacity</h1>
<h1 class="point-two-opaque">This header is set to 0.2 opacity</h1>
<h1 class="transparent">This header is fully transparent</h1>
Some extra text to display the effects of the transparent header.
</body>
</html>
You can see the effects of this illustrated in the following mock-up:
While the code example provided here are being applied to headers; unlike the
previous RGBA and HSLA code samples, the opacity property could be directly
applied to virtually anything, including such things as other text blocks, images,
user interface controls (i.e. buttons) and more.
Compiled by Keith Schengili-Roberts
| home / programming / css_color / part2 / 1 | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: June 17, 2003
URL: URL: http://webreference.com/programming/css_color/2
