A Good jQuery drop shadow plugin?

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

Someone else had the exact same question just the other week two years ago. The selected answer was for an unmaintained drop shadow plugin from 2007, but you may want to take a look at the other answers as well.

Though it's a matter of opinion, I believe that CSS3 is your best bet, providing progressive enhancement to those browsers that support it. Here's a sample set of dropshadow properties as shown on CSS3, Please!:

.box_shadow {
     -moz-box-shadow: 0px 0px 4px #333; 
  -webkit-box-shadow: 0px 0px 4px #333; 
          box-shadow: 0px 0px 4px #333; 
}