CSS3 Paperstack

Pure CSS based solution for creating the illusion of stacked papers.

As you might have guessed you're right in the middle of the demo.

How It Works

The main work is done with a combination of everyone's favorite CSS pseudo elements :before/:after & CSS transforms. No additional markup elements are required. Placing the pseudo elements behind the content of the element they're injected on is achieved by utilising negative z-index values.

The css uses relative values a lot so the paper stacks will resize proportionally depending on the screen size and wrapper css.

All you have to do is include the .paperstack css rules & give your content wrapper this class.

Within Content

By adjusting z-index this works within content too.

And it will automatically grow or shrink depending on the content placed within so this sentence could really be long without destroying the stacks

Browser Support

This demo should work in all modern browsers including IE9. While IE8 understands pseudo elements it won't display CSS transforms.

Use Me, Fork Me

You can use the css right away or fork this little site along with the css file on Github.

Download all files Fork on Github