Nepelius - Web Manufacturing - since 1995

Sticknaht Effekt mit CSS3

  vom 16. Mai 2012

 Eine Sticknaht um eine Box erzeugen, das ist mit CSS3 kein Problem. Die auf meinen Seiten verwendete Version der Sticknaht verwendet auch Schatten, transparente Innenfläche und ansprechende Innenabstände. All dies läßt sich natürlich nach eigenem Geschmack anpassen und verändern.

CSS Styles

.stitched{
    position: relative;
    padding: 20px;
}

.stitched:before{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed rgb(173,112,41);
    background-color: rgba(255, 255, 255, 0.25);
    background-position:470px 50px;
    background-repeat: no-repeat;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 0 -1px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 0 -1px rgba(0,0,0,0.5);
    box-shadow: 0 0 0 1px #fff;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

Und so sieht es aus:

Testkasten mit Sticknaht Effekt!