Skip to content

Instantly share code, notes, and snippets.

@nathankot

nathankot/three-dee-text.stylus

Created May 19, 2013 00:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nathankot/5606205 to your computer and use it in GitHub Desktop.
Save nathankot/5606205 to your computer and use it in GitHub Desktop.
Download ZIP
Powerful Stylus mixin to create 3D text
Raw
three-dee-text.stylus
three-dee-text($color = baseColor, $size = 7, $strength = 5%, $shadowing = .3)
$size = unit($size, '')
$text-shadow = '0 0 0 ' + rgba($color)
color $color
for n in 1..$size
$color = darken($color, $strength)
push($text-shadow, 0 unit(n, 'px') 0 $color)
push($text-shadow, 0 unit(n+1, 'px') unit(n - 1, 'px') rgba(0,0,0,$shadowing))
push($text-shadow, 0 unit(n+1, 'px') 1px rgba(0,0,0,.5))
text-shadow unquote(join(', ', $text-shadow))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment