Seeing more clearly with CSS opacity

I have been trying to use some different CSS properties in recent style sheets and one of these is the opacity property. It’s quite easy to use and can give you a sophisticated effect where one element shows through another. Hey, what’s not to like!? Unfortunately, we need to apply a few Internet Explorer fixes but they are also relatively easy to implement (even if they look a bit complicated).

In most browsers, you can change the opacity value of an element with a simple style rule in your style sheet like this:

.myclass {
      opacity: .5;}

Here, we are using a value of .5. The values for opacity are from 0 to 1 where 0 is completely transparent. Somewhere in between is what we are aiming for but the opacity level will depend on other colours in the element that you apply the opacity to. One thing to note is that if you apply the opacity value to a specific element, all elements within will inherit the same opacity value. In some circumstances, this can make text difficult to read but there’s usually a compromise that can be reached.

Note: Using the opacity property is one approach for achieving transparency in your web designs but the use of alpha transparent PNG images and RGBa transparency are alternative methods. See also Is CSS3 RGBa ready to rock?

For Internet Explorer, we need to use a couple of proprietary filters to achieve the opacity effect. So, our style sheet rule becomes:

.myclass {
opacity: .5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
}

The rather complicated looking filters are for IE8 (second) and IE7 (third line). See the IE Blog for more explanation. There’s a slightly shorter version of the IE7 filter available (for example, see opacity described here) but I’ve used the longer version.

Following on from a previous article about placing text over an image, I have created another example using opacity which shows the effect of an opacity value of .5 and a black background on the text paragraph.

Related: There’s a neat effect on the Shapeshed website where the footer area opacity is toggled on and off using JavaScript when you hover over the bottom of the page.

I think opacity provides a transparency effect that can look very good. Why not try a few opacity rules in your next style sheet?