Forked from Matt Schneider III's Pen SASS Text Style Practice.
A Pen by Captain Anonymous on CodePen.
span class="outlined" OUTLINED | |
br | |
span class="engraved" ENGRAVED | |
br | |
span class="embossed" EMBOSSED | |
br | |
span class="rainbows" RAINBOWS | |
br | |
span class="stickers" STICKERS | |
br | |
span class="thickness" THICKNESS |
Forked from Matt Schneider III's Pen SASS Text Style Practice.
A Pen by Captain Anonymous on CodePen.
$back-color: darkslategrey | |
$font-color: #8AA | |
$font-stack: raleway | |
@function surround-shadow ($width, $fade, $color) | |
$value: '' | |
@for $i from 0 through $width | |
@for $j from 0 through $width | |
$value: $value + '#{$i}px #{$j}px #{$fade}px #{$color}, ' | |
$value: $value + '-#{$i}px #{$j}px #{$fade}px #{$color}, ' | |
$value: $value + '-#{$i}px -#{$j}px #{$fade}px #{$color}, ' | |
$value: $value + '#{$i}px -#{$j}px #{$fade}px #{$color}, ' | |
$value: $value + '0px 0px 0px hsla(0,0%,0%,0)' | |
@return unquote($value) | |
@function engrave-shadow ($bevel, $depth) | |
$value: '' | |
@for $i from 0 through $bevel | |
$value: $value + '-#{$i/2}px #{$i/2}px hsla(0,0%,100%,#{$depth/3}), ' | |
$value: $value + '#{$i/2}px -#{$i/2}px hsla(0,0%,0%,#{$depth*2}), ' | |
$value: $value + '0px 0px #{$bevel*10}px hsla(0,0%,100%,0.1)' | |
@return unquote($value) | |
@function emboss-shadow ($bevel, $depth) | |
$value: '' | |
@for $i from 0 through $bevel | |
$value: $value + '-#{$i/2}px #{$i/2}px hsla(0,0%,0%,#{$depth}), ' | |
$value: $value + '#{$i/2}px -#{$i/2}px hsla(0,0%,100%,#{$depth}), ' | |
$value: $value + '0px 0px #{$bevel*1.5}px hsla(0,0%,0%,1)' | |
@return unquote($value) | |
@function rainbow-shadow ($cycle, $depth, $sat, $bri) | |
$value: '' | |
@for $i from 1 through $cycle | |
$value: $value + '-#{$depth * $i}px #{$depth * $i}px 0 hsla(#{$i * (360/$cycle)}, #{$sat}, #{$bri}, 1), ' | |
$value: $value + '0px 0px 0px hsla(0,0%,0%,0)' | |
@return unquote($value) | |
@function thicken-shadow ($depth, $color) | |
$value: '' | |
@for $i from 1 through $depth | |
$shadedcolor: darken($color, 20 + ($i*5)) | |
$value: $value + '0px #{$i}px 0 #{$shadedcolor}, ' | |
$value: $value + '0px 0px 0px hsla(0,0%,0%,0)' | |
@return unquote($value) | |
body | |
background-color: $back-color | |
font: 45px $font-stack | |
color: $font-color | |
letter-spacing: 10px | |
text-align: center | |
.outlined | |
color: $back-color | |
text-shadow: surround-shadow(2, 0.1, black) | |
.engraved | |
color: darken($back-color, 2) | |
text-shadow: engrave-shadow(4, 0.1) | |
.embossed | |
color: lighten($back-color, 1) | |
text-shadow: emboss-shadow(3, 0.2) | |
.rainbows | |
color: white | |
text-shadow: rainbow-shadow(50, 0.2, 60%, 45%) | |
.stickers | |
color: indigo | |
text-shadow: surround-shadow(2, 0, #FFD), -4px 2px 2px black | |
.thickness | |
color: #8AA | |
text-shadow: thicken-shadow(3, #8AA), -4px 4px 6px black | |