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#

 
 
 
 
