400 Text Shadows for 400 Followers

400 Text Shadows for 400 Followers.markdown

400 Text Shadows for 400 Followers

I have 400 CodePen followers so here are 400 text-shadows. Thanks, all!

Careful with font size because OMG retina blows up with 400 shadows.

as of 07/06/2015

A Pen by Jake Albaugh on CodePen.

License.

style.scss

$shadows: ();
$shadows-trans: ();
$shadows-empty: ();
$font-size: 120px;
$step: $font-size / 200;
$count: 400; // 1 shadow per count

// initial base shadow for white on light contrast
$base-shadow: 1px 1px 4px rgba(0,0,0,0.1);
$shadows: append($shadows,$base-shadow,comma);
$shadows-trans: append($shadows-trans,$base-shadow,comma);

// adding each shadow
@for $i from 1 through $count - 1 { 
  // one less because we need to account for the first...
  // ...and because telling the truth is important. only 400, no more no less.
  
  // decimal ratio for HSL calculations  
  $ratio: $i / $count;
  // relative color, lighter and colder towards center
  $color: hsla($ratio*360,100-$ratio*100, 100-$ratio*100, 0.2);
  // transparent version of same color to avoid color animation on fadeout
  $color-trans: transparentize($color,1);
  // positive shadow increment
  $inc-pos: $i*$step;
  // negative shadow increment
  $inc-neg: $i*-$step;
  // undefined variables outside for loop
  $shadow: null;
  $shadow-trans: null;
  // shadow fade amount
  $fade: 80px;
  // four different directions for shadows. 
  // switching direction for each case
  @if $i % 4 == 0 {
    // down
    $shadow: 0px $inc-pos $fade $color;
    $shadow-trans: 0px $inc-pos 0px $color-trans;
  } @elseif $i % 4 == 1 {
    // right
    $shadow: $inc-pos 0px $fade $color;
    $shadow-trans: $inc-pos 0px 0px $color-trans;
  } @elseif $i % 4 == 2 {
    // left
    $shadow: $inc-neg 0px $fade $color;
    $shadow-trans: $inc-neg 0px 0px $color-trans;
  } @else {
    // bottom
    $shadow: 0px $inc-neg $fade $color;
    $shadow-trans: 0px $inc-neg 0px $color-trans;
  }
  // adding all the shadows to the different lists
  $shadows: append($shadows,$shadow,comma);
  $shadows-trans: append($shadows-trans,$shadow-trans,comma);
}

body {
  background: black;
}

@import url(http://fonts.googleapis.com/css?family=Oswald:400);
body::after {
  content: "400!";
  font-family: Oswald, Helvetica, sans-serif;
  font-weight: 400;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
  text-align: center;
  font-size: $font-size;
  color: white;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  text-shadow: $shadows;
  
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: slant, shadows, letter-spacing;
}

// shadow magic
@keyframes shadows {
  // no shadow
  0%, 5%, 70%, 100% { text-shadow: $shadows-trans; }
  // yes shadow  
  37.5% { text-shadow: $shadows; }
}

// skewing
@keyframes slant {
  // no slant
  0%, 5%, 70%, 100% {
    transform: skewX(0deg) skewY(0deg) translate(-50%, -50%);
  }
  // subtle nudge when slanting
  8% {
    transform: skewX(0deg) skewY(-14deg) translate(-50%, -50%);
  }
  // true slant
  10%, 65% {
    transform: skewX(0deg) skewY(-10deg) translate(-50%, -50%);
  }
  // subtle nudge returning to 0
  68% {
    transform: skewX(0deg) skewY(4deg) translate(-50%, -50%);
  }
}

// subtle growth when shadow is at peak
@keyframes letter-spacing {
  0%, 10%, 65%, 100% { letter-spacing: 0; }
  37.5% { letter-spacing: 0.025em; }
}