CSS for cross-browser Box-shadow box shading effects (2)

First, preface

I have previously written an article about achieving Box-shadow effects across browsers, although the topic is similar, but the core part is different. Although the previous article realizes the box shadow effect under IE is also used filter, but uses the shadow filter, this kind of filter effect is very far-fetched, the effect transition unnatural, see:

You can fiercely click here: IE under the shadow unnatural demo

In this paper, the box shadow effect of IE is relatively natural, and also supports the UI performance of Inner shadow. In the end how to achieve, what effect if, please continue to browse.

Second, the browser in Pure man mode support situation

CSS3 Box-shadow Properties Basically all modern browsers are supported well. But to implement cross-browser support, you need to use all variants of the following properties:

• In Opera browser and IE9 and above browsers (although still in the belly of the mother), directly using the Box-shadow attribute without the prefix
• To support the Firefox browser, you need to use the-moz-prefix, which is-moz-box-shadow
• To support WebKit core browsers (such as Google Chrome and Apple Safari), you need a-webkit-prefix, which together is-webkit-box-shadow
• All the way to IE8 browser, there is no pure CSS style that supports the Box-shadow property, you need to use another method to simulate

List of key browser-to-CSS3 Box-shadow attribute support scenarios

	Internet Explorer	Firefox	Safari	Chrome	Opera
A long time ago	6.0	3.0	3.2	3.0	9.6
Not far from the past	7.0	3.5	4.0	4.0	10.10
Currently	8.0	3.6	5.0	5.0	10.60
Coming soon (latest 2010)
Future (after 2010)	9.0	4.0	5.*	6.0	11.0

-Support

-Not supported

Third, IE effect realization key – Blur filter

This article realizes the box shadow effect under IE is also with the help of IE filter, different from "CSS to achieve cross-browser compatibility box Shadow effect" in the article of the Shadow Filter, the implementation of the effect of the path is a fuzzy filter, the English name Blur filter, you can make the edge of the element under IE browser blur processing. Let's start by showing the simplest examples:
The code for an ordinary blue background div might look like this:

<div style= "background:blue;height:100px;width:100px;" ></div>

The effect would be as follows:

OK, now we apply IE blur filter to it, the blur size is 5 pixels, the result will be what, this is the relevant code:

<div style= ' background:blue;height:100px;width:100px;  Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=5);  -ms-filter: "Progid:DXImageTransform.Microsoft.Blur (pixelradius=5)"; ></div>

The result is under IE browser:

Now roughly the fuzzy filter of IE has a simple and intuitive understanding, now the key is how to apply it to the projection effect, this is the following main content, but also the most important part of the core of this article.

Four, to achieve a cross-browser box shadow effect

For browsers that support the Box-shadow property, just a layer of labels can be done, but if you want to use a blur filter to achieve the box shadow effect under IE, you need a "behind the scenes" tag, which is a div with the same size as the body tag, with a specific background color (depending on the color of the projection) , as well as the fuzzy size, due to the size of the main label, the modern browser does not bird IE's private filter filter, so the presence of this "behind the scenes" label for Firefox, Chrome, such as modern browser UI performance has little impact.

For modern browsers, we want to implement the box shadow effect of an element, possibly using the following (x) HTML+CSS code:

