Stack of papers with CSS3 box-shadow

JamieLottering

Jamie Lottering

2 years ago · 3,096 views
18 comments 
HTML
<div class="papers"></div>

CSS
.papers {
  background-color: #fff;
  height: 350px;
  padding: 20px;
  width: 260px;
  -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, .3), 3px 3px 0 #fff, 4px 4px 0 rgba(0, 0, 0, .2), 6px 6px 0 #fff, 7px 7px 0 rgba(0, 0, 0, .1), 9px 9px 0 #fff, 10px 10px 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, .3), 3px 3px 0 #fff, 4px 4px 0 rgba(0, 0, 0, .2), 6px 6px 0 #fff, 7px 7px 0 rgba(0, 0, 0, .1), 9px 9px 0 #fff, 10px 10px 0 rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .3), 3px 3px 0 #fff, 4px 4px 0 rgba(0, 0, 0, .2), 6px 6px 0 #fff, 7px 7px 0 rgba(0, 0, 0, .1), 9px 9px 0 #fff, 10px 10px 0 rgba(0, 0, 0, .1);
}
Raw

View a demo on jsfiddle Creates a neat little stacked paper effect using only a box-shadow property. Works by setting a dark single pixel shadow followed by a 2 pixel white shadow

Tagged: box-shadow CSS css3 paper
Comments are only visible to Forrst members. Log in or Request an invite.
3 new notifications