Modification d'images en CSS modes de fusion

Dans le tutoriel précédent de cette série, nous avons expliqué comment utiliser les filtres CSS pour éditer des images. Bien que les filtres puissent produire d'excellents résultats, ils sont limités à une seule couche..

Supposons que vous avez une image et que vous souhaitez la superposer de couleur rouge. Vous ne pouvez pas faire cela avec des filtres. Cependant, les modes de fusion sont parfaits pour ce travail. En réalité, ils sont conçus pour prendre les valeurs de couleur de premier plan et d'arrière-plan, effectuer des calculs, puis renvoyer une couleur finale. La dernière image que vous obtenez est le résultat de tous ces calculs sur tous les pixels superposés..

Les modes de fusion vous permettent de mélanger non seulement des images et des couleurs, mais également du texte et des images. Dans ce tutoriel, je montrerai comment utiliser les modes de fusion pour manipuler des images et créer des effets sympas..

Modes de fusion disponibles

• Ordinaire: Dans ce mode, la couleur finale sera la couleur du dessus. La valeur de la couleur inférieure n'aura aucun effet sur le résultat final.
• Multiplier: Dans ce mode, les couleurs du haut et du bas sont multipliées pour obtenir la couleur finale. La couleur résultante sera toujours au moins aussi sombre que l’un ou l’autre des constituants. Cela implique qu'avec un calque noir, le résultat final sera toujours noir. L'utilisation d'un calque blanc n'aura aucun effet sur le résultat final.
• Écran: Dans ce mode, la couleur finale est obtenue en inversant les couleurs supérieure et inférieure, en les multipliant, puis à nouveau en inversant le résultat. La couleur finale sera toujours aussi claire que la couleur du haut ou du bas. Cela implique que l'utilisation d'un calque blanc rendra tout blanc et qu'un calque noir n'aura aucun effet sur le résultat final..
• Recouvrir: Dans ce mode, la couleur finale est obtenue en multipliant ou en filtrant les couleurs d'origine en fonction de la couleur de fond. Si la couleur de fond est plus sombre, les couleurs d'origine sont multipliées et si elles sont plus claires, elles sont masquées. Les reflets et les ombres de la couleur inférieure sont conservés dans ce mode.
• Assombrir: Celui-ci est assez basique. La couleur finale dans ce mode est la couleur plus sombre entre les couches supérieure et inférieure..
• Alléger: C’est l’inverse de noircir, et la couleur finale est donc la couleur plus claire entre les couches supérieure et inférieure..
• Couleur-Dodge: Dans ce mode, la couleur inférieure est divisée par l'inverse de la couleur supérieure pour obtenir la valeur finale. Vous ne verrez aucun changement avec un fond noir dans ce mode. Si la couleur du haut est l'inverse de la couleur du bas, la couleur finale sera une version entièrement éclairée de la couleur du haut..
• Couleur-burn: La couleur finale dans ce mode est produite en divisant l'inverse de la couleur inférieure par la valeur de couleur supérieure et en inversant la valeur résultante. Si la couleur supérieure est blanche, vous ne verrez aucun changement. Une couleur du haut qui est l'inverse de la couleur du bas donnera une image complètement noire.
• Lumière forte: Le mode lumière dure est l'inverse du mode superposition. Dans ce cas, si la couleur supérieure est plus sombre, les couleurs d'origine sont multipliées et si elles sont plus claires, elles sont masquées. C'est fondamentalement le mode superposition avec les couches échangées.
• Lumière douce: Ce mode est semblable à la lumière dure mais produit des résultats finaux plus doux.
• Différence: Ce mode soustrait la valeur de la couleur la plus sombre de la couleur la plus claire pour obtenir la valeur finale. Cela implique que la couleur noire n'aura aucun effet, tandis que le blanc inversera la couleur de l'autre calque.
• Exclusion: Ce mode de fusion est similaire à la différence, mais le résultat final a un contraste plus faible..
• Teinte: Ce mode de fusion utilise la teinte de la couleur supérieure et la saturation et la luminosité de la couleur inférieure pour créer la couleur finale..
• Saturation: Dans ce mode, la couleur finale a la saturation de la couleur supérieure et la teinte et la luminosité de la couleur inférieure.
• Couleur: Ce mode de mélange produit une couleur finale avec la teinte et la saturation de la couleur supérieure et la luminosité de la couleur inférieure. Ce mode préserve les niveaux de gris de la couleur inférieure et peut être utilisé pour teinter des images colorées..
• Luminosité: La couleur finale dans ce mode a la luminosité de la couleur supérieure, tandis que les valeurs de teinte et de saturation proviennent de la couleur inférieure. C'est comme le mode couleur mais avec les calques permutés.

