Shuffled paper
Applies a CSS3 shuffled paper effect to any container element.
<div class="papers">
<div class="papers">
<h1>CSS3 shuffled paper effect</h1>
<p>This example creates a shuffled paper effect using HTML and CSS3.</p>
<p>You simply need to apply a class of "papers" to any element containing content.</p>
<p>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.</p>
<p>You're welcome to copy or use the code in your own projects. It would be great if you could
link back to <a href="http://www.sitepoint.com/css3-shuffled-paper/">the explanitory article at SitePoint.com</a> or <a href="http://twitter.com/craigbuckler">follow @craigbuckler on Twitter</a>…</p>
<p>I hope you like it!</p>
</div>body
body{font-family: sans-serif;
font-size: 100%;
color: #444;
background-color: #ddd;
}
.papers, .papers:before, .papers:after
{background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
.papers{position: relative;
width: 50%;
padding: 2em;
margin: 50px auto;
}
.papers:before, .papers:after
{content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: rotateZ(2.5deg);
transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
}
.papers:after
{transform: rotateZ(-2.5deg);
transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}
.papers h1
{font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-top: 1px solid #ddd;
border-bottom: 2px solid #ddd;
}
.papers p
{text-align: left;
margin: 1.5em 0;
}