Website developers use many effects to produce beautiful web pages. Some effects, however, are more difficult to achieve than others. Surprisingly, the transparency or opacity of web page elements falls into this category -- especially if you want the effect to look right on all browsers. Fortunately, the upcoming CSS3 specification brings a solution to this problem, called the rgba property. This four-part series takes a closer look at what you'll be able to do with this property once the specification is approved.
The RGBA CSS3 Property: an Overview (Page 1 of 4 )
Among the vast arsenal of techniques that many web designers implement for building eye-catching user interfaces, the clever manipulation of the alpha-based opacity of certain elements on a web page is a very popular approach. In most cases it yields impressive results. Unfortunately, the process is extremely tricky, and requires often the use of a JavaScript abstraction layer that internally solves the incompatibilities between most major browsers. That’s sad but true.
Of course, it’s fair to stress that the improved support offered by Internet Explorer 7 and up for transparent PNG graphics now allows developers to easily create all sorts of consistent images that blend gracefully with the background of an (X)HTML document. Naturally, in a case like this, defining the level of opacity for specific sections of an image is a task accomplished via a graphic editor and not by a browser’s rendering engine.
Quite possibly, at this time you may be wondering if CSS makes it possible to handle the opacity of an HTML element at will without having to rely on heavy graphics. Well, the “opacity” property was conceived for doing exactly that, but not surprisingly, Internet Explorer doesn’t recognize it at all. Too bad.
However, not all is lost when it comes to programmatically manipulating the alpha opacity of web page elements. The upcoming CSS3 specification includes a powerful property called “rgba” which can be used for specifying the color of a target element in conjunction with its level of opacity (hence the “a=alpha” letter in its name).
This remarkable ability will allow developers to create (in the near future) engaging, highly selective transparency effects on different HTML elements that can be achieved today only by using graphics. Thus, in this group of tutorials I’m going to take a closer look at the aforementioned “rgba” CSS3 property, so you can learn how to put it to work for you.
Did my proposal catch your attention? Then start reading right now!
Style Sheets 
Ten Great CSS3 Tutorials
