The Opacity Property is slightly different then RGBA and HSLA which was discussed in CSS3 Colors.

Opacity v. RGBA & HSLA

Indeed RGBA has the addition of the "alpha" or opacity value like so:

{code type=css}
background-color:rgba(127, 60, 87, 0.4);
background-color:hsla(68, 100%, 50%, 0.8);
{/code}

Either of these examples will have a color that is opaque in some fashion. Consider the following:

If you're using IE see below:

{code type=css}
background-color:rgba(0, 0, 255, 1);
background-color:rgba(0, 0, 255, 0.8);
background-color:rgba(0, 0, 255, 0.6);
background-color:rgba(0, 0, 255, 0.4);
background-color:rgba(0, 0, 255, 0.2);
{/code}

This code using rgba allows us to create our desired effect.

Allows us to use these opaque colors, however, we can reach the same effect using the standard rgb color space or by using hexadecimal values.

Consider the following example:

We have the same effect using slightly different code in fact. We used the opacity property to create the fading squares.

{code type=css}
background-color:rgb(0, 0, 255); opacity:1.0;
background-color:rgb(0, 0, 255); opacity:0.8;
background-color:rgb(0, 0, 255); opacity:0.6;
background-color:rgb(0, 0, 255); opacity:0.4;
background-color:rgb(0, 0, 255); opacity:0.2;
{/code}

Main difference

The main difference between rgba + hsla and opacity is that we can apply opacity to any element we want instead of just backgrounds. This includes, but is not limited to, images and text.

This is some more text

As we can see, the text is fading with word. The first word is at 100% opacity, the second at 80%, third at 60%, etc... We denote these values in terms of decimals so 1 = 100%, 0.8 = 80%, etc...

Opacity

One really great thing about the opacity property is that you don't need to create an image sprite if you want an image to be slightly translucent before roll over and fully opaque during roll over. Here is an example of opacity:

Chrome

{code type=css}
.chrome-opacity {
background:url (images/chrome.png) center center no-repeat;
height:64px;
width:64px;
opacity:0.8;
}

.chrome-opacity:hover {
background:url (images/chrome.png) center center no-repeat;
height:64px;
width:64px;
opacity:1.0;
}
{/code}

Using method above allows us to easily create semi-opaque images or text and allow them to become fully opaque on roll over or vice versa.

Note: IE 6 only supports the :hover pseudo-class on <a> tags only. Also, IE does not natively support this property where all of the other major browsers do.

To use this property with IE we'll need to create a conditional comment for all versions of IE like the following:

{code type=html}

{/code}

Note: that IE 6 and 7 do NOT extend support to the pseudo-class :hover on anything but <a> tags and therefore the hover will not work.

If you want to see working examples of the opacity property then please download the file!

opacity.zip
opacity.zip
Size: 170.97 KB
Be Sociable, Share!