CSS Opacity
Opacity is one of the most requested but I would say least used features of CSS. It is really easy to use and there are probably a lot of ingenious applications for it in your UI if you think long enough. See the example below.
| 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 |
| 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 |
In the table above, Firefox and Opera users will see a row of red boxes with opacity applied followed by a solid row. IE 6 users will see them switched. The first row uses the opacity property while the second uses Microsoft's own filter property.
Opacity is the most widely implemented CSS3 property. You can use opacity for your web page by using something like:
The Code:
#kindaopaque {
opacity: 0.5;
filter: alpha(opacity=50);
}
for your CSS class or style attribute.
For more information about CSS3 goodness, check out CSS3.info
