This has been done before, but not in such a simple and elegant way, in my opinion. This implementation has four important features that separate it from the rest: no images, no messy nested divs in your html code, no CSS, and realistic fading shadows! It is based on the Prototype Javascript Framework, and requires version 1.5, which you can get here.
Other drop shadow libraries that eschew images, provide their shadow by adding an absolutely positioned div just behind the object. Like so...
Example 1
(Drag Me Around)
I think you'll agree that that looks pretty bad. But it's a lot better with a little opacity tweak...
Example 2
(Drag Me Around)
But it still just looks like a gray box under there, doesn't it? That's where the magic of The Shadower comes in. Rather than just one gray box, it uses several successively smaller boxes stacked on top of each other to create a realistic drop shadow that really fades into the background.
Example 3
(Drag Me Around)
Now, doesn't that look better? Drag it up next to the others if you aren't convinced.
There are five parameters to play with in getting your drop shadow just right.
distance [default: 8]
The distance away from the shadowed element to draw the shadow. This can also be thought of as the height "above the page" of the shadowed object
angle [default: 130]
The direction away from the shadowed element to draw the shadow. It is measured in degrees from the vertical. If you think of it like the numbers on a clock, 12 is at 0°, 3 is at 90°, 6 is at 180°, 9 is at 270°, etc. The default angle of 130 would be between 3 and 4 on the clock face.
opacity [default: 0.7]
The opacity of the shadow, measured between 0.0 and 1.0.
nestedShadows [default: 4]
This is the number of gradually darker shadows to draw under the shadowed element.
color [default: #000000]
This is the color of the shadow. The default black color is good enough for most uses, but you can change it if you want.
Test Example
(Drag Me Around)
distance:
angle:
opacity:
nestedShadows:
color:
Presets: Example 1Example 2Example 3
Ideally, you should set a CSS class on any elements that you want shadowed, and then call Shadower.shadowWithClass() on page load. Like so...
`
So what are you waiting for? Download it and start using it!
I have not yet tested this on all browsers. If you have any problems, please either leave a comment on this blog entry or email me at erikwordpressplugins -at- gmail.
Enjoy!