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.

.

Screencast

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

.

Download Code.