Last active
June 2, 2023 17:14
-
-
Save kpsherva/d7b67dd7d043234c3c579206ad177c68 to your computer and use it in GitHub Desktop.
Creates nice flat type shadows on text or icons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .flat-text-shadow-mixin(@color: @brandColor, @shadowLength: 80, @opacity: 19, @direction: 5.5) { | |
| // possible directions, by angles | |
| // 0 - bottom, 1 - bottom right, 1.57 - right, 2 - top right, 3.15 - top, 4 - top left, 4.72 left, 5.5 - left bottom | |
| text-shadow+: 0 0 0 rgb(@color); | |
| each(range(@shadowLength), | |
| { | |
| // fade out the shade on each step, multiplying by coefficient | |
| @_color: darken(@color, @opacity/@shadowLength * (@shadowLength - @value)); | |
| // set the fade coefficient on the coordinates of the shadow | |
| @fade: @value * @shadowLength / 100; | |
| // set the x, y coordinates of the shadow, multiplied by fade out factor | |
| text-shadow+: unit(sin( 0 + @direction) * @fade, px) unit(cos( 0 + @direction) * @fade, px) 0px @_color; | |
| }); | |
| } | |
| .your-class { | |
| .flat-text-shadow-mixin(@quinaryColor); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment