As text-shadow is to text, box-shadow is to most everything else. It even uses the same basic syntax, with five values:
box-shadow: horizontal offset vertical offset blur spread 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.
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:
img#greek-temple { width: 400px; height: 259px; border: 15px solid #ffd; box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3); }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: center;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);box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset;}