Shadows without images like a css3 freak

dabblet.css

/**
 * Shadows without images like a css3 freak
 */
body {
	margin: 0;
	padding: 0;
	background: #EEE;
	color: #222;
	font-family: Verdana;
}


header {
	width: 700px;
	margin: 10px auto 60px;
	border: 4px solid #FFF;
	padding: 10px;
	background: #FCFCFC;
	height: 200px;
	position: relative;
}

header:before, header:after {
	position: absolute;
	width: 40%;
	height: 55%;
	z-index: -1;
	bottom: 20px;
	content: '';

	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4)	
}

header:after {
	right: 30px;
	transform: skew(15deg) rotate(6deg);
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
}

header:before {
	left: 30px;
	transform: skew(-15deg) rotate(-6deg);
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
}

dabblet.html

<header>
	Preview
</header>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}