<div class="layered-paper">
Howdy
</div>
.layered-paper {
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 */
}
really nice designing with css
Amazing effect! now my facebook fanbox has a layered effect…!
I did something just like this the other day! After using box-shadow for this effect, I had a world of brainstorms-a-comin’ for more uses. Here’s a little screenshot of my use. Sorry – I can’t show more than this right now!
Nice effect.
Here’s a blogpost of a ‘paper stack’ I created last March using CSS3 –
http://alwaystwisted.com/post.php?s=2011-03-06-creating-a-css3-paper-stack
Awesome effect with CSS.
Is there perhaps a way to flip this effect so that it goes upwards, rather than down? Would be useful for a project I’m doing!
Thanks!