<!-- I made this pen to try out and illustrate some of the subtle shadow effects you can create using just text-shadow and transitions.  The pattern effect also uses a small piece of SVG.

Inspired by this animated gif I saw on dribbble (https://dribbble.com/shots/1881907-Love?list=shots&sort=recent&timeframe=now&offset=18).

I’ve included the Sass mixins I use to make the text-shadow effect, but you could also just use compass which has these mixins baked straight in.

The CSS only effects (first 4) work in Chrome/Firefox/Safari/IE10+.

The final pattern effect works perfectly in Chrome, Firefox and IE seems to lose the text-shadow for some reason and it completely flips out in Safari!
-->


<h1>A collection of CSS Text shadow and pattern effects <a href="https://twitter.com/AshNolan_" target="blank">created by @AshNolan_</a></h1>
<h2 class="headingOuter">Push down (shadow effect)</h2>
<div class="headingWrapper color-bright">
  <a href="" class="header header--pushDown header--shadow" title="HOVER ME">HOVER ME</a>
</div>
<div class="headingWrapper">
  <a href="" class="header header--pushDown header--shadow" title="HOVER ME">HOVER ME</a>
</div>

<h2 class="headingOuter">Raise up (shadow effect)</h2>
<div class="headingWrapper color-bright">
  <a href="" class="header header--raiseUp header--shadow">HOVER ME</a>
</div>
<div class="headingWrapper">
  <a href="" class="header header--raiseUp header--shadow">HOVER ME</a>
</div>

<h2 class="headingOuter">Push down (merging into page)</h2>
<div class="headingWrapper color-bright">
  <a href="" class="header header--pushDown">HOVER ME</a>
</div>
<div class="headingWrapper">
  <a href="" class="header header--pushDown">HOVER ME</a>
</div>


<h2 class="headingOuter">Raise up (emerging from page)</h2>
<div class="headingWrapper color-bright">
  <a href="" class="header header--raiseUp">HOVER ME</a>
</div>
<div class="headingWrapper">
  <a href="" class="header header--raiseUp">HOVER ME</a>
</div>

<h2 class="headingOuter">Raised up (emerging from bg) with pattern</h2>
<div class="headingWrapper color-bright">
  <a href="#" class="header header--raiseUp header--svg">
    <svg>
      <defs>
        <linearGradient id="stripedColor" x1="0" x2="0" y1="0%" y2="4%" spreadMethod="repeat">
          <stop offset="0%" stop-color="#e62915"/>
          <stop offset="50%" stop-color="#e62915"/>
          <stop offset="51%" stop-color="#fff"/>
          <stop offset="99%" stop-color="#fff"/>
          <stop offset="100%" stop-color="#e62915"/>
        </linearGradient>
      </defs>
      <text y="1.2em">Hover Me</text>
    </svg>
  </a>
</div>
<div class="headingWrapper">
  <a href="#" class="header header--raiseUp header--svg">
    <svg>
      <defs>
        <linearGradient id="striped" x1="0" x2="0" y1="0%" y2="4%" spreadMethod="repeat">
          <stop offset="0%" stop-color="#e62915"/>
          <stop offset="50%" stop-color="#e62915"/>
          <stop offset="51%" stop-color="#fff"/>
          <stop offset="99%" stop-color="#fff"/>
          <stop offset="100%" stop-color="#e62915"/>
        </linearGradient>
      </defs>
      <text y="1.2em">Hover Me</text>
    </svg>
  </a>
</div>

/*
  The following mixin is taken and edited from this pen - https://codepen.io/hugo/pen/xzjGB
  I have added outlineColor to allow the addition of a text-shadow outline for the text.
 */

@function pow($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  }
  @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function fact($number) {
  $value: 1;
  @if $number > 0 {
    @for $i from 1 through $number {
      $value: $value * $i;
    }
  }
  @return $value;
}

@function pi() {
  @return 3.14159265359;
}

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);
  // If the angle has 'deg' as unit, convert to radians.
  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}


@function sin($angle) {
  $sin: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
  }
  @return $sin;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos;
}

@mixin shade($type, $color: #3498db, $borderColor: #fff, $depth: 20, $angle: 135deg, $long: false, $fade: false) {
    $angle: ($angle - 90);
    $x: 1.1 * cos($angle) + 0px;
    $y: 1.1 * sin($angle) + 0px;
    $darken: (lightness($color)/$depth)/2;
    $opacify: 0;
    $shadow: ();

    @if $long == true{
      $darken:0;
    }

    @if $fade == true {
      $opacify: (opacity($color)/$depth) ;
        // added this for rendering in some browsers, remove if you like.
      @include translateZ(0);
    }

    @for $i from 1 through $depth {
      $shadow: $shadow, $i*$x $i*$y 0 hsla(hue($color) , saturation($color), (lightness($color) - ($i * $darken)), 1 - ($i * $opacify));
    }
    #{$type}-shadow:  1.5px 1.5px 0 $borderColor,
                      0px 1.5px 0 $borderColor,
                      -1.5px -1.5px 0 $borderColor,
                      -1.5px -1.5px 0 $borderColor,
                      -1.5px 1.5px 0 $borderColor,
                       1.5px -1.5px 0 $borderColor,
                       $shadow;
}

