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; }
Code licensed under the MIT License