Bluehost: Web hosting from $3.95/month. Sign Up

Seeing more clearly with CSS opacity

Posted on by Clive Walker in CSS Web Design

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?

Comments

  • 10 Nov 2009 09:01:38

    This is a useful tip for reducing the usage of transparent PNG files, and I imagine could drastically reduce the file size of a page with the omission of PNG files. It’s a shame that as always IE needs a fix, maybe with Windows finally getting better we might see Internet Explorer follow the same path.

    There certainly seems to be some big improvements coming in CSS 3, hopefully making constructing a site easier and faster than before. The more that can be done with CSS, the smaller and more efficient a website will become, and eventually allowing more space to be allocated to higher bandwidth material such as video. This could see a change in website design in general.

    Having more of these tutorials will certainly help a lot of people, so please continue to include them!

Leave a comment

A simple question that helps prevent automated form fillers.

© 2016 Clive Walker