As text-shadow is to text, box-shadow is to most everything else. It even uses the same basic syntax:
- box-shadow: horizontal offset vertical offset blur color;
Combined with the various transforms and properties in CSS3, box-shadow means that image processing in PhotoShop can be kept to a minimum, and CSS – which is far more easily modified and maintained, as well as very low in file size – can be used for most visual effects on pages.
box-shadow is still in draft status with the W3C; for that reason, Firefox and Safari only support it with vendor prefixes. (IE9 does not).
Remember that in HTML, everything is a box; even if you can’t see it, or if it is only implied. All images are boxes:
- <style type="text/css">
- img#greek-temple { width: 400px; height: 259px;
- border: 15px solid #ffd;
- -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
- -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
- box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3); }
- </style>
- <img src="temple-of-athena-aphaia.jpg" id=greek-temple;"
- alt="Temple of Athena Aphaia, Aegina Island, Greece"
- title="Temple of Athena Aphaia, Aegina Island, Greece" />
(I have applied the style as an id in this case only because doing so makes the CSS easier to read).
Setting horizontal or vertical offset to 0 and adding relatively high amount of blur provides a “glow“ effect; you can also use this to simulate ambient lighting effects. The same process can be applied to text-shadow. Further, box-shadow has an inset option, which provides an embossed appearance:
- h3#inception-logo {
- font-family: "Arial Black", Arial, sans-serif;
- text-align: centre; letter-spacing: .3em; padding: 0 2em;
- font-weight: 900; font-size: 55px; color: #fff;
- text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
- -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset;
- -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset;
- box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset; }