Stacked paper effect using CSS

CSS

Stacked paper effect can be easily created by using before and after pseudo elements of CSS. Below given CSS code is for creating  an awesome stacked paper effect similar to the given screenshot. You can easily customize this code according to your choice by adjusting the size, color and other options of the element according to your requirement.

Stacked paper effect using CSS

 

HTML Code

<div class="paper-stack">
</div>

 

CSS Code

.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);
}
.paper-stack
{
position: relative;
width: 300px;
padding: 20px;
margin: 40px auto;
 height:300px;
}
.paper-stack:before, .paper-stack:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(.8deg);
-o-transform: rotate(.8deg);
transform: rotateZ(.8deg);
z-index: -1;
left: 9px;
top: 8px;
}
.paper-stack:after
{
-webkit-transform: rotateZ(.7deg);
-o-transform: rotate(.7deg);
transform: rotateZ(.7deg);
left: 4px;
top: 4px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *