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:
- 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.
- 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
No comments:
Post a Comment