Cross-browser box-shadow

by Stryker

Hi, dear readers!

Today I’d like to share with you an extremely simple cross-browser implementation of the CSS property “box-shadow”. The method is so simple and obvious that I was greatly surprised not to find a similar solution anywhere on the Web (though I’m absolutely positive that I’m not the first one to discover it).

Let’s start with CSS for “normal” browsers.

div {
background: green; /* must use for IE */
-webkit-box-shadow: 0px 0px 15px #222;
-moz-box-shadow: 0px 0px 15px #222;
box-shadow: 0px 0px 15px #222;
}


The box-shadow implementation for IE is done by applying a shadow filter four times, with various “direction” values, to make the shadow frame the container.

Please pay attention to the details:

• The shadow that you make by applying a filter is darker than desired. To make it look more authentic, try tuning up the “color” and the “strength”.
• Keep in mind that IE increases the block size by the shadow width. And as we basically use two shadows for each side, the actual increase is double the shadow width. Therefore, remember to shift the block leftward and upward by the value calculated using the following formula: left = top = – (strength * 2)
• IE6 and IE7 require hasLayout, so set zoom: 1 (width, height, or other property assigned to hasLayout)
• Make sure to set the background, otherwise the filter will be applied to child elements.

Drawbacks:

• Using filters always means an extra slowdown when a webpage is being rendered
• IE disables text smoothing within a block to which filters are applied
• The shape of a shadow in IE differs from that in other browsers: It’s more square-like

Final example.

That’s all for now. Thanks for reading!

Tags | box-shadow, Cross-browser, css