A CodePen by bookcasey. 3D Text in Sass - 3D text effect using CSS3 text-shadow made easier to maintain with @for directive in Sass. Inspired by @mdo.

index.markdown

#3D Text in Sass

Inspired by @mdo

style.sass

@import "compass"
=threeDtext($color, $depth, $harshess: 1%)
  $all: ()
  @for $i from 0 through $depth
    $all: append($all, append(0 $i*1px 0, darken($color, $i*$harshess)), comma)
  $all: append($all, 0 $depth*1px $depth*1px rgba(0,0,0,.5))
    
  text-shadow: $all

h1
  +threeDtext(#c9c1c1, 8, 3)

  font-size: 72px

h1, p, a
  color: #FFF5F5
  font-family: Futura, sans-serif
  text-align: center
  text-transform: uppercase
  border: none
  outline: none

html
  height: 100%
  +background(linear-gradient(top, #C9231A, #940A03))