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!