Les motifs en demi-teintes, ces images de points intenses, sont la pierre angulaire de l’impression et de la conception Web. Bien que traditionnellement utilisé comme moyen de reproduire fidèlement des images imprimées, il est également devenu son propre style.
Aujourd’hui, les motifs en demi-teintes sont utilisés comme arrière-plan ou comme effets spéciaux surréalistes pour les images. Avec la promotion de CSS et de JavaScript, les concepteurs ont également trouvé un moyen d’intégrer l’effet dans le code. Les résultats peuvent être surprenants.
Examinons quelques exemples de la façon dont le code implémente les demi-teintes. Comme vous le verrez, il existe plusieurs photos et techniques pour mettre ce modèle classique sur le Web.
Bannière centrale de la photo de votre chat (ou pas du chat)
Il s’agit probablement de l’implémentation en demi-teinte la plus connue. Il consiste à ajouter l’effet à une photo existante (dans ce cas, un chat). Cette section peut également être entièrement personnalisée. Par exemple, vous pouvez remplacer les points par des emoji ou du texte. Vous pouvez également redimensionner chaque élément. Et oui, vous pouvez changer le chat avec un visage, mais pourquoi?
Voir Ycw Medium Tone Pen
Appuyez sur les tons moyens
Voici une application en demi-teintes très créative. Ce bouton affiche un motif subtil avec un effet de défilement légèrement plus fort. Cependant, un clic active un motif à contraste élevé qui attire votre attention.
Voir le bouton en demi-teinte de plumes de Taylor Hunt
Révéler des secrets
L’effet de lampe de poche est devenu très populaire récemment. Ici, il est combiné avec un motif en demi-teinte qui «éclaircit» le texte caché. C’est une interaction amusante et le motif apporte un peu de rétro / brutalisme.
Voir le stylo Découvrez le texte caché de Tyler Durrett
Prenez un ton plus subtil
Il n’y a pas de loi selon laquelle les milieux de terrain doivent être grands et ce passage en est la preuve. Les effets de demi-teintes se fondent parfaitement dans un motif de hachures. Le résultat est quelque chose d’unique et de subtil. Points bonus pour créer avec du CSS pur.
Voir le stylo Devin Price Demi-teinte
Supprimer les effets de défilement
Voici un extrait similaire à un thriller de science-fiction. Une photo en demi-teinte bleue sur fond noir nous regarde à travers l’écran. Déplacez le pointeur de la souris dessus et une partie de l’image s’assombrira.
Voir le stylo Halfway detour de Théo Gil
Parallax Sans BS
Cette photo est une autre image surréaliste de l’effet et montre une étonnante variété de points colorés. Lorsque vous déplacez le curseur, un effet de parallaxe 3D est créé qui révèle un contour subtil qui plane sur l’image principale. La dimension supplémentaire rend l’effet encore plus intéressant.
Détails Stylo bille Eric Jackson Wood Parallax Halftone
Duo de tout
Grâce aux modes de mélange CSS, presque tout peut être fourni avec des effets de demi-teintes. Dans cet exemple, un joli mélange est ajouté à plusieurs photos. Lorsque vous passez la souris sur l’un d’eux, leur vraie couleur s’affiche. C’est une application très pratique qui est attrayante, mais pas exagérée.
Voir le crayon CSS Blending Mode Jos van Weesel
Plus que l’ombre centrale du texte.
Terminons avec un autre cas pour une utilisation pratique. Ici, nous avons une image de carte simple qui utilise un ombrage décalé. Les deux premiers exemples utilisent un ton de couleur unie qui fonctionne bien. Cependant, le deuxième ensemble a un motif en demi-teinte qui lui donne une sensation plus artistique.
Voir les lignes de stylo Mark, les ombres + les effets de demi-teintes
Un standard 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. Nous pouvons bien sûr ajouter un motif en demi-teinte à un élément de conception, mais pourquoi s’arrêter ici?
Les concepteurs trouvent de nouvelles utilisations intelligentes à ces fins. Dans les extraits de code ci-dessus, le ton médian est utilisé 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? Voir notre collection CodePen à d’autres fins créatives.
