CSS Transparency Effects

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%


Intro
CSS (Cascading Style Sheets) can be used to add cool effects to an ordinary looking web page. One such example is adding transparency effect to images or other portions including text of your website.

in IE
In IE transparency is achieved by

 filter: alpha(opacity=XXX) 

where XXX takes value from 0 to 100. It indicates the % of opacity required.
For example

 <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="filter:alpha(opacity=50)" /> 

produces a semi transparent google logo.

in Firefox
In firefox the same effect is achieved by

 opacity:X

where X lies between 0 and 1 (0.1, 0.2,0.25 ...)
For example

 <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="opacity:0.5" /> 

produces a semi transparent google logo.

Inorder to produce the same effect on both browsers just give both codes

 <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style="filter:alpha(opacity=50);opacity:0.5;" /> 

Both browsers would ignore the other code and produce the same effect.

Does this work on other browsers?
I donno try and let me know ....
Feel free to comment.