What's the best way to apply a drop shadow?

Question

What is the best method for applying drop shadows? I'm working on a site right now where we have a good deal of them, however, I've been fighting to find the best method to do it. The site is pretty animation heavy so shadows need to work well with this.

I tried a jQuery shadow pulgin. The shadows looked good and were easy to use but were slow and didn't work well with any animations (required lots of redrawing, very joggy).

I also tried creating my own jQuery extension that wraps my element in a couple gray divs and then offsets them a little bit to give a shadow effect. This worked well. It's quick and responsive to the animation. However, it makes DOM manipulation/traversal cumbersome since everything is wrapped in these shadow divs.

I know there has to be a better way but this isn't exactly my forte. Thoughts?

Answer 1

ShadedBorder is a good looking and easy to use Shadow-Library. check it out

Answer 2

if your main problem is to navigate the DOM, just add a class and/or id to your element, and refer it with JQuery selectors. even better if you store the ref in a variable, so you don't need to select it too frequently

Answer 3

You don't need to wrap those shadow-divs around the other content, just set them a little askew and place them on a lower z-index !-)

Answer 4

Although it is yet to have full cross-browser support, you might like to try using the CSS 3 text-shadow property.

Answer 5

It largely depends on how frequently your images will need to be changing, and the colored areas that they'll be covering. Because I'm guessing that you'll be needing to pay attention to IE6 compliance, most alpha-PNG solutions will cause such horrible jittery-ness that you'll spend more time in performance optimzation than you would have wanted to guess.

To solve this in the past, since our images are modified less than once a month, we call the images through a caching-PHP script which automatically applies the shadow using a pre-defined background color so we don't have to rely on any transparency. This results in faster downloads (fewer HTTP requests) and a faster-interface because there's less Javascript/CSS magic in the works.

I understand that this is a very old-school solution, and the above solutions would be entirely acceptable if your images were static, but being cross-browser compliant and animated will likely force you to do a solution of this style.

Answer 6

I have created my own solution with four lines of jquery code:

http://sarfraznawaz.wordpress.com/2010/03/16/drop-shadow-effect-with-four-lines-of-jquery-code/