Créez des ombres « long shadows » en pur CSS

on

Le flat-design est encore très populaire de nos jours. À la fois simple et très minimaliste ce style a séduit de nombreux designers qui ne jurent que par sa splendeur. Moi-même je suis un très grand admirateur de ce style, cependant, comme toute bonne chose, il ne faut pas en abuser ;) .

Là n’est pas le sujet, ce soir je voulais partager avec vous une découverte fort sympathique. En traînant du côté de StackOverflow, je suis tombé sur ce sujet intitulé « How to make the new long shadow trend with CSS? » (Littérairement: Comment recréer la nouvelle tendance des ombres longues en CSS?) qui m’a bien fait sourire.
L’auteur de la question souhaite reproduire le même effet (cf l’illustration dans le topic) sans pour autant créer une image, il veut le faire en pur CSS (Ou HTML5/jQuery ou autre).
Ce qui m’a vraiment surpris, c’est qu’il a trouvé une solution plus ou moins fonctionnelle sur cette page :

Long Shadow Generator by Juani Ruiz Echazú

Générateur d’ombres longues par Juani Ruiz Echazú

Beldy via le long shadow generator
Beldy via le long shadow generator

Bon, le CSS généré est très répétitif et mal optimisé et pas du tout utilisable sur un site en production, mais ça fonctionne, c’est ce qui est à mon avis le plus surprenant! Bon, je sais que le CSS3 regorge de propriétés époustouflantes, mais je ne m’attendais pas à une telle découverte surtout que le long shadow est un effet assez fastidieux à recréer sur un logiciel de dessin vectoriel.

Comment fonctionne ce générateur d’ombres longues?

Le script superpose des ombres classiques via les propriétés CSS box-shadow et text-shadow afin d’arriver à ce résultat. Oui, vous avez bien compris, il ne fait que superposer des ombres tout en les décalant 1 pixel en sur l’axe x et y chaque fois, le dégradé est simulé en changeant progressivement la couleur à chaque 13 superpositions presque (je parle ici des paramètres par défaut).
Très stylé, je trouve l’effet réussi, il s’adapte à la fonte utilisé et puisqu’il est en CSS3 pur, le zoom et dé-zoom n’affecte pas le précision de l’oeuvre (bon, à un moment, les décalages pixel-par-pixel deviennent visibles, je vous l’accorde).

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.

Fermer