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:
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 functions as before but the inset part of the declaration instructs the browser to set the effect on the inside. I'm going to use this rule now on the <body> tag to create a vignette effect for the entire page. The idea is make a shadow appear from all the edges
of our page.
body {
-moz-box-shadow:inset 0 0 30px #000000;
-webkit-box-shadow:inset 0 0 30px #000000;
box-shadow:inset 0 0 30px #000000;
}Here's what the effect looks like in the browser:
Like text-shadows, you can have multiple box-shadows. Again, merely separate the values with a comma and they are applied top to bottom as they are listed. I remind myself of the order by thinking that the declaration nearest to the top in the rule (in the code) appears nearest to the 'top' of the order when displayed in the browser.
box-shadow: inset 0 0 30px hsl(0, 0%, 0%),
inset 0 0 70px hsla(0, 97%, 53%, 1);I've added this to my body rule and it produces an awful red boudoir effect. Must be the by-product of having an image of Moulin Rouge on the page!
Suffice to say, I'm taking that declaration straight out! However, this demonstrates the power of using CSS3 to toy with design ideas. Adding visual flourishes and removing them is a matter of seconds without having to touch a graphics editor.
Note
You can read the W3C specification for the box-shadow property here: http://www.w3.org/TR/css3-background/#the-box-shadow