Paper Stack with Infinite layers
by kizer
HTML
<header id="bar">
<input type="text" />
</header>
<figure class="flip">
</span class="strikethrough"><span>
<span>-12</span>
</figure>
<div class="stacked">
<header>
<h1>Bob Barker</h1><h3>Yesterday 2pm</h3>
<h2>The Price is Right!</h2>
<hr>
<p>Why won't you come on my show?
Please be a contestant on the Price is Right!</p>
</div>
<div class="project"
<span class="title">
<span class="strikethrough"></span>
</div>
CSS
body {
background: #e6e6e6;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0px; padding: 0px;
}
header#bar {
postion: fixed;
top: 10px;
left: 0px;
right: 0px;
bottom: 20px;
background: red;
}
.stacked {
background: white;
border: 1px solid #ccc;
height: 250px;
margin: 30px auto;
margin-top: 10px;
width: 400px;
-webkit-box-shadow: 0 0 0 hsla(0,0%,0%,.5),
0 3px 0 -2px #f6f6f6,
0 3px 2px -2px hsla(0,0%,0%,.4),
0 7px 0 -4px #f6f6f6,
0 7px 2px -4px hsla(0,0%,0%,.4),
0 11px 0 -6px #f6f6f6,
0 11px 2px -6px hsla(0,0%,0%,.4),
0 15px 0 -8px #f6f6f6,
0 15px 2px -8px hsla(0,0%,0%,.4),
0 19px 0 -10px #f6f6f6,
0 19px 2px -10px hsla(0,0%,0%,.4),
0 23px 0 -12px #f6f6f6,
0 23px 2px -12px hsla(0,0%,0%,.4);
-moz-box-shadow: 0 0 0 hsla(0,0%,0%,.5),
0 3px 0 -2px #f6f6f6,
0 3px 2px -2px hsla(0,0%,0%,.4),
0 7px 0 -4px #f6f6f6,
0 7px 2px -4px hsla(0,0%,0%,.4),
0 11px 0 -6px #f6f6f6,
0 11px 2px -6px hsla(0,0%,0%,.4),
0 15px 0 -8px #f6f6f6,
0 15px 2px -8px hsla(0,0%,0%,.4),
0 19px 0 -10px #f6f6f6,
0 19px 2px -10px hsla(0,0%,0%,.4),
0 23px 0 -12px #f6f6f6,
0 23px 2px -12px hsla(0,0%,0%,.4);
box-shadow: 0 0 0 hsla(0,0%,0%,.5),
0 3px 0 -2px #f6f6f6,
0 3px 2px -2px hsla(0,0%,0%,.4),
0 7px 0 -4px #f6f6f6,
...