Skip to main content

How to Create a Shuffled Paper Effect in CSS3

By Craig Buckler

Blogs

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

This is a nice effect which transforms a standard boxy-looking element and makes it look like shuffled paper. I recall seeing a similar effect a few years ago where it was handled with images but we’re going to use pure CSS3:


shuffled paper
View the demonstration and code…

It should come as no surprise that :before and :after pseudo elements are used to display the bottom pages. These are rotated using a transformation to give the shuffled look. The code works in Chrome, Safari, Firefox, IE10 and Opera (Presto and probably Webkit versions). Older browsers may show the lower pages, but they won’t rotate them so they are effectively invisible. However, the effect should degrade gracefully.

Let’s start with some HTML:

<div class="papers">
<p>some content</p>
</div>

Nothing special to see here. I’ve used a generic div, but you could use section, article or whatever is appropriate. The “papers” class is responsible for applying the effect.

First, we’ll apply a background, border and shadow to the main and both pseudo elements:

.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);
}

Notice that two box-shadows are defined: the inner page shading and a subtle drop-shadow.

Next, we’ll define the styles for the main element. Primarily, it’s the width, padding and margins but the relative position is the most important. Incidentally, do not be tempted to apply a z-index; it’ll cause the pseudo elements to appear on top.

.papers
{
	position: relative;
	width: 50%;
	padding: 2em;
	margin: 50px auto;
}

We’ll now apply some content, dimensions and positioning to the :before and :after pseudo elements. In essence, they have the same size, shape and location as the main element:

.papers:before, .papers:after
{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

Now comes the interesting part — we’ll rotate them using a transform. We require the -webkit prefix for Chrome and Safari. The -o prefix is required for Opera which prefers ‘rotate’ to ‘rotateZ’. Firefox and IE10 support the non-prefixed transform.

	-webkit-transform: rotateZ(2.5deg);
	-o-transform: rotate(2.5deg);
	transform: rotateZ(2.5deg);
	z-index: -1;
}

Note that we’ve set the z-index to -1 to push the elements below the main container.

Finally, we apply a different rotation to the :after pseudo element.

.papers:after
{
	-webkit-transform: rotateZ(-2.5deg);
	-o-transform: rotate(-2.5deg);
	transform: rotateZ(-2.5deg);
}

Easy. View the demonstration and code…

Please use the code as you wish — it’s relatively simple to apply different colors and rotation degrees, but you might discover a range of interesting effects. Post your links below…

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.