//mixin to provide just a basic outline for the text
@mixin outline($color: #fff) {
  text-shadow: 1.5px 1.5px 0 $color,
           -1.5px -1.5px 0 $color,
           -1.5px -1.5px 0 $color,
           -1.5px 1.5px 0 $color,
           1.5px -1.5px 0 $color;
}


// Define the fonts used in the Pen
@import url(https://fonts.googleapis.com/css?family=Francois+One);
@import url(https://fonts.googleapis.com/css?family=PT+Sans);

// Define the colors
$pink   : #f89bb4;
$pinkPastel : #ebaca5;
$pinkDark : #e62915;
$pinkGrayed : #d38076;

$grayLight  : #cac6c5;
$offWhite : #e7e7e7;

* {
  box-sizing: border-box;
}

body {
  font-size: 62.5%;
}

//basic header styles
h1, h2, h3 {
  font-family: 'PT Sans', sans-serif;
  text-transform: uppercase;
}
h1 {
  font-size: 2.4em;
  background-color: rgba(41, 41, 41, 1);
  text-align: center;
  padding: 20px;
  margin: 0;
  color: #fff;
  
  a {
    display: block;
    margin-top: 10px;
    text-transform: none;
    color: #aaa;
    font-size: 16px;
    text-decoration: none;
  }
}
h2 {
  font-size: 1.6em;
  margin: 0;
  padding: 10px;
  border-top: 1px solid #ccc;
}
h3 {
  margin: 0;
  padding: 10px;
}

// Outer heading wrapper (for descriptions, not for the actual effects)
.headingOuter {
  background: #f1f1f1;
  text-align: center;
  margin-top: 30px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;

  &:first-child {
    margin-top: 0;
  }
  h1 + & {
    margin-top: 10px;
  }
}
.headingWrapper {
  text-align: center;
  background-color: #fff;
  padding: 10px;
}

// default header class – used on all examples
.header {
  display: inline-block;
  text-align: center;
  font-family: 'Francois One', Helvetica, Arial, sans-serif;
  font-size: 96px;
  color: $offWhite;
  text-decoration: none;

  @include outline($grayLight);

  transition: all 400ms ease-in-out;
}

// effect for pushing the text down onto the page
// default is the letters emerging from the page and merging back down on hover
.header--pushDown {
  @include shade(text, #aaa, #333, 10, 135deg, true);

  &:hover {
    transform: translate(9px, 9px);
    @include outline($grayLight);
  }
}

// raising text from page when hovered, so flipped state to header--pushDown class
.header--raiseUp {
  &:hover {
    transform: translate(-9px, -9px);
    @include shade(text, #aaa, #333, 10, 135deg, true);
  }
}

// creates a shadow effect, rather than a raised lettering effect
// simply by adjusting the translate position a little
.header--shadow {
  &:hover {
    transform: translate(5px, 0);
  }

  &.header--raiseUp {
    &:hover {
      transform: translate(-5px, 0);
    }
  }
}


//Brighter colored text
.color-bright {
  background-color: $pinkPastel;

  & .header {
    color: $pink;
    @include outline($pinkGrayed);
  }
  
  //push down text
  & .header--pushDown {
    @include shade(text, $pinkDark, #fff, 10, 135deg, true);

    &:hover {
      @include outline($pinkGrayed);
    }
  }

  //raise up text
  & .header--raiseUp:hover {
    @include shade(text, $pinkDark, #fff, 10, 135deg, true);
  }
}

// SVG Pattern text effect
// Same as the above but with a pattern text effect on hover
// Played around with this for a while – cannot be done with background clip and a CSS gradient as the
// text-shadow always appears in front of the background (unless you have no background color on the wrapping element)
// Therefore, use SVG linearGradient and animate the stop points using CSS
svg {
  line-height: 1.2;
  width: 410px;
  height: 1.5em;
}
.header--svg {
  text,
  stop {
    transition: all 350ms ease-in-out;
  }
  text {
    text-transform: uppercase;
    fill: url(#striped);
    @include outline($grayLight);
  }
  &:hover text {
    @include shade(text, #aaa, #333, 10, 135deg, true);
  }

  //animate gradient stop points
  & stop {
    stop-color: $offWhite;
  }
  &:hover stop {
    stop-color: #fff;

    &:nth-child(2),
    &:nth-child(3) {
      stop-color: $pinkGrayed;
    }
  }
}


// Brighter version of the SVG pattern text
.color-bright {
  & .header--svg {
    text {
      fill: url(#stripedColor);
      @include outline($pinkGrayed);
    }
    &:hover text {
      @include shade(text, $pinkDark, #fff, 10, 135deg, true);
    }
  }
  & stop {
    stop-color: $pink;
  }
  & .header--svg:hover stop {
    &:nth-child(2),
    &:nth-child(3) {
      stop-color: #ed5751;
    }
  }
}