jQuery Plugin - Simple Shadow

Ralph Whitbeck — Wed, 27 Aug 2008 02:08:01 GMT

UPDATE: Simple Shadow has been set up on Google Code. You can get the latest here.

We've been researching and trying out javascript shadow solutions for quite sometime. Our designers are really liking to add subtle dropshadows to elements in their designs. jQuery UI had a shadow plugin and it looked promising. I even submitted some bug reports to help it along. But it's been officially removed from the project for the time being.

We've been using RUZEE.shadedborder to handle our shadow needs. It works but adds a lot of undesired div tags to make the gradient color. But the biggest problem was it was really slow and caused IE to crash when I had six items on a page RUZZEEIFIED.

I finally gave in and decided to write my own shadow plugin to handle my specific needs which were to display a shadow of 10px width on the right and bottom sides. I needed it to be easy as well so it uses graphics to accomplish the shadow.

This will work on any element that has a width and height specified in css. It requires three image files that are included in the complete zip file below. See demo.

Here is the code to make the shadow:

$(document).ready(function() { $("div").shadow(); });

Download

UPDATE: Simple Shadow has been set up on Google Code. You can get the latest here.

Ralph Whitbeck - Blog - Simple Shadow

jQuery Plugin - Simple Shadow