Multiply, Screen, Overlay : quiconque a déjà ouvert un logiciel de retouche photo reconnaît ces noms de modes de fusion, utilisés pour combiner deux calques d'une façon plus subtile qu'une simple transparence. mix-blend-mode apporte exactement les mêmes formules directement dans le navigateur.
La propriété répond à une question différente de celle de la transparence classique : il ne s'agit plus de laisser deviner ce qu'il y a derrière, mais de calculer une nouvelle couleur à partir des deux couches superposées.
Définition
mix-blend-mode définit comment le rendu d'un élément se combine avec ce qui se trouve derrière lui, en utilisant une formule de fusion plutôt qu'une simple superposition avec transparence. Sa valeur par défaut est normal, qui correspond à l'empilement classique sans aucun mélange : l'élément recouvre simplement ce qu'il y a en dessous.
.logo-sombre {
mix-blend-mode: multiply;
}Les modes les plus utiles
Chaque mode calcule le résultat différemment, mais deux d'entre eux couvrent la grande majorité des besoins réels.
| Mode | Effet | Cas typique |
|---|---|---|
multiply | Assombrit, le blanc devient transparent | Logo sombre posé sur un fond clair |
screen | Éclaircit, le noir devient transparent | Texture lumineuse ou effet de lueur |
difference | Inverse les Couleur CSS qui se superposent | Texte lisible quel que soit le fond en dessous |
overlay | Renforce le contraste existant | Habillage d'une photo sans l'assombrir uniformément |
Cas d'usage : un texte qui s'inverse sur une image
L'exemple le plus démonstratif de mix-blend-mode reste un titre en blanc qui reste lisible sur une photo, quelle que soit sa luminosité par endroits. Avec difference, le navigateur calcule à chaque pixel l'écart entre la couleur du texte et celle de l'image en dessous, ce qui produit un texte sombre sur les zones claires de la photo et un texte clair sur ses zones sombres, sans jamais avoir à deviner la couleur dominante à l'avance.
.titre-inverse {
color: white;
mix-blend-mode: difference;
position: relative;
z-index: 1;
}Un effet duotone avec deux calques
En superposant deux éléments colorés avec des modes différents, multiply sur l'un et screen sur l'autre par exemple, on obtient un effet de type duotone très utilisé en design éditorial : une photo passée en niveaux de gris reçoit deux teintes complémentaires plutôt qu'une palette complète, l'une pour les ombres, l'autre pour les lumières. Cette technique remplace un export image dédié par une combinaison purement CSS, modifiable en direct dans le navigateur sans repasser par un logiciel de retouche à chaque ajustement de couleur.
mix-blend-mode et le contexte d'empilement
Un élément qui reçoit mix-blend-mode se mélange avec tout ce qui apparaît derrière lui dans le même contexte d'empilement, ce qui inclut parfois des éléments frères que l'on ne pensait pas concernés par l'effet. Pour limiter le mélange à un groupe précis, comme une image et son titre seulement, la propriété isolation: isolate posée sur leur conteneur commun crée une nouvelle zone de fusion fermée, sans laisser le reste de la page interférer.
isolation: isolate sur le conteneur direct des deux éléments concernés avant de chercher plus loin.Questions fréquentes
mix-blend-mode et opacity ?opacity laisse simplement deviner ce qu'il y a derrière un élément en réduisant son opacité, sans changer la formule de calcul des couleurs. mix-blend-mode calcule au contraire une couleur entièrement nouvelle à partir des deux couches, selon la formule propre au mode choisi, ce qui produit des effets bien plus variés qu'une simple transparence.
Parce que mix-blend-mode agit par défaut sur tout ce qui apparaît derrière l'élément dans son contexte d'empilement, sans se limiter à son parent direct. isolation: isolate posé sur un conteneur commun résout ce problème en cloisonnant l'effet à l'intérieur de ce conteneur.
mix-blend-mode fonctionne-t-il sur du texte, ou seulement sur des images ?Il fonctionne sur n'importe quel contenu, texte compris, puisqu'il agit sur le rendu final de l'élément plutôt que sur un type de contenu précis. C'est exactement ce qui rend possible l'effet de titre qui s'inverse sur une photo, l'un des usages les plus courants de la propriété.