Stack of Paper

Simple, clean effect that works everywhere.
CSS • HTML

HTML

<div class="papers"></div>

CSS

div.papers {
  background-color: #FFFFFF;
  border: 1px solid #e4e4e4;
  height: 350px;
  padding: 20px;
  width: 260px;
  -webkit-box-shadow: 
        1px 1px   0 rgba(0,   0,   0,   0.100), 
        3px 3px   0 rgba(255, 255, 255, 1.0), 
        4px 4px   0 rgba(0,   0,   0,   0.125), 
        6px 6px   0 rgba(255, 255, 255, 1.0),  
        7px 7px   0 rgba(0,   0,   0,   0.150), 
        9px 9px   0 rgba(255, 255, 255, 1.0),  
        10px 10px 0 rgba(0,   0,   0,   0.175);
  -moz-box-shadow: 
        1px 1px   0 rgba(0,   0,   0,   0.100), 
        3px 3px   0 rgba(255, 255, 255, 1.0), 
        4px 4px   0 rgba(0,   0,   0,   0.125), 
        6px 6px   0 rgba(255, 255, 255, 1.0),  
        7px 7px   0 rgba(0,   0,   0,   0.150), 
        9px 9px   0 rgba(255, 255, 255, 1.0),  
        10px 10px 0 rgba(0,   0,   0,   0.175);
  box-shadow: 
        1px 1px   0 rgba(0,   0,   0,   0.100), 
        3px 3px   0 rgba(255, 255, 255, 1.0), 
        4px 4px   0 rgba(0,   0,   0,   0.125), 
        6px 6px   0 rgba(255, 255, 255, 1.0),  
        7px 7px   0 rgba(0,   0,   0,   0.150), 
        9px 9px   0 rgba(255, 255, 255, 1.0),  
        10px 10px 0 rgba(0,   0,   0,   0.175);
}

Written by https://css-tricks.com/snippets/css/stack-of-paper/

Posted by fbrefere001 on Wednesday July 1, 2015