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)

Drop Shadow Effect With JQuery

I am very excited¬† because for this post, I have created my first ever screencast that demonstrates how easy it is to actually create¬† the drop shadow effect with JQuery. In fact, we will be using four to five lines of JQuery code to achieve this cool effect. The shadow can be applied to just but anything not just the images. See the shadow effect in action first. Let’s see the idea behind this effect.


The Idea?

Absolute positioning in CSS is extremely useful allowing you to position elements just about any place on the page. This is exactly what we are going to do. For each element that is to be shadowed, we create a div and position it behind that element to create the shadow effect. The height and width of each created div is same as that of element which is to be shadowed. Note that all of that is done from JQuery code.



In this video, I create the shadow effect from scratch. I recommend you to see the video in full screen for better viewing.