Shadow Guide

by Apple Ilagan

HTML

<div class="container">
<h1>CSS drop-shadows without images</h1>
<div class="classic exA">
<p>Classic A</p>
</div>
<div class="classic exB">
<p>Classic B</p>
</div>
<div class="classic exC">
<p>Classic C</p>
</div>
<div class="classic exD">
<p>Classic D</p>
</div>
<div class="classic exE">
<p>Classic E</p>
</div>
<div class="classic exF">
<p>Classic F</p>
</div>
<div class="classic exG">
<p>Classic G</p>
</div>
<div class="classic exH">
<p>Classic H</p>
</div>
<div class="classic exI">
<p>Classic I</p>
</div>
<div class="classic exJ">
<p>Classic J</p>
</div>
<div class="classic exK">
<p>Classic K</p>
</div>
<div class="classic exL">
<p>Classic L</p>
</div>
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
<div class="drop-shadow curled">
<p>Curled corners</p>
</div>
<div class="drop-shadow perspective">
<p>Perspective</p>
</div>
<div class="drop-shadow raised">
<p>Raised box</p>
</div>
<div class="drop-shadow curved curved-vt-1">
<p>Single vertical curve</p>
</div>
<div class="drop-shadow curved curved-vt-2">
<p>Vertical curves</p>
</div>
<div class="drop-shadow curved curved-hz-1">
<p>Single horizontal curve</p>
</div>
<div class="drop-shadow curved curved-hz-2">
<p>Horizontal curves</p>
</div>
<div class="drop-shadow lifted rotated">
<p>Rotated box</p>
</div>
</div>

CSS

.container {
	position: relative;
	z-index: 1;
	width: 600px;
	padding: 20px;
	margin: 0 auto;
	background: #FAF0D9;
}
.container:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	font-size: 0;
}
/* Shared styles */
.classic {
	position: relative;
	float: left;
	width: 40%;
	padding: 1em;
	margin: 2em 10px 4em;
	background: #fff;
}
.exA {
	-moz-box-shadow: -5px -5px #888;
	-webkit-box-shadow: -5px -5px #888;
	box-shadow: -5px -5px #888;
}
.exB {
	-moz-box-shadow: -5px -5px 5px #888;
	-webkit-box-shadow: -5px -5px 5px #888;
	box-shadow: -5px -5px 5px #888;
}
.exC {
	-moz-box-shadow: -5px -5px 0 5px #888;
	-webkit-box-shadow: -5px -5px 0 5px #888;
	box-shadow: -5px -5px 0 5px #888;
}
.exD {
	-moz-box-shadow: -5px -5px 5px 5px #888;
	-webkit-box-shadow: -5px -5px 5px 5px #888;
	box-shadow: -5px -5px 5px 5px #888;
}
.exE {
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
}
.exF {
	-moz-box-shadow: 0 0 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px #888;
	box-shadow: 0 0 5px 5px #888;
}
.exG {
	-moz-box-shadow: inset -5px -5px #888;
	-webkit-box-shadow: inset -5px -5px #888;
	box-shadow: inset -5px -5px #888;
}
.exH {
	-moz-box-shadow: inset -5px -5px 5px #888;
	-webkit-box-shadow: inset -5px -5px 5px #888;
	box-shadow: inset -5px -5px 5px #888;
}
.exI {
	-moz-box-shadow: inset -5px -5px 0 5px #888;
	-webkit-box-shadow: inset -5px -5px 0 5px #888;
	box-shadow: inset -5px -5px 0 5px #888;
}
.exJ {
	-moz-box-shadow: inset -5px -5px 5px 5px #888;
	-webkit-box-shadow: inset -5px -5px 5px 5px #888;
	box-shadow: inset -5px -5px 5px 5px #888;
}
.exK {
	-moz-box-shadow: inset 0 0 5px #888;
	-webkit-box-shadow: inset 0 0 5px #888;
	box-shadow: inner 0 0 5px #888;
}
.exL {
	-moz-box-shadow: inset 0 0 5px 5px #888;
	-webkit-box-shadow: inset 0 0 5px 5px #888;
	box-shadow: inset 0 0 5px 5px #888;
}
.drop-shadow {
	position: relative;
	float: left;
	width: 40%;
	padding: 1em;
	margin: 2em 10px...