Bert Bos, style
activity lead Copyright © 1994-2011 W3C®
Created 4 April 2002;
Last updated Thu 15 Dec 2011 06:20:48 AM CET
See also the index of all tips.
CSS2 doesn't have a property to add a shadow to a box. You can try to add a border to the right and bottom, but it won't look right. However, if you have two nested elements, you can use the outer one as a shadow for the inner one. For example, if you have a text like this (HTML):
<div class=back>
<div class=section>
<h2>Die Rose duftet - doch ob sie empfindet</h2>
<address>Heinrich Heine (1797-1856)</address>
<p>Die Rose duftet - doch ob sie empfindet<br>
...
</div>
</div>
you can use the outer DIV as a shadow for the inner one. The result might look like this separate page. First, give the BODY a background (light green in this example), the outer DIV a somewhat darker background (green-gray) and the inner DIV another background (e.g., yellow-white):
body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}
Next, by using margins and padding, you offset the inner DIV a little to the left and up from the outer DIV:
div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}
You also have to move the outer DIV a little to the right. And if you have multiple sections, you probably want some space between them, too:
div.back {margin: 3em 0 3em 5em}
That's basically it. You can add a border around the inner DIV if you want. You'll probably also want some padding inside it, e.g.:
div.section {border: thin solid #999; padding: 1.5em}
Of course, you can vary the size of the shadow to your taste.
CSS does have a property to add a shadow to text. It has four arguments: the color of the shadow, the horizontal offset (positive means to the right), the vertical offset (positive means down) and the blur (0 means a sharp shadow). For example:
h3 { text-shadow: red 0.2em 0.3em 0.2em }