How to make the new long shadow trend with CSS?
Now after ~1 week I see, there isn't a lean & animateable solution at this time.
But when I ignore my most important requirements, there are different possibilities out there.
So I want to create a little overview over all these possibilities I found.
CSS-only
Bulky text-shadow solution
The first solution is my example code I posted. It is extreme bulky, but the result looks really similar to the sample picture. But if I want to animate this code, e.g with transition, it's going to be a extremly big CSS-code.
Conclusion
+ Very similar to the original effect on pictures
+ An only CSS way
+ Possible to generate CSS only animations
- Generate big bunch of CSS code
- Hard to create animations
Tools & Examples
One of the best tools to generate an only CSS way is the Long Shadow Generator by Juani Ruiz Echazú.
Bulky text-shadow solution with rgba
In Michael Mendelsohn's answer he suggest to use rgba to add opacity to generate a pretty fade-out effect. It can get a smaller bunch of CSS which maybe also be easier to animate. But it doesn't generate this similar effect like on the graphics.
Conclusion
+ An only CSS way
+ Possible to generate CSS only animations
+ Could be a slimmer CSS code than without rgba
+ Could be easier to generate animations
- Not similar to the original effect
- For a longer shadow, it will be again a lot of CSS
Tools & Examples
Just read the answer by Michael Mendelsohn. Didn't found any example / tool in the internet and hadn't time to create one, because it isn't an acceptable solution for my case.
Bulky text-shadow solution with SCSS
To reduce the LoC (Lines of Code) for the first solution, Front End Guy suggest to use SCSS. The code will be slimmer but looks akward and is harder to understand. But also this slimmer code is and will remain very big.
Conclusion
+ Very similar to the original effect
+ An only CSS way
+ Possible to generate CSS only animation
+ Slimmer CSS than without SCSS...
- ... but it will be remain a bulky CSS
- Not everybody is familiar with SCSS so the code is going to be incomprehensible
- Hard to create animations
Tools & Examples
There is a Codepen Example which shows you, how to create a long-shadow effect with SCSS on different objects (Icons, Fonts, etc.)
JavaScript-only
Generate the CSS with JavaScript only
user1724911's answer describes a way to generate the CSS with JavaScript. In the background, it makes again this big bunch of code, but the JavaScript code is a lot slimmer than the "hardcoded" CSS. Animations are also possible in the same way (take a look at user1724911's answer).
Conclusion
+ Very similar to the original effect
+ To develop code is a lot slimmer
+ Animations are easy and lean to create
- In the background, there is this big bulky CSS code
- performance
Tools & Examples
Look at the answer by user1724911 to see also the code for the animation. I created a little example. Just with 1 HTML-Tag and little Lines of JavaScript. Codepen Example
jQuery Plug-In
I found also a small jQuery Plugin for Long-Shadow. It is extremly easy-to-use, but generates (in my opinion) an ugly shadow effect.
Conclusion
+ Extreme easy-to-use
- Very ugly effect
Tools & Example
I found this Plugin here.
Graphic & JavaScript
Issue for geeks
There is a site which have a really really stunning and wonderful Long-Shadow effect. The Site called We Are Impero. So I asked the Impero team, how they generate this wonderful effect. If the used a library or something. This was their answer:
It’s all custom designed and built. No framework to work on, it was a very difficult mission!
So it is self-made with graphics and JavaScript.
Conclusion
+ Most wonderful long-shadow effect i've ever seen
- Self made. And it was a hard work.
- Graphic, CSS & JavaScript are required
Tools & Examples
Just enjoy We are Impero's website.
Graphic-only
Photoshop work
So there is also the way to create this effect as an image. It is the easiest way, and it is the "original". But sadly not animatable... Or maybe, when I hover the picture, I create a gif with the animation and will show it? Not really :-)
Conclusion
+ The "original" effect
+ most adaptable
- Not animatable
Tools & Examples
In the web, there are hunderts of Long-Shadow examples. Just google it. Awwwards made a cool article about how to create this long-shadow effect in Photoshop.
So thank you all for your answers, ideas, inspirations and arguments. I'll give them, who I linked in my answer an upvote, because without you, I would just have 1 solution.
Maybe in the future, there it will be possible to create such things easier.
Cheers dTDesign
Check out this tutorial on how to do that with Sass: http://css-tricks.com/metafizzy-effect-with-sass/
and take a look at this CodePen with the full result: http://codepen.io/hugo/pen/nwivF
Your example above is pretty much the only way to do it with pure CSS, and while it does look pretty crazy - it will let you adjust those text-shadows using transitions and such.