Cheesetoast

Brain Food for Web Developers

A box decorated as a stack of papers.

CSS Paper Stack Effect

This bit of CSS helps to add some decoration to a standard box area. Using the rotate effect we can make an area appear like a stack of paper notes.

Box made to look like a stack of paper notes

View the demo at Codepen.

All we need to do for the HTML is to add a class to a standard div:

<div class="paper-stack">
   <h1>Notes</h1>
   <p>Paragraph</p>
</div>

Now the CSS. To add two extra pages to the box without using additional divs (which is not semantic) we use the pseudo elements :before and :after.

We start with the general styling that applies to all paper sheets.  We give the pages both inset and outset shadows to give the impression of depth:

.paper-stack, .paper-stack:before, .paper-stack: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);
}

Now we’ll get more specific:

.paper-stack

{
position: relative;
width: 200px;
padding: 2em;
margin: 35px auto;
}

/* Setup height, width, rotation, etc. for both underlying papers */
.paper-stack:before, .paper-stack:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(1deg);
-o-transform: rotate(1deg);
transform: rotateZ(1deg);
z-index: -1;
left: 10px;
top: 7px;
}

/* Tweak the lower paper note so that it sticks out further still */
.paper-stack:after
{
-webkit-transform: rotateZ(0.5deg);
-o-transform: rotate(0.5deg);
transform: rotateZ(0.5deg);
left: 5px;
top: 3px;
}

*/ Dress up the header a little */
.paper-stack h1
{
font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-bottom: 2px solid #ddd;
}

.paper-stack p
{
text-align: left;
margin: 1.5em 0;
}

View the demo at Codepen.

Original article on SitePoint.

I tried playing around with CSS animations to make the pages shuffle out a little on hover but unfortunately the animation effects on pseudo elements like :before and :after are not well supported. For more info visit CSS Tricks – Transitions and Animations on CSS Generated Content.

Author: Graham

My name is Graham and I'm a Scottish web developer living in California. I love working with clean code to make attractive and usable websites. I'm also interested in cooking, gardening, and taekwondo.