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 
Is there a way to make the shadows refresh when you resize the browser window? The shadow script great.
I tried $(window).resize(function () { /* refresh */ });, but it doesn’t seem to clear the old shadow properly.
@Arie: Thanks for pointing out important thing here. The divs created for shadow effect have the class drop_shadow_layer. So you can use this code to apply the shadow when window is resized:
$(window).resize(function(){
$(‘.drop_shadow_layer’).remove();
$(‘.shadow’).dropshadow({
shadowColor: ‘#cccccc’,
shadowLayer: -100,
distance:’6px’,
blur:’3px’
});
});
Thank you for the wonderful plugin. The original dropshadow plugin no longer seems to be available. Your plugin was a life saver.
@Jatindar: You can download old version here: http://sarfraznawaz2005.kodingen.com/demos/jquery/Drop_Shadow_Plugin.zip
Hi, I am currently trying to use your plugin for a new layout. I am able to get the shadow to work on my ‘wrapper’ div, but I cannot get it to show on a secondary div, titled ‘content’. Any suggestions? Here is the demo: http://ottoftp.com/dev/wstam/test2.html
This is great work, however, I’m having some issues with jQuery. Would you be available to assist? You can contact me directly.
Thanks
Blur Effect Doesnt Work in IE 7
@Haab: That is because CSS3 isn’t supported in IE<8. For the IE, the div-based shadow is applied rather than that of CSS3.
Pingback: CSS3 drop shadow
What if Im using drop-shadows on divs which are movable by nature??
Lets assume, I have an igoogle like page, where the gadgets can be moved here and there by the user, in that situation, the shadow divs are going to stay there itself.
It seems like a long way from being useful in such situation, otherwise its a really nice plugin.
(All the above was in cases where CSS3 is not supported till now)
How can I apply this to a left nav div and only have the shadow on the right side of the div (not the bottom) and not offset to the bottom at all?
On the bottom I am matching up my nav div to a footer div containing an image where the shadow needs to match up.
My footer image contains the trail edge of the shadow which is actually a 5 pixel wide variation of grey. I was thinking of trying to create the nav div shadow effect by nesting successive dives and offsetting them one pixel to the right to match my shadow but thought your approach is better. Please let me know if I am applying this correctly and how I can only have the shadow on the right. Thank you! Your solution is great!
Pingback: CSS3 drop shadow