The awesome “advent calendar for web geeks” can be found at 24ways.org. December is my favorite time of year for many reasons, one of which is getting to read this great series of 24 web-related articles from around the world, one each day starting Dec 1 every year.

The first article this year is “Working with RGBA Color” by Drew McLellan.

Key points:

• This is one technique for setting the opacity/transparency of HTML elements
• The CSS opacity property is available starting with CSS3
• opacity adjusts opacity for all parts of the selector (HTML element), so if opacity is set to 0.5 for a heading element, the opacity of both the text color and background color are 50%.
• Using RGBA color specification allows finer control. The “A” part = “alpha channel”, which controls opacity, and can be applied to each color declaration as opposed to the entire selector. RGBA allows you to specify different opacity values for the text color vs. the background color.

Quick CSS terminology review, CSS syntax:
Selector {declaration1; declaration2;}
declaration = property:value;

example:

h1 { color: #000000;}
selector = “h1″
declaration = “color:#000000;”
property=”color:”
value=”#00000;”

Back to Working with RGBA color:

• To specify RGBA, use rgba(0-255, 0-255, 0-255, 0-1) as the value in your CSS declaration instead of hex codes, see the article for examples
• RGBA is supported by the latest versions of Firefox, Safari, Chrome and Opera, but is not supported by IE (of course)
• See article for ways to specify fallback colors or PNGs when RGBA is not supported (important)
• Opacity/RGBA can be changed on :hover or manipulated with JavaScript for elegant rollover effects
  
• RGBA can be applied to text color, background color, and border color