CSS3 Flat 3D Text — Created with CodePen: codepen.io/pen/ljvzi

index.html

<h1>@thejameskyle</h1>

style.scss

@import "compass";
$bg-color: white;
$color: black;

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} { @content }
  @-moz-keyframes #{$name} { @content }
  @-ms-keyframes #{$name} { @content }
  @keyframes #{$name} { @content } 
}

@mixin animation($args...) {
  -webkit-animation: $args;
  -moz-animation: $args;
  -ms-animation: $args;
  animation: $args;
}

html { font-size: (15 / 16) * 100% }

body {
  font: 400 1em/1.6 "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: $bg-color;
}

h1 {
  margin: 0;
  
  text-align: center;
  
  font-size: 6em;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  
  color: $bg-color;
  text-shadow:
    0  1px  0   rgba($color, .17),
    0  2px  1px rgba($color, .17),
    0  3px  2px rgba($color, .16),
    0  4px  3px rgba($color, .16),
    0  5px  4px rgba($color, .15),
    0  6px  5px rgba($color, .15),
    0  7px  6px rgba($color, .14),
    0  8px  7px rgba($color, .13),
    0  9px  8px rgba($color, .12),
    0 10px  9px rgba($color, .11),
    0 11px 10px rgba($color, .10),
    0 12px 11px rgba($color, .09),
    0 13px 12px rgba($color, .08),
    0 14px 13px rgba($color, .07),
    0 15px 14px rgba($color, .06),
    0 16px 15px rgba($color, .05),
    0 17px 16px rgba($color, .04),
    0 18px 17px rgba($color, .04),
    0 19px 18px rgba($color, .03),
    0 20px 20px rgba($color, .03),
    0 21px 22px rgba($color, .02),
    0 22px 24px rgba($color, .02),
    0 23px 26px rgba($color, .01),
    0 24px 28px rgba($color, .01),
    0 25px 30px rgba($color, .01);

  @include transition(font-size .1s linear);
  @include animation(push 2s 1 ease-out);
}

@media (min-width:  200px) { h1 { font-size:  1em } }
@media (min-width:  400px) { h1 { font-size:  2em } }
@media (min-width:  600px) { h1 { font-size:  4em } }
@media (min-width:  800px) { h1 { font-size:  6em } }
@media (min-width: 1000px) { h1 { font-size:  7em } }
@media (min-width: 1200px) { h1 { font-size:  8em } }
@media (min-width: 1400px) { h1 { font-size:  9em } }
@media (min-width: 1600px) { h1 { font-size: 10em } }
@media (min-width: 1800px) { h1 { font-size: 11em } }
@media (min-width: 2000px) { h1 { font-size: 12em } }
@media (min-width: 2200px) { h1 { font-size: 13em } }

@include keyframes(push) {
  0% { text-shadow: none }
}