Les motifs en demi-teintes, ces images de points intenses, sont un pilier de l'impression et de la conception Web. Bien qu'utilisé traditionnellement comme moyen de reproduire fidèlement des images imprimées, il est également devenu un style à part.
Aujourd'hui, les motifs en demi-teintes sont utilisés comme arrière-plans ou pour fournir des effets spéciaux surréalistes aux images. Et, à mesure que CSS et JavaScript ont progressé, les concepteurs ont également trouvé un moyen d'intégrer l'effet dans le code. Les résultats peuvent être étonnants.
Examinons quelques exemples de la façon dont les demi-teintes sont implémentées via le code. Comme vous le verrez, il existe plusieurs techniques et plans différents pour mettre ce modèle classique sur le Web.
Milieu de la photo de votre chat (ou pas chat)
Il s'agit probablement de l'implémentation en demi-teinte la plus connue. Il consiste à ajouter l'effet à une photographie existante (un chat, dans ce cas). Mais cet extrait est également entièrement personnalisable. Vous pouvez remplacer des points par, par exemple, des emoji ou du texte. Vous pouvez également modifier la taille de chaque point. Et oui, vous pouvez échanger le chat avec un visage, mais pourquoi?
Voir le stylo
Demi-teinte Ycw
Appuyez sur les tons moyens
Voici une utilisation très créative des demi-teintes. Un motif subtil apparaît sur ce bouton, avec un effet de défilement légèrement plus audacieux. Mais en cliquant, vous activerez un motif à contraste élevé qui attirera certainement votre attention.
Voir le stylo
Bouton demi-teinte Taylor Hunt
Révéler des secrets
L'effet de lampe de poche est devenu très populaire ces derniers temps. Ici, il est combiné avec un motif en demi-teintes qui "éclaire" le texte caché. C'est une interaction amusante, et le skipper apporte une touche rétro / brutaliste.
Voir le stylo
Révéler le texte caché de Tyler Durrett
Prendre un ton plus subtil
Il n'y a pas de loi pour que le ton médian soit fort, et ce passage en est la preuve. Les effets de demi-teintes se fondent parfaitement dans un motif de hachures croisées. Le résultat est quelque chose d'unique et de subtil. Points bonus pour la construction avec du CSS pur.
Voir le stylo
Motif de hachures en demi-teinte Devin Price
Effets de défilement à distance
Voici un extrait qui ressemble à quelque chose d'un thriller de science-fiction. Une photo en demi-teinte bleu sur noir nous regarde de l'autre côté de l'écran. Passez la souris dessus et une partie de l'image s'estompera dans l'obscurité.
Voir le stylo
Aberration en demi-teintes par Théo Gil
Parallax Sans BS
Une autre image surréaliste de l'effet, cette photo présente un tableau vertigineux de points colorés. De plus, le déplacement du curseur produit un effet de parallaxe 3D qui expose un contour subtil qui flotte sur l'image principale. La dimension ajoutée rend l'effet encore plus intéressant.
Voir le stylo
Demi-teinte Parallax par Eric Jackson Wood
Duo tout
Grâce aux modes de fusion CSS, des effets de demi-teintes peuvent être ajoutés à presque tout. Dans cet exemple, un magnifique mélange est placé sur plusieurs photos. Le survol de l'un révèle sa vraie couleur. C'est une utilisation très pratique qui convainc, mais sans être exagérée.
Voir le stylo
Les modes CSS Blend de Jos van Weesel
Plus que l'ombre de texte moyenne
Terminons les choses avec un autre cas d'utilisation pratique. Ici, nous avons une police de base courte qui utilise un ombrage décalé. Les deux premiers exemples utilisent une ombre de couleur unie, ce qui fonctionne bien. Mais le deuxième ensemble présente un motif en demi-teintes, qui offre une sensation plus artistique.
Voir le stylo
Traits, ombres + effets de demi-teintes de Mark
Un schéma d'innovation
La meilleure chose à propos de la combinaison de code avec un effet d'image classique est qu'elle ouvre un tout nouveau monde de possibilités. Bien sûr, nous pouvons ajouter un motif en demi-teinte à un élément de conception, mais pourquoi en rester là?
Les concepteurs trouvent de nouvelles utilisations intelligentes pour ces effets. Dans les extraits de code ci-dessus, la demi-teinte est utilisée à la fois de manière traditionnelle et innovante. Les anciennes limites n'existent que si nous voulons qu'elles existent.
Vous voulez voir plus d'exemples de motifs de demi-teintes? Consultez notre collection CodePen pour d'autres utilisations créatives.
