jQuery Drop Shadow Plugin Revisited

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)

12 thoughts on “jQuery Drop Shadow Plugin Revisited

  1. 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:

      shadowColor: ‘#cccccc’,
      shadowLayer: -100,

    • @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.

  2. Pingback: CSS3 drop shadow

  3. 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)

  4. 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!

  5. Pingback: CSS3 drop shadow

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s