Home › Blogs › alex's blog

Pure CSS Efx Roundup or Web Frills

Sun, 05/24/2009 - 18:25 — alex

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:

  • Rounded corners
  • Drop shadows
  • Opacity
  • Transparency

Heres how we went:

Effect Firefox 3 Safari 3 IE 7
Rounded corners -moz-border-radius: -webkit-border-radius: no
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.

So there you have it folks. Apart form rounded corners you can almost get away with doing most of your frills in CSS. You can use IE's conditional comments to hide the nasty, non-standard, filter stuff and perhaps even server up a CSS+Javascript fix for the Rounded Corners support.

happy web slingn'!