INCEPTION

Part of the CSS Gradients & Shadows reading list

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;

Scene from InceptionCombined 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;
}

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.