Box shadows

Once text-shadows are understood, box-shadows will be a piece of cake. Principally, they follow exactly the same syntax: horizontal offset, vertical offset, blur, and color:

box-shadow: 0px 3px 5px #444444;

However, they aren't as well supported across browsers so it's wise to use vendor prefixes to maximize compatibility. For example:

-ms-box-shadow: 0px 3px 5px #444444;
-moz-box-shadow: 0px 3px 5px #444444;
-webkit-box-shadow: 0px 3px 5px #444444;
box-shadow: 0px 3px 5px #444444;

We'll use this to add a box shadow to the film posters in the sidebar of the AND THE WINNER ISN'T site:

.sideBlock img {
    max-width: 45%;
    box-shadow: 0px 3px 5px #444444;
}

Here's the effect in the browser:

Inset shadow

The box-shadow property can also be used to create an inset shadow—this applies within the targeted element, as opposed to the outside, as a normal box shadow would. It's useful for creating vignette effects for example. Here is the syntax:

box-shadow:inset 0 0 40px #000000;

Everything...