Stiched Look

Dieser Effekt lässt eine Box entstehen, die aussieht als wäre sie per Hand abgenäht worden.

Beispiel

CSS

.stitched {
   padding: 11px;
   margin: 5px;
   text-align: center;
   background: #272822;
   color: #fff;
   font-size: 20px;
   border: 2px dashed #fff;
   border-radius: 5px;
   box-shadow: 0 0 0 5px #272822, 2px 2px 5px 5px #272822;
   -webkit-box-shadow: 0 0 0 5px #272822, 2px 2px 5px 5px #272822;
   -moz-box-shadow: 0 0 0 5px #272822, 2px 2px 5px 5px #272822;
}
            

Erklärung

An sich ist der Effekt recht selbsterklärend. Er wird eigenlich durch die Verwendung des Zusatzes dashed für die CSS Anweisung border ausgelöst. Damit das Element auch wie abgenäht aussieht wird es mit "box-shadow" noch künstlich verbreitert.

box-shadow kann gleich mehrere Anweisungen für Schatten gleichzeitig erhalten. Unser erster Schatten (0 0 0 5px #272822) hat 0 Versatz auf der X-Achse, 0 Versatz auf der Y-Achse, einen Übergang von 0 und ist 5px breit. Also ein 5px breiter Streifen in Hintergrundfarbe.

Der zweite Schatten (2px 2px 5px 5px #272822) ist sowohl leicht versetzt, als auch mit einem weichen Übergang versehen, das lässt ihn dann auch entgegen unserem ersten Schatten tatsächlich wie einer aussehen.