Monday, July 18, 2011

Some notes on CSS drop shadows

So I wanted to do some CSS shadow for a project I was working on and it turns out that IE has filters to emulate the CSS3 box-shadow property:

.shadow {
 -moz-box-shadow: 3px 3px 4px #888;
 -webkit-box-shadow: 3px 3px 4px #888;
 box-shadow: 3px 3px 4px #888;
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888')";
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888');
}

This works fine and dandy for the simple cases, but there are a couple of caveats that should be written down since I haven't seen these mentioned anywhere:

  1. The IE shadow gets the box model wrong: it adds the size of the shadow to the width/height of the element to which it's applied. Beware when floating and applying to elastic layouts.
  2. The IE shadow does not necessarily appear around the element. If you have a div w/ a background-image that is smaller than the div itself, the shadow will be applied to the edge of the background image, not around the outline of the element