Sarfraz Ahmed's Blog

PHP, MySQL, jQuery, JavaScript, Ajax, CSS, HTML and more

jQuery Drop Shadow Plugin Revisited

11 Comments Posted by Sarfraz Ahmed on October 15, 2010

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.

Download Drop Shadow Plugin (Updated)

JQuery dropshadow, JQuery, plugin, shadow

← StyleTable jQuery Plugin Flag of Pakistan with pure CSS →

11 Responses to jQuery Drop Shadow Plugin Revisited

Arie November 4, 2010 at 8:54 PM
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.

Reply
- Sarfraz Ahmed November 9, 2010 at 6:03 PM
  @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’
  });
  });
  
  Reply
Jatinder Thind November 8, 2010 at 4:05 PM
Thank you for the wonderful plugin. The original dropshadow plugin no longer seems to be available. Your plugin was a life saver.

Reply
- Sarfraz Ahmed November 9, 2010 at 6:00 PM
  @Jatindar: You can download old version here: http://sarfraznawaz2005.kodingen.com/demos/jquery/Drop_Shadow_Plugin.zip
  
  Reply
Carrie November 23, 2010 at 1:40 AM
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

Reply
Brian Hannah November 24, 2010 at 9:56 PM
This is great work, however, I’m having some issues with jQuery. Would you be available to assist? You can contact me directly.

Thanks

Reply
Haab December 5, 2010 at 11:05 PM
Blur Effect Doesnt Work in IE 7

Reply
- Sarfraz Ahmed December 6, 2010 at 12:15 PM
  @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.
  
  Reply
Pingback: CSS3 drop shadow
Neeraj June 9, 2011 at 10:11 AM
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)

Reply
Bo June 29, 2011 at 9:51 PM
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!

Reply