So I have decided to add the finishing touches to some of my site designs with some new CSS tricks that are being adopted by some unlikely browsers. For the philosophy being that browsers that don't support it just don't get it, since these are just "frills". Here is what I'm interested in:
Heres how we went:
|Effect||Firefox 3||Safari 3||IE 7|
|Drop shadows||text-shadow: 1px 1px 1px #000;||text-shadow: 1px 1px 1px #000;||filter: dropshadow(OffX=1, OffY=1, Color='white', Positive='true')|
|Opacity||-moz-opacity: 0.5;1||opacity: .5;||filter: Alpha(opacity=50);2|
|Background Transparency||background: rgba(255,255,255, 0.5);||background: rgba(255,255,255, 0.5);||filter: gradient(startColorstr=#FFFFFFFF, endColorstr=#FFFFFFFF);3|
1. For FireFox 3.5 is: opacity: .5;
2. NB: For IE8: -ms-filter:"Alpha(Opacity=50)"; also for all IE filters the zoom:1; should be set to make sure it has a position.
3. Color is expressed in #AARRGGBB format, where AA is the alpha hexadecimal value, RR is the red hexadecimal value, GG is the green hexadecimal value, and BB is the blue hexadecimal value. The alpha value controls the opacity of the object. An alpha value of
00 is transparent, while a value of
FF is opaque.
happy web slingn'!