CSS class for transparency that all browsers support

Personally, one of my favorite in web designs are transparency. It gives life to your site as you will have layers of texts and images in one look.

It's great thing haa!! but did you know that having that in your site is a challenge for us programmers? That is because we have to consider all browsers to support transparency in one time setting.

Good thing..!! The class below will resolve the implementation of transparency for all browsers.

.transparency {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

Below are the CSS properties we used:

• opacity: 0.5; - This is the current standard in CSS transparency settings. This will work in most versions of Firefox, Safari, and Opera.
• filter: alpha(opacity=50); - This one is for our best friend IE.
• -moz-opacity: 0.5; - This one you need for way too old version of Mozilla.
• -khtml-opacity: 0.5; - This one you need for old Safari (1.x).

Resource: css-tricks.com