Creating A CSS3 Paper Stack

06 March 2011

On January 12th 2011 I found myself like most days, browsing through the various new shots onDribbble when I came across a nice little shot by Dan Rubin.

I liked the little paper stack effect that Dan had created for this call to action. I liked it so much I wondered if it could be created in CSS rather than having a background image with the stack. Having previously experimented with the :before and :after CSS propertie on my CSS3 3D Ribbons post using 2D Transforms and box-shadow.

So I went about the interwebs and found a rough and ready 'paper' texture and set about creating this quick example CSS3 Paper Stack

I found a nice little 'handwritten' font from font squirrel to make the demo a little more realistic and aligned the text as best possible to run along the lines of the background paper. To get the most out of this demo page it'd be best to view the code source.

Below is a highlight of the code to keep it as simple as possible for this blog post.

Also note I have only tested the demo CSS3 paper stack in latest versions of Chrome, Safari, Firefox and Opera on my iMac running Snow Leopard. I have not tried this in any other browser and have noticed that Opera isn't playing ball with the -o-transform property. I could probably guess the :before and :after properties won't work correctly in IE.

This is just another proof of concept to show what possibilites there are with the new CSS3 properties

HTML

<!doctype html> 

	 <head>

	  <meta charset="UTF-8"> 

	 </head>

	
e
	   <body>

	          <div id="notes"></div>

	   </body>

	

	</html>

CSS

#notes {

	position: relative;

	width: 320px;

	height: 420px;

	border:1px solid #000000;

	-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);

	-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);

	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);

	

	#notes:before {

	z-index: -1;

	position: absolute;

	top:3px;

	left:0;

	width: 320px;

	height: 420px;

	content: '';

	background-color: #444;

	border:1px solid #000000;

	-webkit-transform: rotate(3deg);

	-moz-transform: rotate(3deg);

	-o-transform: rotate(3deg);

	transform: rotate(3deg);

	-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);

	-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);

	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);

	}

	

	#notes:after {

	z-index: -2;

	position: absolute;

	top:3px;

	left:0;

	width: 320px;

	height: 420px;

	content: '';

	background-color: #444;

	border:1px solid #000000;

	-webkit-transform: rotate(-2deg);

	-moz-transform: rotate(-2deg);

	-o-transform: rotate(-2deg);

	transform: rotate(-2deg);

	-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);

	-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);

	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);

	}