A popular design technique is to create a content container that looks like a sheet of paper and to stack other sheets of paper below it, adding a layered or three-dimensional style. We can create this effect using straight up CSS, but there are multiple types of stacked paper designs we can consider. We’ll provide snippets for four in particular.
Vertical Stack of Paper on Bottom
The idea here is that our content container is the top sheet of paper and more sheets are stacked beneath it with their edges displayed at the bottom of the top sheet.
See the Pen Stacked Paper Effect – Vertical by CSS-Tricks (@css-tricks) on CodePen.
<div class="paper"></div>
.paper {
background: #fff;
box-shadow:
/* The top layer shadow */
0 1px 1px rgba(0,0,0,0.15),
/* The second layer */
0 10px 0 -5px #eee,
/* The second layer shadow */
0 10px 1px -4px rgba(0,0,0,0.15),
/* The third layer */
0 20px 0 -10px #eee,
/* The third layer shadow */
0 20px 1px -9px rgba(0,0,0,0.15);
/* Padding for demo purposes */
padding: 30px;
}
Vertical Stack of Paper on Top
This is the same concept as the last one, but with the stack of papers revealed on the top of the container instead of the bottom. The only difference here is that we have repositioned the the box-shadow
property on the .paper
element using negative numbers.
See the Pen Stacked Paper Effect – Vertical Top by CSS-Tricks (@css-tricks) on CodePen.
<div class="paper"></div>
.paper {
background: #fff;
box-shadow:
/* The top layer shadow */
0 -1px 1px rgba(0,0,0,0.15),
/* The second layer */
0 -10px 0 -5px #eee,
/* The second layer shadow */
0 -10px 1px -4px rgba(0,0,0,0.15),
/* The third layer */
0 -20px 0 -10px #eee,
/* The third layer shadow */
0 -20px 1px -9px rgba(0,0,0,0.15);
/* Padding for demo purposes */
padding: 30px;
}
Diagonal Stack of Paper
This is a slightly different method, where we use the ::before
and ::after
pseudo-elements to create the additional sheets of paper, rather than the box-shadow
technique used in the previous examples.
See the Pen Stacked Paper Effect – Diagonal by CSS-Tricks (@css-tricks) on CodePen.
<div class="paper"></div>
/* Diagonal stacked paper effect */
.paper {
background-color: #fff;
/* Need position to allow stacking of pseudo-elements */
position: relative;
/* Padding for demo purposes */
padding: 30px;
}
.paper,
.paper::before,
.paper::after {
/* Add shadow to distinguish sheets from one another */
box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
}
.paper::before,
.paper::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #eee;
}
/* Second sheet of paper */
.paper::before {
left: 7px;
top: 5px;
z-index: -1;
}
/* Third sheet of paper */
.paper::after {
left: 12px;
top: 10px;
z-index: -2;
}
Disorganized Paper Stack
We can stagger the sheets of paper to create an intentionally messy look using the same sort of technique with pseudo-elements as the last example, though using the transform
property to rotate the underlying sheets of paper. This example assumes the use of Autoprefixer or that prefixes are used for the transform
property where browser support may wane.
See the Pen Stacked Paper Effect – Messy by CSS-Tricks (@css-tricks) on CodePen.
<div class="paper"></div>
.paper {
background: #fff;
padding: 30px;
position: relative;
}
.paper,
.paper::before,
.paper::after {
/* Styles to distinguish sheets from one another */
box-shadow: 1px 1px 1px rgba(0,0,0,0.25);
border: 1px solid #bbb;
}
.paper::before,
.paper::after {
content: "";
position: absolute;
height: 95%;
width: 99%;
background-color: #eee;
}
.paper::before {
right: 15px;
top: 0;
transform: rotate(-1deg);
z-index: -1;
}
.paper::after {
top: 5px;
right: -5px;
transform: rotate(1deg);
z-index: -2;
}
That’s pretty sweet, another great snippet Chris
This is super cool, thanks for sharing.
SWEET!
Would there be any way to put a background image on this?
Made a Sass function for playing with this!
Newbie error, CodePen again:
http://codepen.io/Rodsevich/pen/bVQVeJ
Awesome man! Gonna use this in the near future :-)
Here’s another function for generating x amount of paper stacks
I have been using this solution for a web design (my own version of third one) but there is a problem I couldn’t solve so far: when the content is too big, the main div gets too long and as a result in the middle of the page the shadow style seems really stupid …
The trick I’ve been using is to use JS somehow to make a mock stack to stay sticky while having a div that is
90vh
but now the library I was working with doesn’t work after an update … so, do you have any creative tricks? or alternative JS library that can produce the effect? – multiple divs on top of each other having the sticky position respecting to a container.I have the code for showing papers at the top and at the bottom but cannot get papers to show diagonally or messy.
Well, I did something once that made the papers show extra large and at the top of the page, not in the division in which it is called. Now I don’t seem to be able to get that anymore.
I don’t understand how this “before” and “after” work and don’t seem to be able to find explanation on the web.
Follow up to my own message:
I took a different route. I copied the diagonal code and created a working stack of pages in a new project. Then I added the Messy code to it. Still, working as expected. Bit by but I included copies of my original code for the vertical-up and vertical-down.
All is working )-:
I still don’t know what went wrong in the original.
Should I diagnose a situation that no longer makes and difference? Should I explore the error to know what happened and maybe I won’t ever make that mistake again?
Hmmm….
(The page here is asking me for my e-mail address. I forgot which one I used…)
Hello! In the “Disorganized Paper Stack”, the rotate property is specified as a percentage and therefore, with a lot of content, the corners become larger. But how to make sure that the angle does not change?