Design, CG Graphics & Inspiration
Cross-browser box-shadow

Cross-browser box-shadow

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!

  • Splashnology Editors,
  • March 26, 2011

SHARE THIS POST

This post has been written by the team here at Splashnology.com

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • This is cool, box shadow in IE6 & IE7 ! …

    Since IE9 supports box-shadow would it make more sense to have your conditional comment be specifically set to lte IE8 so that way IE9 can do it’s CSS3 magic?

    Also, minor suggestion, if you posted the IE conditional code the reader won’t have to view the source on the demo page to understand the filter property settings for IE. 

    Thanks for this, will come in handy for any box-shadow critical missions :)  

    Cheers  

  • This is cool, box shadow in IE6 & IE7 ! …

    Since IE9 supports box-shadow would it make more sense to have your conditional comment be specifically set to lte IE8 so that way IE9 can do it’s CSS3 magic?

    Also, minor suggestion, if you posted the IE conditional code the reader won’t have to view the source on the demo page to understand the filter property settings for IE. 

    Thanks for this, will come in handy for any box-shadow critical missions :)  

    Cheers