Cascading Style Sheets (CSS) were introduced to the Web world roughly 13 years ago. They have changed the way we program Web sites and have made our lives easier in many ways. Improvements are of course always being made and the latest of these is CSS3. If you want to make use of the features of this new version, keep in mind that not all browsers will support CSS3. As of now, Safari 4 is pretty safe and so is Firefox 3.5.
CSS3 has many new features. In this series I’m going to point out the ones that will really make a difference.
RGBA And Opacity
RGBA lets you specify not only the color but the opacity of an element. Not all browsers support this yet so it’s best if you specify another color before the RGBA. An example would be if you wanted to give a div block some transparency with some text on top.
The code for this is:
#content {
padding: 8px;
color: #fff;
background: rgba(0, 0, 0, .5);
}
You specify the red, blue and green values either with an integer between 0 and 255 or with percentages. The alpha value should be between 0.0 and 1.0; for example, 0.5 for a 50% opacity.
Browser support: RGBA is supported by Firefox 3, Opera 9.5 and all Webkit-based browsers. IE does not support this (surprised?). Firefox 2, unfortunately, does not support it either. Opacity is supported by Opera and Webkit- and Gecko-based browsers, but not by IE.
In my next posting I will discuss the usage of border radius and the ease of use of applying rounded corners.
Tags: cascading style sheets, css, css3, structured markup, website design
