CSS3 Box Shadows, Browsers, and Internet Explorer (IE-8)

by Peter

CSS3 supports a new box-shadow” property that can be applied to shadow page elements such as images, SPANs and DIVs. This is great, since it makes it easier to produce good looking frames for images and to nicely off-set boxes in a number of different and stylish ways.

This new feature is currently supported in a number of browsers, for instance FF3.5, Safari 3.1+, Gecko and Google Chrome. Opera (including version 10.10) and Internet Explorer (including IE-8) does not support it (there are rumors indicating the IE-9 will). However, for IE there are some other methods available (that works from IE 5.5 and up).

So how does this work? The basic syntax is:

box-shadow: horizontal vertical blur color;

So, for example

1
box-shadow: 2px 2px 2px #CCC;

is a 2px horizontally (right) and vertically (down) offset shadow with a 2px blur. The color is grey (#CCC).

Then, to complicate matters, Safari requires the prefix

1
-webkit

and FireFox the prefix

1
-moz

. Fortunately the syntax for these are the same.

If you want to achieve the same results in IE, it gets even more complicated. But tools do exist. A number of sites on the net shows that shadow and blur effects can be produced in Internet Explorer too. And, indeed, several writers/sites show that it is possible to achieve similar shadow effects with IE’s proprietary tools as with CSS3. I found four different possible methods for producing box shadows in IE, all using Microsoft-provided “filter”-techniques – in reality, variants of not-so-good proprietary Javascripts.

These tools are the Shadow filter (usage

1
2
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45

; the DropShadow filter

1
2
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
Color='gray', Positive='true'

; the Glow filter:

1
filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5)

. A fourth possible tool is the Blur filter – I have tested it, and found it of little use for the purposes here. For these filters to work, the object must have layout, meaning they must have “height” or “width” set, or be absolutely positioned (or have zoom set – zoom=1).

The examples available online usually apply shadow effects to images or filled boxes (usually filled with dark colors), see for instance this example at the DynamicDrive CSS-library. However, for my own web designs, I wanted nice shadow effects on some simple bordered text boxes with white background.

To test the various possibilities I have set up four DIVs. The first is the text box as is for reference. Then I apply the following shading:

1
2
3
4
5
6
.shadow1 {
box-shadow: 2px 2px  #CCC;
-webkit-box-shadow: 2px 2px #CCC;
-moz-box-shadow: 2px 2px  #CCC;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#CCCCCC, 
                 offX=3, offY=3, positive=true); }

shadow1 has only shadow, no blur. The IE code could have been given in a separate conditional IE style sheet (as some writers recommend), but that turns out not to be necessary (but see here for an example).

1
2
3
4
5
6
7
8
9
.shadow2 {
box-shadow: 3px 3px #CCC;
-webkit-box-shadow: 3px 3px 3px #CCC;
-moz-box-shadow: 3px 3px 3px #CCC;
filter: progid:DXImageTransform.Microsoft.Glow
      (color=#CCCCCC,strength=3) 
progid:DXImageTransform.Microsoft.Shadow
     (color=#CCCCCC,direction=135,
strength=6); }

shadow2 has moderate shadow and blur with the same color. I also test the Glow and Shadow filters.

1
2
3
4
5
6
7
8
9
10
11
.shadow3 {
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter:
progid:DXImageTransform.Microsoft.DropShadow
      (color=#969696, offx=2, offy=2)
progid:DXImageTransform.Microsoft.DropShadow
     (color=#C2C2C2, offx=2, offy=2)
progid:DXImageTransform.Microsoft.DropShadow
    (color=#EFEFEF, offx=2, offy=2); }

And in the final DIV, shadow3, the shadow color is different, and both shadow and blur substantially larger. For IE, the Drop Shadow filter is applied iteratively (this method is from Ole Laursen).

The results for Safari, Firefox and Chrome are very nice. Opera just shows the original text box – it doesn’t support box shadow yet. The results with IE are not very good. See for yourself (here is the page that you can check yourself in different browsers – demo):

Boxes in Firefox:
Firefox boxes
Boxes in IE8:
IE8 boxes
The various filters used to create shadow effects in IE unfortunately also place shadows inside the boxes and affect the text in the boxes. If the boxes had a background color as dark as or darker than the shade, the methods used in boxes 2 and 4 on the right side (the .shadow1 and .shadow3 DIVs) could possibly have been used. On a light or white background the various filter methods are not very useful. My conclusion is that box shadows on boxes with text inside can not meaningfully be applied for IE for the moment.

Related Posts:

Leave a Comment