Skip to content

Instantly share code, notes, and snippets.

@thegallagher
Created April 11, 2016 11:56
Show Gist options
  • Save thegallagher/fae808bf0e87d1f6486af3b5a3fff727 to your computer and use it in GitHub Desktop.
Save thegallagher/fae808bf0e87d1f6486af3b5a3fff727 to your computer and use it in GitHub Desktop.
Improved CSS text stroke using SASS and trigonometry.
// Trigonometry functions from https://unindented.org/articles/trigonometry-in-sass/
@mixin stroke($width, $color, $step-multiplier: 8) {
$unit: unit($width);
$unitless: $width / ($width * 0 + 1);
$steps: $unitless * $step-multiplier;
$shadow: ''; // need a starter
@for $i from 0 to $steps {
$x: $width * cos(2 * pi() * $i / $steps);
$y: $width * sin(2 * pi() * $i / $steps);
@if $unit == 'px' {
$x: round($x);
$y: round($y);
}
$shadow: $shadow, $x $y 0 $color;
}
$shadow: str_slice('#{$shadow}', 2);
text-shadow: #{$shadow};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment