Scrolling shadows by @kizmarh and @LeaVerou

dabblet.css

/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
	background: white;
	font: 120% sans-serif;
}
body {
	position:absolute;
	width: 100%;
	height: 100%;
	-webkit-perspective: 1000px;
	overflow:hidden;
}
div {
	position:absolute;
	top:10%;
	left:50%;
	width:15%;
	height:80%;
	background:#000;
}
.a {
	-webkit-transform:translateX(0%);
}
.b {
	background:#333;
	-webkit-transform-origin:0 50%;
	-webkit-transform:translateX(99%) rotateY(-20deg);
}
.c {
	background:#666;

	-webkit-transform-origin:0 50%;
	-webkit-transform:translateX(99%) rotateY(-20deg) translateX(99%) rotateY(-40deg);
}

dabblet.html

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

settings.json

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