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\u00e9 comme moyen de reproduire fid\u00e8lement des images imprim\u00e9es, il est \u00e9galement devenu son propre style.<\/p>\n
Aujourd’hui, les motifs en demi-teintes sont utilis\u00e9s comme arri\u00e8re-plan ou comme effets sp\u00e9ciaux surr\u00e9alistes pour les images. Avec la promotion de CSS et de JavaScript, les concepteurs ont \u00e9galement trouv\u00e9 un moyen d’int\u00e9grer l’effet dans le code. Les r\u00e9sultats peuvent \u00eatre surprenants.<\/p>\n
Examinons quelques exemples de la fa\u00e7on dont le code impl\u00e9mente les demi-teintes. Comme vous le verrez, il existe plusieurs photos et techniques pour mettre ce mod\u00e8le classique sur le Web.<\/p>\n
Il s’agit probablement de l’impl\u00e9mentation en demi-teinte la plus connue. Il consiste \u00e0 ajouter l’effet \u00e0 une photo existante (dans ce cas, un chat). Cette section peut \u00e9galement \u00eatre enti\u00e8rement personnalis\u00e9e. Par exemple, vous pouvez remplacer les points par des emoji ou du texte. Vous pouvez \u00e9galement redimensionner chaque \u00e9l\u00e9ment. Et oui, vous pouvez changer le chat avec un visage, mais pourquoi?<\/p>\n
Voir Ycw Medium Tone Pen<\/p>\n
Voici une application en demi-teintes tr\u00e8s cr\u00e9ative. Ce bouton affiche un motif subtil avec un effet de d\u00e9filement l\u00e9g\u00e8rement plus fort. Cependant, un clic active un motif \u00e0 contraste \u00e9lev\u00e9 qui attire votre attention.<\/p>\n
Voir le bouton en demi-teinte de plumes de Taylor Hunt<\/p>\n
L’effet de lampe de poche est devenu tr\u00e8s populaire r\u00e9cemment. Ici, il est combin\u00e9 avec un motif en demi-teinte qui \u00ab\u00e9claircit\u00bb le texte cach\u00e9. C’est une interaction amusante et le motif apporte un peu de r\u00e9tro \/ brutalisme.<\/p>\n
Voir le stylo D\u00e9couvrez le texte cach\u00e9 de Tyler Durrett<\/p>\n
Il n’y a pas de loi selon laquelle les milieux de terrain doivent \u00eatre grands et ce passage en est la preuve. Les effets de demi-teintes se fondent parfaitement dans un motif de hachures. Le r\u00e9sultat est quelque chose d’unique et de subtil. Points bonus pour cr\u00e9er avec du CSS pur.<\/p>\n
Voir le stylo Devin Price Demi-teinte<\/p>\n
Voici un extrait similaire \u00e0 un thriller de science-fiction. Une photo en demi-teinte bleue sur fond noir nous regarde \u00e0 travers l’\u00e9cran. D\u00e9placez le pointeur de la souris dessus et une partie de l’image s’assombrira.<\/p>\n
Voir le stylo Halfway detour de Th\u00e9o Gil<\/p>\n
Cette photo est une autre image surr\u00e9aliste de l’effet et montre une \u00e9tonnante vari\u00e9t\u00e9 de points color\u00e9s. Lorsque vous d\u00e9placez le curseur, un effet de parallaxe 3D est cr\u00e9\u00e9 qui r\u00e9v\u00e8le un contour subtil qui plane sur l’image principale. La dimension suppl\u00e9mentaire rend l’effet encore plus int\u00e9ressant.<\/p>\n
D\u00e9tails Stylo bille Eric Jackson Wood Parallax Halftone<\/p>\n
Gr\u00e2ce aux modes de m\u00e9lange CSS, presque tout peut \u00eatre fourni avec des effets de demi-teintes. Dans cet exemple, un joli m\u00e9lange est ajout\u00e9 \u00e0 plusieurs photos. Lorsque vous passez la souris sur l’un d’eux, leur vraie couleur s’affiche. C’est une application tr\u00e8s pratique qui est attrayante, mais pas exag\u00e9r\u00e9e.<\/p>\n
Voir le crayon CSS Blending Mode Jos van Weesel<\/p>\n
Terminons avec un autre cas pour une utilisation pratique. Ici, nous avons une image de carte simple qui utilise un ombrage d\u00e9cal\u00e9. Les deux premiers exemples utilisent un ton de couleur unie qui fonctionne bien. Cependant, le deuxi\u00e8me ensemble a un motif en demi-teinte qui lui donne une sensation plus artistique.<\/p>\n
Voir les lignes de stylo Mark, les ombres + les effets de demi-teintes<\/p>\n
La meilleure chose \u00e0 propos de la combinaison de code avec un effet d’image classique est qu’elle ouvre un tout nouveau monde de possibilit\u00e9s. Nous pouvons bien s\u00fbr ajouter un motif en demi-teinte \u00e0 un \u00e9l\u00e9ment de conception, mais pourquoi s’arr\u00eater ici?<\/p>\n
Les concepteurs trouvent de nouvelles utilisations intelligentes \u00e0 ces fins. Dans les extraits de code ci-dessus, le ton m\u00e9dian est utilis\u00e9 de mani\u00e8re traditionnelle et innovante. Les anciennes limites n’existent que si nous voulons qu’elles existent.<\/p>\n
Vous voulez voir plus d’exemples de motifs de demi-teintes? Voir notre collection CodePen \u00e0 d’autres fins cr\u00e9atives.<\/p>\n