Making Shadows in CSS

You can get some quite nice effects in CSS to make 3D text. Above you can see a heading for one of the exercises in the Begin to Code with JavaScript book (get the draft chapters here). It was simple to set up as a style:

.menuHeading {
font-size: 4em;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: red;
text-shadow: 3px 3px 0 blue, 10px 10px 10px darkblue;
}

A shadow is specified by three values and a colour. The first two values give the X and Y offset of the shadow and the third controls how diffuse the shadow is. You can add multiple shadows to a single style, which is how I got the sharp blue shadow and then the blurred deep blue shadow behind that.

Quite fun.