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:
