Beemuse Paper

Plain paper

Lifted corners

Raised box

Curled corners

Curled left corner

Curled right corner

Horizontal curves

Horizontal curve above

Horizontal curve below

Vertical curves

Vertical curve left

Vertical curve right

Usage

Use like a Bootstrap well. Relatively-positioned .paper element.

Bootstrap 3 (wip branch): note iOS z-index stacking context issues and what to do.

No IE7 support (no :before or :after pseudo-elements). No IE8 support either (no RGBA support).

Credit: Nicolas Gallagher (tweaked a bit)

HTML

<!-- Classic -->
<div class="paper">
    ...
</div>
<div class="paper paper-lift">
    ...
</div>
<div class="paper paper-raise">
    ...
</div>
<!-- Curled -->
<div class="paper paper-curl">
    ...
</div>
<div class="paper paper-curl-left">
    ...
</div>
<div class="paper paper-curl-right">
    ...
</div>

 

<!-- Horizontal curves -->
<div class="paper paper-curve-horiz">
    ...
</div>
<div class="paper paper-curve-above">
    ...
</div>
<div class="paper paper-curve-below">
    ...
</div>
<!-- Vertical curves -->
<div class="paper paper-curve-vert">
    ...
</div>
<div class="paper paper-curve-left">
    ...
</div>
<div class="paper paper-curve-right">
    ...
</div>

SCSS

@import "compass/css3";

/* Paper */

$paperBackground: #fafafa;
$paperInset: rgba(128, 128, 128, 0.1);

// Paper

.paper {
    position: relative;
    padding: 19px;
    margin-bottom: 20px;
    background: $paperBackground;
    border: 1px solid $paperBackground;
    @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px $paperInset inset);
    &:before,
    &:after {
        content: "";
        position: absolute;
        z-index: -2;
    }
}

// Lift corners

.paper-lift {
    &:before,
    &:after {
        bottom: 15px;
        width: 50%;
        height: 20%;
        max-width: 300px;
        max-height: 100px;
        @include box-shadow(0 15px 10px rgba(31, 31, 31, 0.7));
    }
    &:before {
        left: 10px;
        @include rotate(-3deg);
    }
    &:after {
        right: 10px;
        @include rotate(3deg);
    }
}

// Curl corners

.paper-curl {
    @include border-radius(0 0 120px 120px, 0 0 6px 6px);
    &:before,
    &:after {
        bottom: 12px;
        width: 50%;
        height: 55%;
        max-width: 200px;
        max-height: 100px;
        @include box-shadow(0 8px 12px rgba(31, 31, 31, 0.5));
    }
    &:before {
        left: 10px;
        @include transform(skew(-8deg) rotate(-3deg));
    }
    &:after {
        right: 10px;
        @include transform(skew(8deg) rotate(3deg));
    }
}
.paper-curl-left {
    @include border-radius(0 0 0 120px, 0 0 0 6px);
}
.paper-curl-right {
    @include border-radius(0 0 120px 0, 0 0 6px 0);
}
.paper-curl-left,
.paper-curl-right {
    &:before {
        @extend .paper-curl:before;
    }
    &:after {
        @extend .paper-curl:after;
    }
}

// Raise

.paper-raise:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    @include box-shadow(0 15px 10px -10px rgba(31, 31, 31, 0.5), 0 1px 4px rgba(31, 31, 31, 0.3));
}

// Curves

.paper-curve:before {
    @include box-shadow(0 0 15px rgba(0,0,0,0.6));
}
.paper-curve-left,
.paper-curve-right {
    &:before {
        @extend .paper-curve:before;
        top: 10px;
        bottom: 10px;
        @include border-radius(10px, 100px);
    }
}
.paper-curve-left {
    &:before {
        left: 0;
        right: 50%;
    }
}
.paper-curve-right {
    &:before {
        left: 50%;
        right: 0;
    }
}
.paper-curve-vert {
    &:before {
        @extend .paper-curve-left:before;
        right: 0;
    }
}
.paper-curve-above,
.paper-curve-below {
    &:before {
        @extend .paper-curve:before;
        left: 10px;
        right: 10px;
        @include border-radius(100px, 10px);
    }
}
.paper-curve-above {
    &:before {
        top: 0;
        bottom: 50%;
    }
}
.paper-curve-below {
    &:before {
        top: 50%;
        bottom: 0;
    }
}
.paper-curve-horiz {
    &:before {
        @extend .paper-curve-below:before;
        top: 0;
    }
}

CSS

.paper {
    position: relative;
    padding: 19px;
    margin-bottom: 20px;
    background: #fafafa;
    border: 1px solid #fafafa;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(128, 128, 128, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(128, 128, 128, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(128, 128, 128, 0.1) inset;
}
.paper:before, .paper:after {
    content: "";
    position: absolute;
    z-index: -2;
}

.paper-lift:before, .paper-lift:after {
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 300px;
    max-height: 100px;
    -webkit-box-shadow: 0 15px 10px rgba(31, 31, 31, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(31, 31, 31, 0.7);
    box-shadow: 0 15px 10px rgba(31, 31, 31, 0.7);
}
.paper-lift:before {
    left: 10px;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.paper-lift:after {
    right: 10px;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
}

.paper-curl {
    -webkit-border-radius: 0 0;
    -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
    border-radius: 0 0 120px 120px / 0 0 6px 6px;
}
.paper-curl:before, .paper-curl-left:before,
.paper-curl-right:before, .paper-curl:after, .paper-curl-left:after,
.paper-curl-right:after {
    bottom: 12px;
    width: 50%;
    height: 55%;
    max-width: 200px;
    max-height: 100px;
    -webkit-box-shadow: 0 8px 12px rgba(31, 31, 31, 0.5);
    -moz-box-shadow: 0 8px 12px rgba(31, 31, 31, 0.5);
    box-shadow: 0 8px 12px rgba(31, 31, 31, 0.5);
}
.paper-curl:before, .paper-curl-left:before,
.paper-curl-right:before {
    left: 10px;
    -webkit-transform: skew(-8deg) rotate(-3deg);
    -moz-transform: skew(-8deg) rotate(-3deg);
    -ms-transform: skew(-8deg) rotate(-3deg);
    -o-transform: skew(-8deg) rotate(-3deg);
    transform: skew(-8deg) rotate(-3deg);
}
.paper-curl:after, .paper-curl-left:after,
.paper-curl-right:after {
    right: 10px;
    -webkit-transform: skew(8deg) rotate(3deg);
    -moz-transform: skew(8deg) rotate(3deg);
    -ms-transform: skew(8deg) rotate(3deg);
    -o-transform: skew(8deg) rotate(3deg);
    transform: skew(8deg) rotate(3deg);
}

.paper-curl-left {
    -webkit-border-radius: 0 0;
    -moz-border-radius: 0 0 0 120px / 0 0 0 6px;
    border-radius: 0 0 0 120px / 0 0 0 6px;
}

.paper-curl-right {
    -webkit-border-radius: 0 0;
    -moz-border-radius: 0 0 120px 0 / 0 0 6px 0;
    border-radius: 0 0 120px 0 / 0 0 6px 0;
}

.paper-raise:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5), 0 1px 4px rgba(31, 31, 31, 0.3);
    -moz-box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5), 0 1px 4px rgba(31, 31, 31, 0.3);
    box-shadow: 0 15px 10px -10px rgba(31, 31, 31, 0.5), 0 1px 4px rgba(31, 31, 31, 0.3);
}

.paper-curve:before, .paper-curve-left:before, .paper-curve-vert:before,
.paper-curve-right:before, .paper-curve-above:before,
.paper-curve-below:before,
.paper-curve-horiz:before {
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

.paper-curve-left:before, .paper-curve-vert:before,
.paper-curve-right:before {
    top: 10px;
    bottom: 10px;
    -webkit-border-radius: 10px 100px;
    -moz-border-radius: 10px / 100px;
    border-radius: 10px / 100px;
}

.paper-curve-left:before, .paper-curve-vert:before {
    left: 0;
    right: 50%;
}

.paper-curve-right:before {
    left: 50%;
    right: 0;
}

.paper-curve-vert:before {
    right: 0;
}

.paper-curve-above:before,
.paper-curve-below:before,
.paper-curve-horiz:before {
    left: 10px;
    right: 10px;
    -webkit-border-radius: 100px 10px;
    -moz-border-radius: 100px / 10px;
    border-radius: 100px / 10px;
}

.paper-curve-above:before {
    top: 0;
    bottom: 50%;
}

.paper-curve-below:before, .paper-curve-horiz:before {
    top: 50%;
    bottom: 0;
}

.paper-curve-horiz:before {
    top: 0;
}

Designed and built with all the buzz in the world @itmustbe

Code licensed under the MIT License