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