Comment utiliser les modes de fusion CSS

Les modes de fusion CSS sont un moyen simple d'ajouter des effets d'image directement dans votre navigateur.

Pour cette raison, la manière traditionnelle d'éditer puis d'enregistrer des photos à partir d'une solution logicielle d'édition d'images n'est pas toujours nécessaire. En tant que concepteurs, nous avons passé d'innombrables heures à ajouter des effets aux images avec des outils comme Adobe Photoshop. Au fur et à mesure que vous parcourez ce didacticiel, vous remarquerez que de nombreuses options ressemblent à celles de Photoshop, mais elles peuvent désormais être réalisées avec l'efficacité du style CSS.

Les modes de fusion du navigateur élimineront-ils complètement le besoin d'un logiciel de retouche d'image ? Pas tout à fait, et certainement pas encore tout à fait. Mais la prise en charge des CSS et des navigateurs a parcouru un long chemin pour prendre en charge de nouvelles façons d'éditer des images. Le découpage et le masquage CSS et SVG, les modes de fusion, la transformation 3D, etc. peuvent certainement réduire la dépendance que nous avons vis-à-vis des logiciels d'édition d'images. À mesure que les navigateurs deviennent plus sophistiqués, nous verrons beaucoup plus de potentiel et passerons (espérons-le) moins de temps dans Photoshop.

Modes de fusion CSS et modes de fusion CSS Mix

Ce didacticiel couvrira les modes de fusion CSS et leur utilisation. Pour commencer, il y a quelques options différentes que vous devriez connaître. L'un est un effet avec background-blend-mode et l'autre avec mix-blend-mode .

À l'aide de background-blend-mode property , vous pouvez mélanger les calques d'arrière-plan (image ou couleur) d'un élément. Les modes de fusion sont définis comme une valeur et ils spécifient comment mélanger ou mélanger les couleurs de l'image d'arrière-plan avec la couleur, ou d'autres images d'arrière-plan, derrière elle.

Que se passe-t-il si vous souhaitez effectuer un mélange mais pas avec des éléments d'arrière-plan ? Les éléments peuvent être fusionnés à l'aide de la propriété mix-blend-mode . Cette propriété décrit comment la fusion doit être entre les éléments HTML empilés. Les éléments sur les calques qui se chevauchent se fondront avec ceux en dessous. Toutes les images, textes, bordures ou en-têtes seront influencés par cette propriété.

Adobe Photoshop Multiplier Exemple

Jeter un coup d'œil à la manière traditionnelle d'afficher les modes de fusion dans un éditeur d'images nous donne une idée de ce que nous pouvons accomplir avec les modes de fusion CSS. La photo suivante a été créée dans Adobe Photoshop. L'image est sur son propre calque d'arrière-plan avec un calque rouge au-dessus. Un mode de fusion pour le calque rouge a été sélectionné, qui est "Multiplier". Comme vous pouvez le voir, il y a une superposition rouge. Pour obtenir cet effet, Adobe Photoshop prend les couleurs du calque sur lequel "Multiplier" est appliqué, multiplie par les couleurs du ou des calques en dessous, puis les divise par 255 pour afficher le résultat.

Ce même effet peut être obtenu avec CSS permettant une personnalisation plus rapide et une mise à jour facile.

Exemple de base d'un mode de fusion CSS

Un exemple simple pour voir comment fonctionnent les modes de fusion consiste à mélanger l'image avec un avec un background-color . Tout d'abord, le chemin URL vers l'image doit être déclaré, puis une couleur spécifiée. Une fois ceux-ci décidés, le mode de fusion doit être choisi. Multiplier a été sélectionné ici pour montrer comment ce mode de fusion affecte l'apparence de l' background-image .

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

Un mode de fusion est la façon dont la valeur de couleur finale d'un pixel est calculée lorsque les calques se chevauchent. Chaque mode de fusion prend la valeur de couleur du premier plan et de l'arrière-plan (couleur du haut et couleur du bas), calcule sa valeur et renvoie une valeur de couleur. Le dernier calque visible est le résultat du calcul du mode de fusion sur chaque pixel superposé entre les calques fusionnés.

Multiplier est un mode de fusion très populaire, mais il existe également d'autres options de mode de fusion disponibles : écran, superposition, assombrir, éclaircir, esquiver les couleurs, brûler les couleurs, lumière dure, lumière douce, différence, exclusion, teinte, saturation, couleur et luminosité. Si "normal" est spécifié, cela réinitialisera les choses. Au lieu de parcourir les détails de chaque mode de fusion un par un, les expérimenter est le meilleur moyen de déterminer quel sera le résultat final.

Mode de fusion d'arrière-plan avec deux images

Plutôt que d'avoir une superposition de couleurs sur une image, superposer deux images ensemble peut avoir un effet plutôt cool. C'est aussi simple que d'ajouter deux images d'arrière-plan dans la déclaration CSS. Le choix suivant est d'avoir une couleur de fond (ou pas). Si vous ne voulez pas de couleur d'arrière-plan, vous pouvez la supprimer et les images se fondront ensemble en fonction du mode de fusion que vous choisissez.

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Dégradé sur les modes de fusion d'arrière-plan

