Paper Stack

dabblet.css

/**
 * Paper Stack
 */
 
* { box-sizing: border-box; }
a { text-decoration: none; color: #AC190C; }
body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;	
	background: url("http://subtlepatterns.com/patterns/wood_pattern.png");
	background-color: #fff;
	min-height:100%;
	padding-top: 50px;
}

ul.list {
	font-size: 14px;
	list-style: none;
	position: relative;
	width: 350px;
	margin: 40px auto;
	border: 1px solid #f5f5f5;
	padding: 20px 0;
	background-color: #FBFBFB;
	box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),
		    0 4px 3px -2px rgba(0,0,0,.1),
		    0 1px 1px 0 rgba(0,0,0,.2);
	text-shadow: 0 1px 0 white;
}
ul.list:before, ul.list:after {
	content: '';
	position: absolute;
	left: 2px;
	top: 3px;
	background-color: #F9F9F9;
	border: 1px solid #f5f5f5;
	width: 99%;
	height: 100%;
	z-index: -1;
	box-shadow: 0 7px 1px -3px rgba(0,0,0,.1),
		    0 1px 1px 0 rgba(0,0,0,.2);
	transform: rotate(2.5deg) ;
}
ul.list:after {
	top: 4px;
	transform: rotate(-1deg) ;
}
.list li {
	border-bottom: 1px solid rgba(205,220,243,1);
	padding: 8px 10px 2px 35px;
}
.list li:first-of-type:after {
	content: '';
	position: absolute;
	left: 25px;
	top: -1px;
	border-left: 1px solid rgba(240,214,213,1);
	border-right: 1px solid rgba(240,214,213,1);
	width: 1px;
	height: 101%;
}

dabblet.html

<ul class="list">
	<li>Hello, I am a piece of paper.</li>
	<li>A digital piece of paper.</li>
	<li>My only markup is an unordered list.</li>
	<li>The pages behind me are pseudo elements.</li>
	<li>So are the red lines.</li>
	<li>&nbsp;</li>
	<li>&nbsp;</li>
	<li>I was created by <a href="http://twitter.com/davidmerrique" target="_blank">@davidmerrique</a></li>
</ul>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}