The Ultimate Long-shadow Sass Mixin

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:

Continue reading this article on SitePoint

That’s a really neat solution, I like the API, as long as we are sensible with comments it should make sense to other devs who might work on the project. My only gripe is it generates a lot of CSS, but I see no way around that.

I’d be interested to know how well the compiled code compresses with GZIP, if it’s not so good then I guess we should be sensible with our usage.

I’m currently reading through your blog Hugo and there’s some real gems in there, keep them coming :smile:

It’s a great solutions. But c’mon. Long shadows?!

I’m not using Compass. Is it possible to use this function with grunt and npm mathsass?

You don’t need Compass for this. :wink: