Cross-browser box-shadow

Hello dear readers. Today I want to share with you an extremely simple way to cross-browser implementation of the box-shadow css property. The method is so simple and obvious that I was extremely surprised that I could not find a similar solution on the Internet (although I am more than sure that I am not a pioneer).



So for starters, css is for normal browsers.

Copy Source | Copy HTML

1. div {
2.     background: green; /* обязательно для ie */
3.     -webkit-box-shadow: 0px 0px 15px #222;
4.     -moz-box-shadow: 0px 0px 15px #222;
5.     box-shadow: 0px 0px 15px #222;
6. }

The essence of implementing the box-shadow property for ie comes down to applying the shadow filter four times with different values ​​of direction. Thus, the shadow begins to frame the entire outline of the container.

Copy Source | Copy HTML

A few nuances that are worth paying attention to:

• The shadow when using the filter turns darker, therefore, in order to achieve identity, you need to play around with the color and strength parameters
• IE increases the block size by the width of the shadow, and since for each side we essentially have two shadows, then the increase in size becomes double. Those. in the end, we need to relatively move the block to the left and up according to the formula left = top = - (strength * 2)
• IE6 and IE7 require hasLayout, so for them we set zoom: 1 (or the width, height and other properties that assign hasLayout)
• For the block, it is necessary to set the background, otherwise the filter will be applied to the child elements

Minuses:

• Filters are always extra brakes
• IE turns off anti-aliasing of text inside a block with filters
• The shadow in IE differs in shape from the shadow in other browsers (more square)
• AlphaImageLoader ceases to work inside the block thus created (maybe I didn’t check other filters either)

The final example .

That's all. Thanks for attention.