Beemuse Stitches

Some ordinary text

Some ordinary text

Quite a bit more ordinary text... this is, after all, a perfectly normal div. It'll stretch as far as it can. How far is that? No one knows for sure...

Usage

Use like a Bootstrap well. Relatively-positioned .stitch element with z-index of 0. Default settings typically work but special cases (such as combining with 3D Flips) may require adjustments.

No IE7 support (no :before or :after pseudo-elements). Note that this gradient as implemented supports IE10 (IE9 and under will get an even mix of the two colors).

Credit: Red Team Design (tweaked a bit)

HTML

<div class="stitch">
    ...
</div>

SCSS

@import "compass/css3";

/* Stitches */

$stitchColor: #ccc; // 80% light-gray
$stitchGutter: #fff; // white
$stitchBorder: #ddd; // 87% light-gray
$stitchBaseEdge: #9a9a9a; // 60% mid-gray
$stitchTopGradient: #fff; // white
$stitchBottomGradient: #eee; // 93% off-white

@mixin stitch-container($padding, $radius, $color, $shadow) {
    position: relative;
    z-index: 0;
    padding: $padding;
    border: 1px solid $color;
    @include border-radius($radius);
    @include box-shadow(0 1px 0 0 $shadow);
}
@mixin stitch-effect($color, $highlight, $offset, $radius) {
    content: '';
    z-index: -1;
    position: absolute;
    border: 1px dashed $color;
    top: $offset;
    bottom: $offset;
    left: $offset;
    right: $offset;
    @include border-radius($radius);
    @include box-shadow(0 0 0 1px $highlight);
}

.stitch {
    @include stitch-container(19px, 8px, $stitchBorder, $stitchBaseEdge); // padding, border-radius, border-color, box-shadow
    background-color: mix($stitchTopGradient, $stitchBottomGradient);
    @include background-image(linear-gradient($stitchTopGradient, $stitchBottomGradient));
    margin-bottom: 20px;
}
.stitch:before {
    @include stitch-effect($stitchColor, $stitchGutter, 3px, 6px); // stitch color, highlight, offset, border-radius
}

CSS

.stitch {
    position: relative;
    z-index: 0;
    padding: 19px;
    border: 1px solid #dddddd;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 0 0 #9a9a9a;
    -moz-box-shadow: 0 1px 0 0 #9a9a9a;
    box-shadow: 0 1px 0 0 #9a9a9a;
    background-color: #f6f6f6;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(#ffffff, #eeeeee);
    background-image: -moz-linear-gradient(#ffffff, #eeeeee);
    background-image: -o-linear-gradient(#ffffff, #eeeeee);
    background-image: linear-gradient(#ffffff, #eeeeee);
    margin-bottom: 20px;
}

.stitch:before {
    content: '';
    z-index: -1;
    position: absolute;
    border: 1px dashed #cccccc;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 0 1px white;
    -moz-box-shadow: 0 0 0 1px white;
    box-shadow: 0 0 0 1px white;
}

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

Code licensed under the MIT License