Drop shadows

This is an example to demonstrate the beauty of CSS drop shadows. As you can see, they are easy to control.

The code source

body {
  max-width:800px;
  font-family:georgia, serif;
}

h1 {
  text-shadow: #555 3px 3px 4px;
}

h2 {
  text-shadow: #f00 0px -5px 10px;
}

a {
  font-size: 120%;
  text-shadow: #555 2px 2px 0px;
  border: 1px solid black;
}

p.shadow {
  color: #ccc;
  text-decoration: bold;
  text-shadow: #000 2px 2px 2px;
}

The different properties from left to right set the colour of the shadow, the left/right and top/bottom offsets of the shadow (negative values move the shadow left/up, and positive values move the shadow right/down), and the amount of blurring for the shadow.

If you want to know more, visit the CSS3 spec - there's a lot of text there, but you might find some of it interesting.