CSS3 shuffled paper effect

This example creates a shuffled paper effect using HTML and CSS3.

You simply need to apply a class of "papers" to any element containing content.

The paper effects can be modified in the CSS to change the width, padding, margin, color, border, angle of rotation, etc. The background paper is applied using :before and :after pseudo elements.

You're welcome to copy or use the code in your own projects. It would be great if you could link back to the explanitory article at SitePoint.com or follow @craigbuckler on Twitter…

I hope you like it!