Originally published at: http://www.sitepoint.com/ultimate-long-shadow-sass-mixin/
You know the long shadow design trend, right? Although, I’m not even sure this is a trend anymore, everything moves so fast… Anyway, long shadows used to be and / or still are a trendy design trick to give some emphasis to some text or an element.
There is no easy way to create a long shadow in CSS. At the end of the day, either you use some image-based format (an actual image, SVG…) or you rely on text-shadow
and box-shadow
. The latter options are better because they are nothing but CSS that can be handled very nicely by the browser.
The Problem is: that it is a pain to write. To achieve a clean long shadow effect, you have to build a chain upwards of 50 shadows or so, slightly shifting values one step at a time, possibly the color as well… Completely impractical. This is typically the kind of thing you want to automate with Sass or whatever tool floats your boat.
Indeed, there have been many attempts at making a long shadow mixin. Among the solutions I have seen, I have noticed problems, including:
- no way to define the direction;
- no way to define the number of shadows;
- only works for
text-shadow
; - overly complicated.
Well fasten your seatbelt folks because I have found what I dare to call a clean solution. I have built a ~15 lines long property-agnostic long-shadow function that accepts a direction (as well as a few other arguments).
The API
Because we want our tool to work with both box-shadow
and text-shadow
properties, we will not actually build a mixin like the title of the article says, but actually a function. Then, you’ll be able to use it like this: