Skip to content

Instantly share code, notes, and snippets.

@abevoelker
Created June 9, 2011 04:37
Show Gist options
  • Save abevoelker/1016071 to your computer and use it in GitHub Desktop.
Save abevoelker/1016071 to your computer and use it in GitHub Desktop.
Sass colored 3D text (CSS)
// Sassified color version created by Abe Voelker.
// Based on the original white version by Mark Otto:
// http://markdotto.com/playground/3d-text/
@mixin color-3D-text($color) {
text-shadow: 0 1px 0 $color / 1.25,
0 2px 0 $color / 1.268656716,
0 3px 0 $color / 1.363636364,
0 4px 0 $color / 1.378378378,
0 5px 0 $color / 1.5,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
//Example usage:
h1 {
$header-color: #FFFFFF;
color: $header-color;
font: bold 100px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;
@include color-3D-text($header-color);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment