You're here: Home » CSS » CSS Stack of Paper Effect

CSS Stack of Paper Effect

On Oct 26, 2011 under CSS

You can make a nice stacked paper effect in CSS by making use of box-shadow property. It looks like a stack of papers, but it’s actually pixel shadows in alternating dark and white colors.

Stack of Paper

CSS

.stackpapers {
  background-color: #f0f0f0;
  height: 250px;
  padding: 20px;
  width: 250px;
  -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);

}

HTML

<div class="stackpapers"></div>

Demo


That’s it. Hope you like it.

Related Posts

  • Cross Browser Box Shadow
  • Comments on this entry (no comments)

    Did you like this post? You can share your opinion with us! Simply click here.

    Leave a Reply

    CommentLuv badge