A Pen by Riley Shaw.

index.slim

h1 i'm a lima bean

Sass-shadowfy-mixin.markdown

Sass 'shadowfy' mixin

Adds the classic 3d text-shadow effect using Sass

Updated: Now takes an angle argument!

A Pen by Riley Shaw on CodePen.

License.

style.sass

@import "compass"
$size: 120px
$color: red
$depth: 10

=shadowfy($num, $cbase, $angle: 135deg)
  
  $x-inc: cos($angle)
  $y-inc: sin($angle)
  
  @if abs($x-inc) > abs($y-inc)
    $y-inc: $y-inc / abs($x-inc)
    $x-inc: $x-inc / abs($x-inc)
  @else
    $x-inc: $x-inc / abs($y-inc)
    $y-inc: $y-inc / abs($y-inc)
  
  $x: 0
  $y: 0
  $shadow: 0px 0px #{$cbase}
  
  @for $i from 1 through $num
    $x: $x + $x-inc
    $y: $y - $y-inc
    $shadow: append($shadow, #{$x}px #{$y}px scale-lightness($cbase, -66%), comma)
  text-shadow: $shadow
  line-height: $size + $num / 2
  margin-top: -$size/2
    
html
  background: #222
  
h1
  position: absolute
  top: 50%
  width: 100%
  font: bold $size sans-serif
  text-align: center
  text-transform: uppercase
  color: $color
  +shadowfy($depth, $color)