Spielerei mit text-shadow

Die Buchstaben werden um sich selbst herumgezirkelt. Im Original gibt es dafür ein SASS-Mixin.

by Jens Grochtdreis

HTML

<h3>OMG</h3>

CSS

h3 {
  text-shadow: rgba(184, 0, 0, 0.04) 48.429px 12.434px 2px, rgba(184, 0, 0, 0.08) 43.815px 24.088px 2px, rgba(184, 0, 0, 0.12) 36.448px 34.227px 2px, rgba(184, 0, 0, 0.16) 26.791px 42.216px 2px, rgba(184, 0, 0, 0.2) 15.451px 47.553px 2px, rgba(184, 0, 0, 0.24) 3.14px 49.901px 2px, rgba(184, 0, 0, 0.28) -9.369px 49.114px 2px, rgba(184, 0, 0, 0.32) -21.289px 45.241px 2px, rgba(184, 0, 0, 0.36) -31.871px 38.526px 2px, rgba(184, 0, 0, 0.4) -40.451px 29.389px 2px, rgba(184, 0, 0, 0.44) -46.489px 18.406px 2px, rgba(184, 0, 0, 0.48) -49.606px 6.267px 2px, rgba(184, 0, 0, 0.52) -49.606px -6.267px 2px, rgba(184, 0, 0, 0.56) -46.489px -18.406px 2px, rgba(184, 0, 0, 0.6) -40.451px -29.389px 2px, rgba(184, 0, 0, 0.64) -31.871px -38.526px 2px, rgba(184, 0, 0, 0.68) -21.289px -45.241px 2px, rgba(184, 0, 0, 0.72) -9.369px -49.114px 2px, rgba(184, 0, 0, 0.76) 3.14px -49.901px 2px, rgba(184, 0, 0, 0.8) 15.451px -47.553px 2px, rgba(184, 0, 0, 0.84) 26.791px -42.216px 2px, rgba(184, 0, 0, 0.88) 36.448px -34.227px 2px, rgba(184, 0, 0, 0.92) 43.815px -24.088px 2px, rgba(184, 0, 0, 0.96) 48.429px -12.434px 2px, #b80000 50px 0.0px 2px;
}

h3 {
    font-size: 3em;
    line-height: 1.25;
    letter-spacing: 2.25em;
    font-family: Verdana, sans-serif;
}

body {padding: 80px;}

JavaScript

// Idee: Mason Wendell  
// http://sassymothereffingtextshadow.com/