Coding a drop shadow

can this be done with code?

[too much information]

I am looking for a way to create a drop shadow for an image of any size. Is there a way to do this in HTML, JavaScript, etc. or is this something I need to do to each image manually?

[stever]

If you are looking to do it dynamically, which is what your question seems to imply, then the only thing I can think of to do is put the image in a <div> and create a grey box in another div behind it. Pull the dimensions from the image and then offset 2px to the right and bottom.

But at the end of the day that only works for rectangles, looks tacky and, as I'm sure you already suspect, shadows on the individual images will look hundreds of times better (if you like drop-shadows, that is).

[Longhaired Genius]

-

[too much information]

yea, it's a special request. I'm just trying to save some time and make the site dynamic so it is easier to update.

I thought of the stacked DIV and may still try this. I'll see how it works.

[Nutter]

Let me start by saying that I've never done this, so I'm not even sure this would be a logical way to handle it. Ok, end of warning.

What about using something server side to create a separate image of just the drop shadow and then having it absolutely positioned so that it appears behind and below the top. It seems that something like the GD library or ImageMagick should be able to handle the conversion. If it was coded right, it would only have to be run if the drop shadow graphic wasn't already saved somewhere.

Here's how I would start.

1. Check for a file called 'dropshadow_whatever.jpg'
   
2. If the dropshadow exists, stick it behind the actual graphic and you're done.
   
3. If the drop shadow doesn't exist, create it.
   
4. Using ImageMagick - Open the image, convert it to 2-bit (black and white) and run a gaussian blur on it to make it look like a shadow.
   
5. Save the image as 'dropshadow_whatever.jpg' so the server doesn't have to create the graphic every time.
   
6. Stick the drop shadow in the correct place

Or, create an action in PhotoShop or the Gimp and have it create the drop shadow images for you and then upload 'em all at once.

As I'm writing this, it seems that image transparency would probably be an issue. PNG would be great if you can handle it, but IE has issues with semi-transparent PNGs.

- Ryan

[whoisgregg]

This is the same problem as having rounded corners for a table... Your "drop shadow" is really 5 separate images cleverly assembled around the image. For simplicity, we'll use a table (although you can accomplish the same thing with CSS):

<table border="0" cellpadding="0" cellspacing="0"> 
 <tr> 
 <td colspan="2" rowspan="2"><img src="the-image.gif" width="16" height="16" /></td> 
 <td><img src="top-right.gif" width="16" height="16" /></td> 
 </tr> 
 <tr> 
 <td background="right-edge.gif">&nbsp;</td> 
 </tr> 
 <tr> 
 <td><img src="bottom-left.gif" width="16" height="16" /></td> 
 <td background="bottom-edge.gif">&nbsp;</td> 
 <td><img src="bottom-right.gif" width="16" height="16" /></td> 
 </tr> 
</table>

You should be able to tell what each of the images should look like from their descriptions. :)