Le Web est une matière aux possibilités infinies pour les créateurs

C’est ce que j’ai découvert lors de ma première visite sur le site Codepen.io. Cet outil permet aux développeurs front-end d’assembler les différentes technologies en un même endroit, et fourni un rendu en temps réel du code écrit. C’est le banc d’essai parfait pour tester de nouvelles techniques, animations ou designs web. O2 Web a adopté Codepen comme un outil de développement rapide, mais aussi comme terrain de jeu numérique.

Dans cette rubrique Coup de cœur mensuelle, je vous présenterai des Codepens surprenants autant par leur rendu visuel que par les techniques utilisées pour y arriver.

Prenez note que plusieurs de ces Codepens utilisent des techniques émergentes, et ne sont pas toujours supportées sur l’ensemble des navigateurs. 

Pointillés

L’animation de pointillés est l’une des techniques utilisées pour donner vie au Web. Cette façon de faire sert, entre autres, à réaliser l’animation de diagrammes circulaires.

Dans le cas présent, l’auteur anime l’épaisseur ainsi que le point de départ du pointillé. En partant d’un tracé en spirale, plutôt que d’un cercle, l’auteur arrive à créer un tout nouvel effet.

 

Filtres SVG

Pour arriver à créer cet effet «visqueux», l’auteur a utilisé une technique avancée de filtres SVG. Ici, l’effet est appliqué au menu en entier, ce qui donne une grande flexibilité, peu importe le nombre d’éléments ou leur position.

Note aux codeurs
Ce filtre SVG fonctionne en 3 étapes. Tout d’abord, on applique un flou à l’élément HTML pour en dilater sa taille. Ensuite, le contraste est augmenté pour obtenir des contours nets. Finalement, le rendu initial est superposé au nouveau rendu pour rétablir la netteté originale du contenu.

Text-shadows

Le rendu 3D peut sembler anodin, mais c’est un véritable exploit lorsqu’il est créé entièrement à partir de propriétés CSS. Le truc : les ombres portées. Dans le cas présent, l’auteur crée le volume des lettres en plaçant une succession d’ombres aux contours définis, décalées d’un pixel à chaque fois. Il place ensuite les «vraies» ombres, floues celles-là, sous l’épaisseur qu’il vient de créer. Le tout est pivoté dans l’espace 3D pour atteindre la déformation due à la perspective.

Note aux codeurs
Essayez de désactiver la transformation 3D pour mieux comprendre la succession d’ombres utilisées.

Random

Le Web vit actuellement une explosion de générateurs en tout genre. Ce Codepen nous propose de générer un motif aléatoire à chaque clic.

Note aux codeurs
En inspectant le CSS, vous verrez qu’il s’agit véritablement d’un background-image . Cependant, l’image est générée par programmation puis encodée sur une base 64

Fluide

Cette animation, pour le moins hypnotisante, est entièrement générée par un script qui est étonnamment court. En effet, toutes les lignes sont animées à partir des deux mêmes fonctions sinusoïdales, ce qui leur donne cet aspect fluide.