Just a quick one today. I originally planned to achieve this “layered paper” effect using :before and :after pseudo elements, but then set about trying to do it purely using the CSS3 box-shadow property. That way I’d have an :after free and can add as many “layers” as I want.
Pretty straight-forward, but quite a neat solution I think!
Here’s the end result;
And here’s the CSS to achieve it (don’t forget to add vendor prefixes if you use this);
/* Layered Paper */
.layers {
text-align: center;
padding:1.618em;
margin-bottom:1.618em;
font-weight: bold;
background: #eee;
box-shadow:
0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
0 10px 0 -5px #eee, /* The second layer */
0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
0 20px 0 -10px #eee, /* The third layer */
0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
}
Enjoy!