Plutôt que d'utiliser une seule couleur, les dégradés peuvent également donner des effets uniques.

 .gradient-sur-image {
 arrière-plan:
 dégradé linéaire (violet 0%, rouge 80%),
 linear-gradient(à droite, violet 0%, jaune 100%), url("image.jpg");
 background-blend-mode : écran, différence, éclaircissement ;
 } 

Vous remarquerez également que cet exemple comporte plusieurs modes de fusion d'arrière-plan. Si un mode de fusion ne suffit pas, plusieurs peuvent être utilisés.

Des exemples de travail peuvent être trouvés dans ce Codepen.

Mélanger des exemples de mode de fusion

Jusqu'à présent, l'accent a été mis sur l'arrière-plan. Que se passe-t-il si d'autres éléments de la page souhaitent tirer parti des modes de fusion ? Ce n'est pas un problème et les mêmes types de mode de fusion sont disponibles.

Les choses se ressemblent à partir background-blend-modes à l'exception de initial, inherit et unset.

• Initial : paramètre par défaut de la propriété qui ne définit pas de mode de fusion.
• Hériter : hérite du mode de fusion de son élément parent.
• Non défini : supprime le mode de fusion d'un élément.

Exemple de base d'un mode de fusion mixte avec isolation

Lorsque vous travaillez avec mix-blend-mode , vous rencontrerez le besoin de faire un peu d'isolation. Tout d'abord, il est important de savoir que "l'empilement" est possible, et cela est utile lorsque vous travaillez avec un grand nombre de calques. Pensez à une pile de boîtes. Chaque boîte est séparée du groupe. À l'intérieur de chaque boîte, il peut y avoir plusieurs couches d'articles. Cette façon de penser aidera à déterminer ce qui doit être isolé.

Mélange de texte et d'image avec le mode Mix-blend

Dans cet exemple, le div avec une classe img-wrap contient l'image. L'image a un mix-blend-mode de multiplication. Donc, fondamentalement, l'image semble tomber en arrière-plan.

Pour éviter cela, la div img-wrap (contenant également le texte de l'en-tête) doit être un nouvel ensemble de contenu empilé afin qu'il soit séparé de l'arrière-plan de l'élément body. Ceci est fait avec la propriété d'isolement. La valeur par défaut est auto, donc isolation: isolate; devra être ajouté.

Pour tester cela, commentez la propriété isolation sur le div avec la classe .img-wrap et vérifiez le résultat.

Voici le HTML :

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

Voici le CSS. Portez une attention particulière à l' isolate sur le .img-wrap .

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

L'exemple de travail peut être trouvé sur Codepen.

Texte découpé avec le mode Mix-blend

Certains effets de type intéressants peuvent être créés avec les modes de mélange de mélange. Il existe un moyen simple de découper du texte. L'arrière-plan est caché par un remplissage sur l'élément h1 .

Voici le HTML :

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

Celle contenant <div> est remplie avec l'image de fond de la forêt.

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

Le titre à l'intérieur est stylisé avec une couleur d'arrière-plan facultative. L'en-tête a un effet transparent avec l'image d'arrière-plan semi-transparente en utilisant mix-blend-mode de multiplication :

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

L'exemple de travail peut être trouvé sur Codepen.

Mode mix-blend et SVG

Les fichiers SVG sont très populaires sur le Web et les modes de fusion CSS fonctionnent également bien avec eux. Les formes peuvent être facilement ciblées pour leur donner le mode de fusion souhaité.

L'isolement était également essentiel dans cet exemple. Sans isoler les cercles, le fond gris gênerait.

Voici le code pour créer le groupe de cercle :

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

Voici les styles CSS :

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

Cet exemple peut être trouvé sur Codepen.

Prise en charge du navigateur pour le mode de mélange d'arrière-plan et le mode de mélange

La prise en charge du navigateur est assez bonne, mais pas entièrement cohérente pour le mode background-blend. Avant de commencer une conception utilisant cette fonctionnalité, assurez-vous de vérifier Puis-je utiliser. Actuellement, Edge et Safari manquent de support. Pour faire face à une prise en charge limitée et en fonction des navigateurs qui doivent être pris en charge, une requête de fonctionnalité CSS peut être une bonne option. Sinon, considérer les images « mélangées » comme une amélioration (et non une exigence) peut être votre meilleur pari.

La prise en charge du navigateur est légèrement meilleure pour le mode mix-blend. Il est bon d'être conscient de la prise en charge partielle. Par exemple, Safari ne prend pas en charge la teinte, la saturation, la couleur ou la luminosité.

La meilleure façon de vraiment savoir ce qui peut être conçu avec les modes de fusion est d'expérimenter. Les exemples présentés ici ne font qu'effleurer la surface. C'est incroyable le genre de graphiques qui peuvent être créés en utilisant les modes de fusion. C'est un grand pas en avant pour ce qui peut être fait sur le web.

Alimentez la liberté de créer avec WP Engine

WP Engine donne la liberté de créer sur WordPress. Les produits de la société, les plus rapides parmi tous les fournisseurs WordPress, alimentent 1,5 million d'expériences numériques. Plus des 200 000 meilleurs sites au monde utilisent WP Engine pour alimenter leurs expériences numériques que quiconque dans WordPress. Trouvez-en plus sur wpengine.com ou parlez à un représentant dès aujourd'hui !