opi6sg
Last Updated: February 25, 2016
·
473
· forivall
Img  uv6opa

CSS/Stylus Text Borders

Somehow I couldn't google for this, so I just wrote it. Uses stylus, teh best CSS preprocessor.

text-border(quality, width, blur-radius, border-color)
  steps = quality*2
  shadows = ''
  for d in 0..steps*2
    shadows += '%s %s %s %s %s' % (unquote(d?',':'') round(sin(PI * d/steps)*width, 6) round(cos(PI * d/steps)*width, 6) blur-radius border-color)
  unquote(shadows)

Use the quality variable to increase the number of shadows used. (# of shadows = quality * 4). Finally, a purpose for high school trig!

If there's a more stylus-onic way to do this, let me know!

Preview: http://cdpn.io/ltEpB

Say Thanks
Respond