CodePen

HTML

            
              .container
  %h1.one -----------------------
  %h1.two
    <span class="z-ten">hotP</span><span class="ww-freebie">i</span>nk
  %h1.three
    <span class="heart beat ww-freebie">l</span>
  %h1.four
    C<span class="o-icon">C</span>DEPEN
  %h1.five -----------------------
            
          
!

CSS

            
              @mixin extrude-text($color: hotPink, $depth: 8, $gradient: 20) {
  $all: ();
  @for $i from 1 through $depth {
    $all: append($all, append($i*-1px $i*-1px 0em, $color - $i*$gradient), comma);
    text-shadow: $all;
  }
} 

@import url(http://fonts.googleapis.com/css?family=Raleway:900);

@font-face {
    font-family: "ww-freebie";
    src: url(https://dl.dropboxusercontent.com/u/102056132/WWFreebie.ttf);
}

$text: #bada55;
$two: hotPink;
$three: #ccc;
$four: black;

.heart { z-index: 40; position: relative; }

.ww-freebie { font-family: ww-freebie; }

.z-ten { z-index: 100; }
      
span { position: relative; margin: 0 auto; z-index: 30; }

span.o-icon {
  font-family: ww-freebie; 
  font-size: 1em;
  margin: 0 .08em;
  z-index: 300;
  position: relative;
}

body {
  font-family: 'Raleway';
  font-weight:400;
  background:black;
  line-height:1.4;
  padding-top: 50px;
}

.container { position: relative; top: -50px; width: 100%;}

h1 {
  color:$text + 10;
  @include extrude-text($text, 100, 3);
  font-weight:900;
  font-size:1em;
  line-height:.75;
  text-align:center;
  position: relative;
  z-index: 5;
  &:hover {
    color: $text + 30;
    @include extrude-text($text+30, 100, 3);
  }
  
  &.one {  }
  
  &.two {
    color: $two;
    @include extrude-text(darken($two, 10), 12, 12);
    z-index: 4;
    &:hover {
      color: lighten($two,10);
      @include extrude-text(lighten($two,0), 12, 12);
    }
  }
  
  &.three {
    font-size: .08em;
    color: lighten(red, 10);
    @include extrude-text(red, 50, 4);
    z-index: 3;
    margin-bottom: 20px;
    &:hover {
      color: lighten(red, 20);
      @include extrude-text(lighten(red, 10), 50, 2);
    }
  }
  
  &.four {
    color: lighten($four,60);
    letter-spacing: 5px;
    @include extrude-text(lighten($four,50), 15, 5);
    z-index: 2;
    &:hover {
      color: lighten($four,70);
      @include extrude-text(lighten($four, 60), 15, 5);
    }
  }
  
  &.five {
    text-align: right;
    z-index: 1;
    line-height: 0.2;
  }
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*global jQuery */
/*!
* FitText.js 1.1
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/

(function( $ ){

  $.fn.fitText = function( kompressor, options ) {

    // Setup options
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY
        }, options);

    return this.each(function(){

      // Store the object
      var $this = $(this);

      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function () {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };

      // Call once to set.
      resizer();

      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.fittext orientationchange.fittext', resizer);

    });

  };

})( jQuery );


$("h1").fitText();

animateHeart();


function animateHeart() {
  $('span.heart.beat').animate({
        fontSize: $('span.heart').css('fontSize') == '120px' ? '50px' : '120px'},500,animateHeart);

}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................