Stacked Paper

Using :before and :after with CSS3 transforms to create a stacked paper effect.

by mlms13

HTML

<div id="container">
    <div class="letter">
        <p>Dear Friends:</p>

        <p>The Monsour Executive Wellness Center uses the expertise of our medical providers coupled with the latest in advanced technology to provide you with the most efficient experience during your wellness screening. Combining great clinical care and your personal health care concierge service, your experience will be seamless and efficient and provide you with the tools and knowledge to give you the best preventative care possible.</p>

        <p>We are pleased to offer these services to executives and others, and invite you to take advantage of this unique clinical program.</p>
    </div>
</div>

CSS

body {
    font: 14px sans-serif;
    margin: 0;
    padding: 0;
}
#container {
    background: #fff;
    background-image: -webkit-linear-gradient(rgba(0,0,0,0.08), transparent);
    overflow: hidden;
    position: relative;
    width: 700px;
    z-index: -2;
}
.letter {
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    margin: 26px auto 0;
    min-height: 300px;
    padding: 24px;
    position: relative;
    width: 80%;
}
.letter:before, .letter:after {
    content: "";
    height: 90%;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.letter:before {
    background: #fafafa;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    left: -5px;
    top: 4px;
    -webkit-transform: rotate(-2.5deg);
}
.letter:after {
    background: #f6f6f6;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    right: -3px;
    top: 1px;
    -webkit-transform: rotate(1.4deg);
}