css box shadow + transparent background images = intuitive breakdown

Question

• I have a button image I'm using as a background image for some links.
• The background image has rounded corners.
• I want to use a css drop shadow instead of putting the drop shadow in the image

The problem is, the drop shadow appears to be drawn around the element. Although I kind of expected to see the drop shadow color through the transparent parts of the background image, I'm seeing the background color instead (see this jsfiddle).

My actual goal is a little more complex, but if I can satify my first three bullet points then I can nail this task. Specifically, what I want to do is use two nested elements with background images of the right and left parts of a button image (rounded corners) so that I can use the same css to wrap a 'button' around text of any length. Since the backgrounds overlap in a css 'sliding doors' style, a png alpha drop shadow shows a 2x dark section where the images overlap. Soo.. I thought I'd use a css shadow, but as you can see in the jsFiddle, there are problems with that too.

Any ideas?

Answer 1

Box-shadows don't show through transparent backgrounds. A more simple test case would be:

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: transparent;
  box-shadow: 0 0 10px #000;
}​

The output expected would be a nice blurred black square right? Well... no, it's a white square with a dropshadow. http://jsfiddle.net/UjhrW/

To achieve what you want to do you will need separate markup for the dropshadow, fill it with white, and then set the spill of the shadow so it looks like a blurry square...

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #000;
  box-shadow: 0 0 10px 6px #000;
}​

http://jsfiddle.net/Etmty/

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #000;
  box-shadow: 0 0 10px 6px #000;
}

<div class="box"></div>