Transparent Columns

Transparency is an effect that, unfortunately, haven’t gotten much use during the web’s history. One of the biggest reason for this is the lack of support for PNGs with alpha channels in IE6. This is starting to change with IE7 and Firefox gaining more and more ground on Windows systems.

As most web developers are aware o it’s possible to use PNGs with alpha channels, but this is filled with lots of problems and doesn’t work very well when you place content on top of them.

There is a way to make content transparent, using the opacity tag and a proprietary opacity filter in IE-based browsers. The problem with this CSS-property is that all children to the transparent element will be transparent as well, which often isn’t the desired effect.

Knowing all this, how do we create transparent columns that can work in all browsers? What if we could use the opacity property but still have the content opaque?

This is possible using some clever use of CSS-positioning. What we’ll be doing is having a parent element that contains two children. One transparent background that fills the entire width and height of the parent, and one child that contains the content. This way we can have a transparent background while the content remains opaque.

The basic markup we will be using is as follows:

<div id="column-1" class="container"> <div class="overlay"></div> <div class="content"> <h2>Content</h2> </div> </div>

First we want to set the container to position: relative; float: left; this allows us to use relative absolute positioning and makes the parent to contain all children if they are floated.

css#column-1 {
position: relative;
float: left;
width: 500px; /* remember to set a width */
}

Not let’s take care of the transparency on the “overlay”-div.

css.overlay{
position: absolute;
top: 0; /* These positions makes sure that the overlay */
bottom: 0;  /* will cover the entire parent */
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65; /* older Gecko-based browsers */
filter:alpha(opacity=65); /* For IE6&7 */
}

Ok. Now let’s style the content. It’s important to set a fixed width.

css#column-1 .content {
width: 460px;
padding: 20px;
}

Ok, almost done. As you may have noticed (if you’re following me, that is) the text is placed under the transparent overlay div. To fix this, we set the content to position: relative;

css.content {
position: relative;
}

Ok, now it works in all browsers except for IE6. Let’s fix that. Enter the following CSS expression:

css/* Lets use the * html hack so only IE6 reads the rule */
* html #column-1 .overlay {
height: expression(document.getElementById("column-1").offsetHeight);
}

If you plan on using it on a live site, you may want to use conditional comments instead of the star html hack. But for this example it will suffice.

It’s also noteworthy that it won’t work in IE6 if javascript is disabled, but it degrades gracefully. Given the last survey of IE6 I saw which was about 32% and the (roughly) 10% that surf the web without Javascript, only 3% of your visitors will even notice this, which I find totally acceptable.

Another downside is that each column needs it’s own id and it’s own CSS rule for IE6. I can live with that though.

And there you have it! Here’s a working example. Cross-browser transparent columns. This is the same technique as I use on this site. Floats work too - which makes it possible to create multi-column transparent-column layouts.

Download the source-file transparent-columns.zip.

Source : http://bitsamppixels.com/2008/02/11/cross-browser-transparent-columns/