Cross-box-shadow

Hello dear readers. Today I want to share with you an extremely simple way of cross-browser implementation of the css-properties box-shadow. The method is so simple and obvious that I was extremely surprised by the fact 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 for normal browsers.

Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }

1. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
2. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
3. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
4. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
5. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
6. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }

The essence of the implementation of the box-shadow property for ie is reduced to a fourfold application of the shadow filter with different direction values. Thus, the shadow begins to frame the entire contour of the container.

Copy Source | Copy HTML

1. <! - [if IE]>
2. < style type = "text / css" >
3. div {
4. filter :
5. progid: DXImageTransform.Microsoft.Shadow ( color = '# 042b47', Direction = 45, Strength = 6 )
6. progid: DXImageTransform.Microsoft.Shadow ( color = '# 042b47', Direction = 135, Strength = 6 )
7. progid: DXImageTransform.Microsoft.Shadow ( color = '# 042b47', Direction = 225, Strength = 6 )
8. progid: DXImageTransform.Microsoft.Shadow ( color = '# 042b47', Direction = 315, Strength = 6 );
9. position : relative ;
10. top : -12px ;
11. left : -12px ;
12. zoom : 1 ;
13. }
14. </ style >
15. <! [endif] ->

A few nuances that are worth paying attention to:

• The shadow, when using the filter, turns out to be 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 actually have two shadows, the increase in size becomes twofold. Those. in the end, we need to relatively shift the block to the left and up by the formula left = top = - (strength * 2)
• IE6 and IE7 require hasLayout, so for them we set zoom: 1 (or width, height, and other properties that are assigned to 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 text smoothing inside a filter block.
• The shadow in IE is different in shape from the shadow in other browsers (more square)
• AlphaImageLoader stops working inside the block that was designed in this way (it is possible that the other filters didn’t check either)

The final example .
')
That's all. Thanks for attention.