CSS3 offers "Shadows" - something which designers often use to lift images or other elements off the page. You can see them underneath the buttons on the right of this page. Before we begin, a little history...
In the bad old days, when graphic designers added a drop shadow to an image, the HTML-Encoders would have to resort to special tricks to put the drop shadow on the page. Sometimes this would mean adding a background-image, which was the shadow, then placing the image over the top. The problem with this was that the image had to fit exactly in the right place; if the image was not the right size it would not look right. The alternate technique was to use an image complete with a drop-shadow as part of the image. The problem here was that it made it difficult to create new images, as they had to be made with the drop shadow included.
Now with CSS3, we can add shadows in code. The only issue is older browsers not showing the shadows at all. This however should not now be an issue, with the recent passing into history of Windows XP. Now everyone from IE9 and up should see the effect.
The code for this looks quite complex, but follows these simple rules:
box-shadow:
inset (optional, if not specified the shadow will be "out-set" or outside)
10px (Horizontal ofset, positive to the right, negative to the left)
10px (Vertical ofset, positive down, negative up)
5px (Blur, applied to the edge of the resultant box)
5px (Spread, added to all sides of the resultant box, before they are blurred)
#888888 (Colour of the shadow)
It is also possible for an element to have more than one shadow applied; just specify more than one set as above, separated by commas.
To ensure this works with older Webkit and Mozilla browsers, you will also need to specify the settings three times:
-moz-box-shadow: settings;
-webkit-box-shadow: settings;
box-shadow: settings;
(Edit: moz and webkit are just about irrelevant now (2016))
Examples:
Menu Buttons created with two inset drop-shadows: Cloudina Website Design
Hero and sub-images with light drop shadows: Lowrie Modular Buildings Website Design
Shadows on header image and footer, and multiple shadows (top and bottom) on a navigation menu Kent Stone Products Website Design
