Multiple text-shadow function in SASS
I wrote this function a few days back, trying to create the famous 'I amsterdam' structure in pure CSS.
Here is what it looks like in CSS btw:
Check out the code on CSSDeck: http://cssdeck.com/labs/full/iamsterdam
This required mutliple text-shadow on the text with color gradually getting dark. The text contains around ~25 text-shadows of varying colors, so obviously vanilla CSS is not the best choice here. SASS FTW!
Here is the function that I created:
// n is number of shadows required
@function multiple-text-shadow ($n, $color) {
$value: '-1px 0 0 #{$color}';
@for $i from 2 through $n {
$value: '#{$value} , #{$i * -1}px 0 0 ' + darken($color, $i);
}
@return unquote($value);
}
You use it simply as:
.my-text {
text-shadow: multiple-text-shadow(20, #F00);
}
I learnt a lot while hacking this, specially about functions, concatenation, unquoting, loops etc in SASS.
Written by Kushagra Gour
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#