Question

In my spare time am trying to learn javascript & jQuery. I generally experiment on a website. I want to achieve a faint shadow-effect when some element appears on the page. This gives –

1. This appears as if the element is above other elements on the page.
2. and makes this new element something important to look at.

How can I get this using jQuery. In some places, they were suggesting to use ‘image sprites’. But I want to avoid images for this purpose because –

1. I don’t want to be opening up photoshop everytime I want a shadow-effect for some new element.
2. Images take time to load. Hence as soon as the element appears on the page, it takes time to load the images & the shadow-effect illusion is gone by then.

Also, I hear CSS3 has this shadow-effect built-in. But there are different browsers out there using different versions. Plus IE* browsers are a majority. I want this to work in all versions of IE. How can I get this effect across most browsers as uniformly as possible.

Answer 1

http://plugins.jquery.com/project/DropShadow

This a reasonably good plugin!

You can see a demo here:

http://dropshadow.webvex.limebits.com/