Box-shadow for all browsers

The box-shadow property of CSS 3 is supported by recent versions of Chrome, Firefox and by Internet Explorer 9. But for earlier versions of Internet Explorer, you must find alternative tricks. Actually a few lines of code will suffice.

The CSS code

The box-shadow property is implemented under different names depending on the browser.

-moz-box-shadow: 6px 6px 12px #888;  
-webkit-box-shadow: 6px 6px 12px #888;
box-shadow:6px 6px 12px #888;

The first parameter is the horizontal offset of the shadow.

The second parameter is the vertical offset.

You can put negative values to place the shadow on the opposite side of the box.

The third value, always positive, is the length of the gradient.

A fourth value, not used in the demo, extends the shadow in the opposite direction.

A color code gives the color of the shadow.

The inset parameter, not used in the demo, create a shadow inside the box and not outside like this.

The complete code

To provide a frame around the image, or create an internal margin in the case of a text box, add the padding property:

padding: 8px;

And adds a border to mark the box with the classic border property:

border: 1px solid # CCC;

We can eventually round corners:

border-radius:6px;  
-moz-border-radius:6px;

This will not work with Internet Explorer, the box will remain squared.

See the entire code into the source of the demonstration.

The code specific to Internet Explorer 6

This code is useless on Internet Explorer 8, but allows for compatibility with IE6 and IE7.

It is a ActiveX filter. In fact, according to Microsoft documentation, the filter is supported since IE 5.5.
The Direction 135 means for the lower right side. There is a code for each side of the box.
The zoom property is used to resolve a display bug.

<!--[if lte IE 8]> 
<style type="text/css">
.shaded
{
background-color: #fff;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=6);
}
</style>
<![endif]-->

You need also this DOCTYPE for all Internet Explorer versions:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Or:

<!DOCTYPE HTML>

Compatibility test

Rules that work on the current browser display a green square with a shadow, otherwise only a green square.

  box-shadow -webkit-box-shadow -moz-box-shadow
normal
inset

The inset property uses this syntax:

box-shadow:inset 6px 6px 12px #0F0;

With Internet Explorer 9, the box-shadow property (without inset) does not work inside a table, but work outside, as below:

 

Demonstration on a text box and an image

Demonstration of a text or an image box with a shadow in CSS 3, running on all browsers.

Example for a text box:

This is a text box, a simple paragraph with the <p> tag, and box-shadow property in CSS.
It works with the latest browsers.

The CSS 3 code:

.shaded
{
padding: 8px;
border: 1px solid #CCC;
box-shadow:8px 8px 12px #888;
border-radius:6px;
}

HTML code:

<p class="shaded" style="width:400px;">
... content...
</p>

HTML code for an image, the example at top of the page:

<img class="shaded" src="/images/bulle.jpg" />   

More information

© 2010-2012 Xul.fr