How to utilize Cross Browser Opacity in CSS

Jul 13, 2012, by admin

Opacity has become an essential component in web design. But alas, many browsers still “mess up” opacity. But, all have workarounds, so you can still use opacity with this tutorial.

Steps

1.You must know basics of CSS(Cascading Style Sheets) to continue.

2.Select an element that you want to transform. We’ll let it be an “div” with id of “opacity”.

div#opacity {

}

3.Add the standard W3C opacity first, as it is a standard.div#opacity {

opacity:0.4;

}

4.Then add the IE8 code.

div#opacity {

opacity:0.4;

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=40)”;

}

5.After this add IE5-IE7 code in it. Make sure you put the IE8 code and IE7 code in order or else they don’t work in some cases.

div#opacity {

opacity:0.4;

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=40)”;

filter:alpha(opacity=40);

}

6.Add the old Mozilla Firefox and Netscape code to it.

div#opacity {

opacity:0.4;

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=40)”;

filter:alpha(opacity=40);

-moz-opacity:0.4;

}

7.Also add the Konqueror and Safari(old) code to it.

div#opacity {

opacity:0.4;

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=40)”;

filter:alpha(opacity=40);

-moz-opacity:0.4;

-khtml-opacity: 0.4;

}

8.You are done.