CSS3 color: rgba() or color: hsla() and CSS3 opacity

CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this property-name stands, for, you guessed it: alpha.

RGBa is a way to declare a color in CSS that includes alpha transparency support.

Some text rss feed

background: rgba(255, 255, 255, .5) center center;

The first three numbers represent the red, green and blue values and the last is the transparency from 0 (100% transparent) to 1 (no transparency). Below the alpha values go from .2 to 1 in .2 increments.

.2
.4
.6
.8
1

RGBa is not opacity

When you use opacity property on an element, say div { opacity: .9;}, you set the opacity for that element and all of its children, everything contained by the box. So if you simply apply opacity to a div with a background-color of white, the text and images contained in that div will inherit the opacity property and they will also be transparent.

.2
.4
.6
.8
1

HSLa

Hue, Saturation, Lightness (Brightness in Photoshop) is often an easier, more human way to determine color numbers for designers.

Browser Support

Firefox 3+, Safari 3+, Opera 10, Google Chrome 1+, iPhone, Blackberry Storm

IE8 and below doesn't support the alpha in RGBa or HSLa, and color will be solid, except IE5.5 will have no color. (IE has a proprietary alpha filter that you can use in a conditional comment in the <head>.)

<!--[if lt IE 8]>
<style type="text/css">
.transparent {
filter:alpha(opacity=50);
}
</style>
<![endif]-->

IE8 and below do not support HSL color declaration, so you would have to either use a conditional comment for the color values in rgb or hex or a "fallback" declaration with rgb or hex colors.

If the design permits, you might declare a “fallback” color, using normal rgb or hex to define the property color and then declare the property again below it with rgba. This color will be solid. Not declaring a fallback means no color will be applied in browsers that don’t support it. This fallback does fail in some really old browsers.

background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .5) center center;

Tutorials:

http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock/

http://www.css3.info/preview/rgba/

http://www.css3.info/introduction-opacity-rgba/

http://www.w3schools.com/Css/css_image_transparency.asp

Examples:

http://forabeautifulweb.com/demo/2008/10/25/index.html

http://timvandamme.com/ networks navigation hover and active have different alpha on background color and also use transition.