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.

14 thoughts on “Drop Shadow Effect With JQuery

  1. Pingback: Creating Drop Shadow jQuery Plugin « Sarfraz Ahmed's Blog

  2. Pingback: jQuery Drop Shadow Plugin

  3. Pingback: div shadow with jquery | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s