Question

I have the correct code. No color added to it. Have all my pre-fixes. It shows up like this in any browser. I am saving it with the correct transparency setting in PS as seen in the screen shot. It is transparent except when I put a box-shadow around it. What is this?

Here are some screenshots:

Answer 1

This is the expected behavior. The image is a square even if you have transparency. If you want a shadow on the PNG to fit the non-transparent portion, you’ll have to add the shadow to the PNG itself and not use a css shadow.

In the particular scenario you’re looking at (assuming that what you’re trying to do is add a shadow to one of three identically shaped image tabs) you can put each tab in a div with padding where a shadow would go, create a single png with with a shadow shaped appropriately, and just have a css class that applies the shadow image as a background on the active tab.

EDIT: Another approach?

After I answered this I thought “could one perhaps apply styling to an image poly map, and have the shadow cast on that?”. Unfortunately, the answer is no. For reasons that are beyond me, image maps can only have a small number of styles apply to them (positioning, for instance) and will never be visible. However, it did lead me down another avenue: build an image map with poly areas, and use javascript to take the coordinates and create an svg with a shadow filter on it. This svg could then be set as the background image to the frame with the transparent PNG (or positioning an otherwise tranparent svg on top of the image. This would obviously not work for all browsers as some don’t support svg, but it’s an interesting concept, and I might have to put together a js library for implementing it… it would certainly make applying shaped shadows easier.