In one of my previous posts, I had shown how to create jQuery drop shadow plugin. To create the drop shadow effect, I was basically creating a div behind the elements which were to be shadowed. I knew about CSS3 box-shadow property but I did not consider it for the drop shadow effect because CSS3 is only supported by modern standard-compliant browsers but a comment of C-King at my previous post made me rethink about it and in this post, the plugin has been modified to create the CSS3 drop shadow effect.
The plugin now applies CSS3 drop shadow effect for the browsers that support it or it will use div-based approach like it did before. The plugin now checks if the current browser supports CSS3 and if so, it will apply CSS3 drop shadow effect and if CSS3 is not supported, it will apply div-based drop shadow effect. A new blur option has been added into updated plugin which is only applicable if current browser supports CSS3.
The plugin has been checked working fine in IE6+, FF, Webkit and Opera.
Sarfraz Ahmed's Blog 