sMoRTy71.com: Changing a layer's opacity

Changing a layer's opacity
I was working on a project at work yesterday and discovered a really cool CSS attribute that I hadn't used before. I wanted to create a layer that covered the page, but allowed the portion of the page behind the layer to still be visible (but slightly muted).

The attribute is "opacity." Of course, there are different implementations for IE, Mozilla and Safari; but, unlike other browser CSS differences, this one is actually easy to implement. See the code below:

For IE: filter:alpha(opacity=50);
For Mozilla: -moz-opacity:0.5;
For Safari: opacity: 0.5;

You can place any or all of these in your CSS class depending on which browsers you care about. For example, to make a white box that has 50% transparency (and works in all 3 browsers), you could create the following class:

.whitebox {
background-color:#ffffff;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
width:350px;
height:350px;
}

IE requires a height and width attribute in order for their filter to render the transparency.