Transparent Boxes using CSS

Transparent boxes are becoming a common element to many new designs, as you will see our latest design is build around the design of 2 transparent boxes however this was done using png’s.

There are a number of ways to achieve this effect but today i will show a simple example of how to achieve this using CSS. I am not certain to what extent this code will work on all browsers but any feedback that you might have please let me know as i will include it in this post.

The below example will show a box using the background colour of white and an alpha of 50%.

Transparent Box CSS

#mydiv {
width: 300px;
height: 50px;
margin: 20px 0;
background-color: #ffff00;
/* Internet Explorer */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

Here’s what it looks like

50%

30%

10%

Advantages

The only real advantage, but a good one, is that you no longer need to use images (e.g. pngs) for your backgrounds which could result in faster loading times for your web page.

Disadvantages

This may not work on all browsers, it certainly does for the most recent versions but how far back this technique goes back I’m not too sure. Using the code above you will also need to keep the width set, in IE it seems to break without it. But im sure there is a work around for this.

This entry was posted on Sunday, September 27th, 2009 at 6:51 pm and is filed under CSS Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.