Create "long shadows" in pure CSS


The flat-design is still very popular nowadays. Both simple and very minimalist this style has seduced many designers who swear by its splendor. I myself am a very great admirer of this style, however, like any good thing, it is not to be abused;).

This is not the subject, tonight I wanted to share with you a very sympathetic discovery. Dragging on the StackOverflow side, I came across this topic titled "how to make the new long shadow trend with CSS?" (Literarily: how to recreate the new trend of long shadows in CSS?) that made me smile well.
The author of the question wants to reproduce the same effect (see the illustration in the topic) without creating an image, he wants to do it in pure CSS (or HTML5/jQuery or other).
What really surprised me was that he found a more or less functional solution on this page:

Long shadow generator by Juani Ruiz Echazú

Long shadow generator by Juani Ruiz Echazú

Beldy via the long shadow generator
Beldy via the long shadow generator

Well, the CSS generated is very repetitive and poorly optimized and not at all usable on a production site, but it works, that's what I think is most surprising! Well, I know that the CSS3 is full of stunning properties, but I didn't expect such a discovery especially since the long shadow is a pretty tedious effect to recreate on a vector drawing software.

How does this long shadow generator work?

The script overlays classic shadows via the CSS box-shadow and text-shadow properties to achieve this result. Yes, you understand, it only overlaps shadows while shifting 1 pixel on the x axis and y each time, the gradient is simulated by gradually changing the color at every 13 almost overlays (I'm talking about the default settings).
Very stylish, I find the effect successful, it adapts to the cast used and since it is in pure CSS3, the zoom and de-zoom does not affect the precision of the work (good, at one time, the pixel-by-pixel offsets become visible, I grant you).

Laisser un commentaire

Contenu non disponible.
Merci d’accepter les cookies en cliquant sur « Accepter » sur la bannière.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.