CSS3 Box-Shadows are a great to quickly decorate the outside of block-level elements. There are many CSS box-shadow recipes you can use to produce a variety of effects, including simple, glowing andblurred shadows. And, unlike CSS3 text-shadows, box-shadows are natively supported by the latest version of IE. However, if you want them to appear in older versions of IE (i.e. 6 through 8), you will want to learn how to use a variety of Visual Filters to simulate them. This article will cover a few CSS3 box-shadow effects, the equivalent Visual Filter recipes for IE 6-8, and the differences between them. It will also cover the differences in the CSS3 implementations in all the modern browsers. Box-shadows like the example on the left is possible in all commonly used browsers.
First off, what is a box-shadow?
A box-shadow is equivalent to a CSS3 text-shadow except it is applied to the box of the block-level element instead of the actual text. Just like text-shadows, you can have one shadow:
#box {
box-shadow: <x-offset> <y-offset> <blur-radius> <color>;
}
… three shadows:
#box {
box-shadow: <x-offset1> <y-offset1> <blur-radius1>, <color1>,
<x-offset2> <y-offset2> <blur-radius2>, <color2>,
<x-offset3> <y-offset3> <blur-radius3>, <color3>;
}
… or as many as you want. The x- and y-offsets measure the position of the horizontal and vertical shadow respectively, and the blur-radius measures the amount of blur in the shadow. Let’s take a look at a simple example:
#box {
box-shadow: 5px 5px 0px #ff0000;
}
| Live HTML result | Firefox 4.0 Screenshot (for browsers like IE6-8 that can’t see the Live result) |
|---|---|
|
This is an example of a simple box-shadow without blurring
|  |
Note that although box-shadow is the official property name, one must use the vendor-specific prefixes in order to use it in Webkit browsers (i.e. Chrome and Safari) as well as older versions of Firefox:
#box {
box-shadow: 5px 5px 0px #ff0000, /* Firefox 4.0+, Opera, IE 9 */
-webkit-box-shadow: 5px 5px 0px #ff0000, /* Chrome and Safari */
-moz-box-shadow: 5px 5px 0px #ff0000; /* Firefox 3.6 */
}
Furthermore, there are two optional parameters, the spread (which allows you to determine the size of the shadow) as well as theinset parameter that can allow you to put the shadow inside the box instead of outside of the box. I direct readers toMozilla.org’s great reference for box-shadow to read more on these properties, since they are not, as far as I can tell, reproducible in IE 8 or lower.
What about IE?
IE9 has no problem showing box-shadow except when shadowing a box within a table-cell (If the CSS of the table has itsborder-collapse property set to collapse then the box-shadow is not applied. Hopefully this is fixed in a future release).
As mentioned earlier, IE6-8 requires Visual Filters to simulate CSS3 box-shadows without JavaScript. In order to illustrate this, I will show several different types of box-shadows below and show both the CSS3 syntax and the equivalent Visual Filter CSS recipe. Some of these recipes produce almost identical results, while others are rough equivalents. Note that all these examples use a variation of Paul Irish’s Conditional CSS Pattern in order to create the IE-only rules. This involves replacing the <body> tag of the document with this HTML:
<!-- Extra white-space below is just to make it easier to read. :-) --> <!--[if lt IE 7 ]> <body class="ie6"> <![endif]--> <!--[if IE 7 ]> <body class="ie7"> <![endif]--> <!--[if IE 8 ]> <body class="ie8"> <![endif]--> <!--[if IE 9 ]> <body class="ie9"> <![endif]--> <!--[if (gt IE 9) ]> <body class="modern"> <![endif]--> <!--[!(IE)]><!--> <body class="notIE modern"> <!--<![endif]-->
We can then apply CSS specific to a version of IE. For example:
body.ie7 #box {
/* insert IE7 specific CSS here */
}
(Note: Paul Irish’s technique officially has the conditional comments around the html tag, not the body tag. You can use either for these techniques to work. I just prefer using the latter.)
All these Visual Filter recipes depend on the box “having layout”. If you have any difficulty with the Visual Filters activating, set zoom: 1 or a static width inside the IE6-8 specific CSS to force the block to have layout.
Type #1: Simple, Unblurred Shadows
In order to simulate simple, unblurred box-shadows in IE, we use IE’s DropShadow Visual filter:
#box {
/* CSS for all browsers. */
border: solid 1px #808080;
background: #ffffcc;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
| Live HTML result | Firefox Screenshot | IE7 Screenshot |
|---|---|---|
|
This is an example of a simple box-shadow without blurring
that also works in IE6-8.
|  |  |
There are two exceptions to this solution. The first deals with when the block has a transparent background, and the other has to do with negative box-shadow offsets.
Type #1a: Blocks With Transparent Backgrounds
Let’s say you use the above CSS, but omit the background property:
#box {
/* CSS for all browsers. Note there is no background-color, so box will be transparent */
border: solid 1px #808080;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
Doing this will results in some unexpected results in IE6-8:
| Live HTML result | Firefox Screenshot | IE7 Screenshot |
|---|---|---|
|
This is an example of a box with a transparent background and simple box-shadow without blurring. IE6-8 is having a hard time dealing with the transparent background.
|  |  |
The results in IE7 are as hideous and unreadable as the average YTMND page! In order to fix this issue in elderly IE, one must add a background color in IE6-8 only and remove it with the Chroma filter (more information on this technique can be found on my previous blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together).
#box {
border: solid 1px #808080;
margin: 10px;
padding: 10px;
/* Box-shadow code: */
box-shadow: 5px 5px 0px #ff0000;
-webkit-box-shadow: 5px 5px 0px #ff0000;
-moz-box-shadow: 5px 5px 0px #ff0000;
}
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
background-color: #ffffff;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000),
progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');
}
As you can see below, adding this CSS logic produces much better results:
| Live HTML result | Firefox Screenshot | IE7 Screenshot |
|---|---|---|
|
This is an example of a box
with a transparent background and simple box-shadow without blurring, with a fix for IE6-8 to deal with the transparent color. |  |  |
Note: All the other types of box-shadow recipes that follow should also use this Chroma filter method when it is desirable to have a transparent background in the box itself.
Type 1b: Negative Shadow Offsets
If there are negative shadow offsets, you will see a small difference with the position of the box being shadowed:
#box {
/* CSS for all browsers. */
border: solid 1px #808080;
background: #ffffcc;
margin: 10px;
padding: 10px;
/* CSS3 Box-shadow code: */
box-shadow: -10px -5px 0px #ff0000;
-webkit-box-shadow: -10px -5px 0px #ff0000;
-moz-box-shadow: -10px -5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
}
| Live HTML result | Firefox Screenshot | IE7 Screenshot |
|---|---|---|
|
This is an example of a simple box-shadow without blurring
that also works in IE6-8.
|  |  |
You will note that the offsets in IE push the box down and to the right. This is because IE’s Visual Filters believes that the box-shadow as part of the box itself, while CSS3 believes that it should be outside of the box. As a result, negative box-shadows shift the box in IE6-8. In order to compensate for this, one can use margin-top and margin-bottom to move the shadow to where CSS3 thinks it should be:
#box {
/* CSS3 Box-shadow code: */
box-shadow: -10px -5px 0px #ff0000;
-webkit-box-shadow: -10px -5px 0px #ff0000;
-moz-box-shadow: -10px -5px 0px #ff0000;
}
/* IE6-8 Specific Code */
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=-5, Color=#ff0000);
margin-top: 10px;
margin-left: 5px;
}
| Live HTML result | Firefox Screenshot | IE7 Screenshot |
|---|---|---|
|
This is an example of a simple box-shadow without blurring
that also works in IE6-8.
| |  |
Note that one could also make use relative positioning and use the CSS top and left properties to do the same thing in IE. I leave it up to readers to decide which method would be more appropriate for the situation they find themselves in.
Type #2: Glowing box-shadow
The second box-shadow I use a lot is what I call the “glowing box” effect. This happens when a shadow with a large blur radius is put directly behind a box (i.e. the x- and y-offsets are set to 0, and the blur-radius is a non-zero number). It is possible to simulate this effect in IE using the Shadow filter. This filter must be applied four times (north, south, east and west of the box) in order to simulate the CSS3 effect. Here is the CSS recipe:
#box {
box-shadow: 0 0 5px #666666;
-webkit-box-shadow: 0 0 5px #666666;
-moz-box-shadow: 0 0 5px #666666;
}
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
}
… and here are the results as rendered in Firefox 4 and IE7:
| Live HTML result | Firefox Screenshot | IE7 Screenshot |
|---|---|---|
|
This is an example of a box that has short blurred shadows horizontally and vertically on all sides.
|  |  |
Note that the color in the Visual Filter syntax is lighter than the CSS3 one. In order to get the equivalent IE color, I take a screenshot of the CSS3 box-shadow, open the image in The GIMP or Photoshop, and find the color that is just outside of the box. This is the color I use in the IE syntax. If you don’t want to go through all this trouble, you can also guess, which is what I do if I’m lazy. Which is a lot of the time.
You can increase the blur radius/strength to produce larger glows as well:
#box {
box-shadow: 0 0 15px #cccccc;
-webkit-box-shadow: 0 0 15px #cccccc;
-moz-box-shadow: 0 0 15px #cccccc;
}
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=270);
}
| Live HTML result | Firefox Screenshot | IE7 Screenshot |
|---|---|---|
|
This is an example of a box that has longer blurred shadows horizontally and vertically on all sides.
|  |  |
You can also use this alternate recipe I have used one or twice if you want a darker color closer to the box, with it becoming dramatically lighter father away:
| Live HTML result | Firefox Screenshot | IE7 Screenshot |
|---|---|---|
|
This is another example of a box that has longer blurred shadows horizontally and vertically on all sides.
|  |  |
Sure, the IE7 screenshot looks slightly different from the Firefox one, but let’s take a look at what all the modern browsers look with exactly the same CSS code:
| Opera | IE 9 |
|---|---|
 |  |
| Safari 5 | Chrome 13 |
 |  |
They are all slightly different. It is almost impossible to be pixel perfect with blurred box-shadows unless you give different rules to the different browsers using vendor-specific prefixes.
Two important caveats about the Visual Filter rules:
- As mentioned before, the CSS for IE6-8 uses a lighter color for the shadow. This is due to the way the
Shadowfilter behaves: it requires a lighter shade to simulate the same effect. - Note that the Visual Filters examples are pushed down and to the right compared to the CSS3 example. This is for the same reasons as stated in Type 1b, and a developer would again have to use margins or positioning to get the box in exactly the same place as it is in IE6-8:
#box { box-shadow: 0 0 5px #666666; -webkit-box-shadow: 0 0 5px #666666; -moz-box-shadow: 0 0 5px #666666; } body.ie6 #box, body.ie7 #box, body.ie8 #box { margin-left: -5px; margin-top: -5px; zoom: 1; filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0), progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90), progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180), progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270); }
Type #3: Blurred box-shadow
Up until a few days ago, I thought this last type of text-shadow could not be simulated in IE using just CSS. I then came across an interesting recipe from CSS-Tricks and this demo by Christian ”Schepp” Schaefer. These CSS recipes came close, but was not able to control the color of the shadow itself (it assumed grey shadows only) or the exact location of the shadow. I decided to take this work to the next level and add full control of the text-shadow, with some nice results:
| Live HTML result | Firefox Screenshot | IE7 Screenshot |
|---|---|---|
|
This is an example of a box with a blurred box-shadow. It uses a special CSS recipe in order for it to work in Internet Explorer 6-8 involving a container HTML element and the Blur Visual Filter.
|  |  |
Here is the HTML:
<div id="box">
<div class="content">
This is an example of a box with a blurred box-shadow.
It uses a special CSS recipe in order for it to work in
Internet Explorer 6-8 involving a container HTML element
and the Blur Visual Filter.
</div>
</div>
and here is the CSS:
#box {
/* CSS3 syntax */
box-shadow: 5px 5px 5px #cccccc;
-webkit-box-shadow: 5px 5px 5px #cccccc;
-moz-box-shadow: 5px 5px 5px #cccccc;
/* Place any other shared CSS properties here, except for those in the next rule */
margin: 20px auto;
text-align: center;
}
#box,
body.ie6 #box .content,
body.ie7 #box .content,
body.ie8 #box .content {
/*
* Any width, height, padding, border and background information goes here, so it is
* shared between the CSS3 and legacy-IE solutions
*/
width: 200px;
padding: 10px;
background: white;
border: solid 1px black;
}
body.ie6 #box,
body.ie7 #box,
body.ie8 #box {
/* This contains the color of the shadow in the CSS3 syntax */
background: #cccccc;
/* This contains the blur-radius in the CSS3 syntax */
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5);
/* You must remove the border in IE, since it will be replaced in the next rule */
border: none;
}
body.ie6 #box .content,
body.ie7 #box .content,
body.ie8 #box .content {
position: relative;
/*
* Margins must be added here to place the box above the shadow correctly.
* The margin-left and margin-right properties should be -2 times the CSS3 x-offset.
* The margin-top and margin-bottom properties should be -2 times the CSS3 y-offset.
/
margin-top: -10px;
margin-left: -10px;
margin-bottom: -10px;
margin-right: -10px;
}
Yes, the Legacy-IE Specific CSS as long and as painful like a meeting with your accountant, but it gets the job done.
Conclusion
These Visual Filters CSS recipes can come handy when you want IE6-8 to have similar box-shadow effects that modern web browsers have. There are probably other types of box-shadows that can be handled using them, and if you are interested I encourage those with time and patience to check out Microsoft’s reference to Visual Filters and start playing with them. Although Visual Filter support will probably be taken out of IE10, developers won’t need worry since IE9 already has box-shadow support — these experiments should only be used to add box-shadow support in older versions of IE.
Further Reading
- Mozilla.org’s
box-shadowreference page - CSS Box Shadow from CSS Tricks
- CSS3 Box-Shadow for Legacy IEs from Christian ”Schepp” Schaefer
- Drop shadow with CSS for all web browsers by Robert Nyman. Note his article includes an alternate simpler solution for a blurred
box-shadowthat involves theShadowfilter:
Live HTML result Firefox Screenshot IE7 Screenshot This is an example of a box with a blurred box-shadow. It uses theShadowfilter for Internet Explorer 6 through 8.
but does not as similar when dealing with large shadows:
Live HTML result Firefox Screenshot IE7 Screenshot This is an example of a box with a blurred box-shadow. It uses theShadowfilter for Internet Explorer 6 through 8.
This difference may or may not be important to you, and again, I leave it up to the reader to decide what the right solution would be according to the situation.
扫一扫
941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