De plus, il existe deux manières d'utiliser les modes de fusion. Vous pouvez utiliser le mode mix-blend, qui détermine comment le contenu d'un élément se fond avec le contenu de l'élément situé en dessous, ainsi qu'avec l'arrière-plan de l'élément. le mode de fusion de fond, d'autre part, détermine comment les images d'arrière-plan d'un élément se fondent les unes dans les autres et avec la couleur d'arrière-plan de l'élément.

Vous pouvez jouer avec cette démo afin de voir comment différentes images et couleurs interagissent en fonction des modes de fusion appliqués. J'ai également joint une image ci-dessous qui montre le mélange d'une couleur jaunâtre avec l'image source.

Créer des frontières irrégulières

Bien que les images en général soient généralement rectangulaires, l’utilisation d’images à bordures irrégulières peut les rendre plus attrayantes et leur donner une signification complètement différente. Considérez cette image d’un pygargue à tête blanche mélangée à la carte des États-Unis. Cela signifie les valeurs américaines représentées par le pygargue à tête blanche. Vous pouvez également combiner d'autres images de la même manière.

Ici, j'ai combiné deux images de telle sorte que le résultat final ait la forme de la première image et les couleurs de la seconde image. Quel mode (s) de mélange pensez-vous pouvoir obtenir cet effet?? 

Un indice ici est que la carte est entièrement en noir et blanc. Ainsi, quel que soit le mode de fusion choisi, il faut masquer toute la partie sur la partie blanche et afficher toute la partie sur la partie noire. Le mode de fusion alléger fait parfaitement ce travail. Étant donné que la couleur blanche est plus claire que les couleurs de l'aigle, elle la cache chaque fois qu'elle dépasse de la carte des États-Unis.. 

Vous devriez essayer de deviner l’autre mode de fusion permettant d’obtenir cet effet en tant qu’exercice. Vous pouvez essayer différents modes de fusion dans cette démonstration pour voir si vous avez bien deviné le mode de fusion.. 

Mélange de dégradés colorés

Croyez-le ou non, l'image colorée ci-dessous est le résultat de dégradés et de modes de fusion soigneusement choisis. Vous pouvez survoler l'image pour voir la version originale.

Si vous souhaitez recréer cet effet, vous devrez commencer par une image avec un arrière-plan sombre pour obtenir les meilleurs résultats. Ensuite, choisissez les couleurs que vous souhaitez mélanger et créez un dégradé linéaire avec toutes ces couleurs. Vous pouvez éventuellement ajouter plus de dégradés sous différents angles. À la fin, définissez le premier mode de fusion de fond à luminosité. Votre CSS final devrait ressembler à ceci:

div background: url ('url-image'), dégradé linéaire (rouge, orange, jaune, vert, bleu, indigo, violet), dégradé linéaire (à droite, rouge, orange, jaune, vert, bleu, indigo , violet); background-blend-mode: luminosité, superposition; // Plus de règles CSS

Vous devez expérimenter différents modes de fusion et images dans la démo d'origine pour déterminer la meilleure combinaison de modes de fusion pour différents types d'images..

Mélanger du texte ensemble

Les modes de fusion ne se limitent pas aux images. Vous pouvez également appliquer des modes de fusion sur un morceau de texte. Dans l'image ci-dessous, j'ai appliqué un mode de fusion à tous les caractères, ainsi qu'à l'image de fond..

Les personnages utilisent le mode mix-blend propriété, et le corps utilise mode de fusion de fond. Voici le CSS pertinent:

body background: # D63 url ('url-image') no-repeat; background-blend-mode: multiplie; taille du fond: couverture;  h1 span mix-blend-mode: hard-light;  

Comme dans les démos précédentes, je vous suggérerais d’expérimenter différents modes de fusion dans cette démo..

Dernières pensées

Avec un peu d'imagination, les possibilités avec les modes de fusion sont infinies. J'espère que ce tutoriel vous a appris quelque chose d'utile sur les modes de fusion et l'édition d'images. Continuez à vous entraîner et vous serez vraiment doué pour utiliser différents modes de fusion.

Si vous avez créé quelque chose d'intéressant avec les modes de fusion, partagez votre travail dans les commentaires ci-dessous..