oliverbj oliverbj - 3 months ago 13
CSS Question

How to create overlaying papers (pile) - CSS / HTML

Is their anyone who can help me create this effect:

http://i42.tinypic.com/avr0p1.png

As you see in the bottom of the content, it looks like there are 3 papers "lying on each other"

How can this be obtained?

Answer

Overlayed Papers Demo with pure css/html

Code used:

<style>

  #paper{
    position:relative;
    margin:0 auto;
    background:#fff;
    border:2px solid #ccc;
    width:380px;
    height:470px;
  }
  #paper_foo1, #paper_foo2{
    position:absolute;
    background:#fff;
    bottom:-8px;
    height:4px;
    width:370px;
    margin-left:3px;
    border-bottom:2px solid #ccc;
    border-left:2px solid #ccc;
    border-right:2px solid #ccc;
  }
  #paper_foo2{
    width:360px;
  }     
</style>


  <div id="paper">

    <div id="paper_foo1"><div id="paper_foo2"></div></div>
  </div>
Comments