Creating a Stacked Paper Effect in CSS3

Chris McLeod —  Nov 21 2011 — 5 Comments

Replicating a stack of paper is a common design found on the web; it’s an easy way to make a design a little less harsh and digital by giving it an “analog” look. For a quick example, take a look at the “Chapters” WooThemes WordPress theme.

screenshot of the chapters theme, showing the stack of paper effect done using images

In the past I would have used a couple of wrapper divs in HTML, and some background-image CSS to get a vertically expandable (but probably fixed-width without a lot more work) content box. However, with the improvements in CSS3, along with rapidly improving browser support, I wondered if it would be possible to make a similar – and more flexible – effect without images.After a bit of a brain-storming session I came up with the following theory:

  • A wrapper with position:relative
  • A content block (such as article, or a div)
  • use of the :before and :after selector to create pseudo-elements which could be placed under our content block using position: absolute and z-index
  • transform and box-shadow to apply the effects

A quick mock-up in a text-editor later and I had a working proof-of-concept.

Given a sample HTML page like this:

<!doctype html>
<html>
	<head>
		<title>Test Page</title>
		<link rel="stylesheet" href="./style.css" />
	</head>
	<body>
		<div class="hfeed">
			<article class="entry post">
				<header class="entry-header">
					<h1 class="entry-title">This is a Test Page</h1>
				</header>
				<div class="entry-content">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</article>
		</div>
	</body>
</html>

Now we apply some CSS (only showing the bit which makes the “magic” happen):

div.hfeed {
   position:relative;
}

article.post {
   position:relative;
   margin: 0 0 2em 0;
   background: #fff;
   padding: 10px;
   border: 1px solid rgba(0, 0, 0, 0.150);

   -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
   -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
}

article.post:before {
   z-index: -1;
   position: absolute;
   top: -2px;
   left: 0;
   content: '';
   width: 100%;
   height: 100%;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.150);

   -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.19);
   -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.19);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.19);

   -webkit-transform: rotate(1deg);
   -moz-transform: rotate(1deg);
   -o-transform: rotate(1deg);
   -ms-transform: rotate(1deg);
   transform: rotate(1deg);
}

article.post:after {
   z-index: -2;
   position: absolute;
   top: 1px;
   left: -2px;
   content: '';
   width: 100%;
   height: 100%;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.150);

   -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);

   -webkit-transform: rotate(359deg);
   -moz-transform: rotate(359deg);
   -o-transform: rotate(359deg);
   -ms-transform: rotate(359deg);
   transform: rotate(359deg);
}

This will give you something like this screenshot:

screenshot showing the paper-stack effect applied to a content block

The sample code above has the effect being applied to a single content block. If you want each block to have the paper effect (such as each entry on a blog archive page) then you will need to slightly change your CSS and HTML. I will leave this for you to discover – after all, half the fun of learning is experimenting!

As far as compatibility goes: I’ve tested in Chrome, IE9, and Mobile Safari and all work fine. I don’t envision Firefox or the Android web browser would have a problem with this code.

You can find the complete code for the sample page + CSS here, as a Gist on GitHub

About these ads

Chris McLeod

Posts

I’m a developer living in Scotland. I work for an international IT Services company, with my main experience and current role being in the Oil & Gas sector. I also code PHP, JavaScript, a little Ruby, and I'm hoping to learn Clojure, Haskell and Python next. I've got a reasonable amount of experience in infrastructure, servers, and desktops. I'm fairly platform neutral, having used Windows, Mac, Linux, Android, iOS, and WebOS over the years. Outside of work I have a passion for gadgets, technology, and geek culture.

5 responses to Creating a Stacked Paper Effect in CSS3

  1. 

    Works fine in Firefox 8.

  2. 

    This is awesome thanks for the inspiration.

Trackbacks and Pingbacks:

  1. Botones Animados Utilizando solo CSS3 « reyvolsamweb - November 24, 2011

    [...] Creating a Stacked Paper Effect in CSS3 (chrismcleod.me) Comparte esto:TwitterFacebookLike this:LikeBe the first to like this post. [...]

  2. TWTW: More Link Building Tips and Tools, Social Media Tactics, and Web Design Stuff - Bibiano Wenceslao - November 12, 2012

    [...] Creating a Stacked Paper Effect in CSS3 [...]

Share Your Thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s