X HTML code: <div class= "Baseblock" ></div>  CSS code:. baseblock{     height:100px;     width:100px;     Background: #f9f;     box-shadow:10px 10px 5px #000;     -moz-box-shadow:10px 10px 5px #000;     -webkit-box-shadow:10px 10px 5px #000; }

For IE, to achieve a smooth natural shadow effect, you need to use a "behind the scenes" element, this element and the "front" element is the same size, the difference is that it applies the filter blur filter, we can have the following style code:

X HTML code: <div class= "Ieblock" ></div> CSS code:. ieblock{    height:100px;    width:100px;    Background: #000;    Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=10);    -ms-filter: "Progid:DXImageTransform.Microsoft.Blur (pixelradius=10)"; }

If this "behind the scenes" label is displayed separately, the effect is as follows:

Now all we have to do is merge the above and in order to get closer to the actual situation, here's the example of a merge instance that uses a slightly more complex point:
A text, highly variable div tag with the following CSS code:

. baseblock{    width:220px;    Position:relative;}. baseblockin{    padding:10px 15px;    Background: #a0b3d6;    box-shadow:10px 10px 5px #444;    -moz-box-shadow:10px 10px 5px #444;    -webkit-box-shadow:10px 10px 5px #444;    position:relative;    Z-index:1;}. ieshadow{    _width:220px;    _height:220px;    Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=5);    -ms-filter: "Progid:DXImageTransform.Microsoft.Blur (pixelradius=5)";    Background-color: #444 \9;    Position:absolute;    left:5px;    top:5px;    right:-5px;    bottom:-5px;}

The following HTML code:

<div class= "Baseblock" >    <div class= "Baseblockin" > Last night, please play a lot of good staff to eat, chat about a few workplace experience. (1) When you look at yourself as your boss, you work as hard as your boss, and your ability naturally increases. With the ability, if more play can not give you the return, other companies will certainly give. (2) Not every time pay will have a return, but the constant pay will certainly have a return. @ Lee Colling added: Thinking like your boss can improve your ability faster. </div>    <div class= "Ieshadow" ></div></div>

The results are as shown (IE7 browser):

Firefox3.6 under:

You can really click here: Cross Browser Box Shadow Demo

Description
1. The Baseblockin hierarchy is greater than the Ieshadow level.
2. For highly adaptive content, IE6 cannot be implemented because IE6 cannot use absolute stretching to achieve aspect adaptation. However, there is no solution, one is JS, to obtain the height of the main content, and then assigned to the "behind the scenes" projection layer, the second is to directly clone the contents of the main content, the entire seal to the "behind-the-scenes" shadow layer. Instance in the use of hack to IE6 set a high width, so in the IE6 browser also has a box shadow effect, if aspect removed is not effective, but ie7+ browser is not the problem.

The realization of inner shadow effect

With the blur filter, you can also achieve the inner shadow effect under ie. The CSS3 Box-shadow has a inset attribute that allows for an inner shadow effect. Therefore, it is also possible to achieve a cross-browser inner shadow effect.

For example, the following example, the first is the CSS code:

. baseblock{    width:220px;    position:relative;    Overflow:hidden;}. baseblockin{    padding:10px 15px;    Background-color: #888 \9;    Box-shadow:inset 30px 30px 20px #888;    -moz-box-shadow:inset 30px 30px 20px #888;    -webkit-box-shadow:inset 30px 30px 20px #888;}. ieshadow{    _width:220px;    _height:220px;    Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=20);    -ms-filter: "Progid:DXImageTransform.Microsoft.Blur (pixelradius=20)";    Background-color: #fff \9;    Position:absolute;    top:10px;    left:10px;    bottom:-10px;    right:-10px;}. content{    position:relative;    Z-index:1;}

The HTML code is as follows:

<div class= "Baseblock" >    <div class= "Baseblockin" >        <div class= "Ieshadow" ></div>        <div class= "Content" > last night, please play a lot of excellent staff to eat, chat about a few workplace experience. (1) When you look at yourself as your boss, you work as hard as your boss, and your ability naturally increases. With the ability, if more play can not give you the return, other companies will certainly give. (2) Not every time pay will have a return, but the constant pay will certainly have a return. @ Lee Colling added: Thinking like your boss can improve your ability faster. </div>    </div> </div>

The results are as follows, first IE6 browser:

The effect under Firefox3.6 is as follows:

You can click here: cross-browser Shadow effect demo

Vi. Conclusion

IE filter will greatly reduce the performance of the page, I think in addition to the non-forced circumstances, to use the filter to achieve this kind of compatibility box shadow effect. In fact, many of the properties of CSS3 in IE can be implemented using filters or basic implementation. However, the situation of the page is very diverse, it will inevitably encounter the non-use of the projection effect of the UI, at this time, the method presented in this article is one of the best choice.

Reference article: Cross-browser CSS box-shadows, some examples of the original text is less practical, it is recommended to use the more practical methods I have shown in this article.

Welcome to discuss, welcome to exchange. It is also welcome to correct any inaccuracies in the text.

CSS for cross-browser Box-shadow box shading effects (2)