Box-shadow for all browsers

The box-shadow property of CSS 3 is supported by recent versions of all browsers.

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.

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;

See the entire code into the source of the demonstration.

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

The inset property uses this syntax:

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

Example:

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" />