Cross Browser Transparency

There are many complicated methods to create transparency effects across the various browsers available (Firefox, Safari, Internet Explorer), but it can be simple to achieve this effect using a few CSS tricks. Albeit with a couple of limitations.

2 Million+ Digital Assets, With Unlimited Downloads

Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.

Explore Envato Elements

Transparency rules

Mozilla browsers can display transparency, using an effect specified through -moz-opacity: 0.5; where the value is between 0 (completely transparent) and 1 (opaque).

Internet Explorer uses a filter property to allow you to show transparency. It takes the form filter: alpha(opacity=50); where the opacity value is between 0 and 100.

Some other browsers (and future browsers) will conform to the CSS3 specification allowing the property opacity: 0.5; with the value between 0 or 1 as with the Mozilla effect.

The way to get this working in all browsers is simply a matter of using all three rules at the same time:

#transparent-area {
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
[/code]

Limitations

The main problem with the above CSS code is that it is notoriously browser specific, and thus does not conform to valid CSS standards. This doesn't stop it working correctly, but does mean that your CSS code won't validate.

Also, as new browsers are released and updated you'll need to alter the above. Hopefully as they adopt the CSS3 standard more strictly, simply using the opacity: 0.5; rule will suffice.