Modes de fusion

Podcast CSS – 024: Modes de fusion

Duotone est un traitement de couleur populaire pour la photographie qui donne l'impression qu'une image n'est composée que de deux couleurs contrastées: l'une pour les tons clairs et l'autre pour les conditions de faible luminosité. Mais comment faire avec CSS ?

L'utilisation des modes de fusion et d'autres techniques que vous avez apprises tels que les filtres et pseudo-éléments : vous pouvez appliquer cet effet à n'importe quelle image.

Qu'est-ce qu'un mode de fusion ?

Les modes de fusion sont couramment utilisés dans les outils de conception tels que Photoshop pour créer un effet de composition en mélangeant les couleurs de deux couches ou plus. En modifiant la façon dont les couleurs se mélangent, vous pouvez obtenir des effets visuels vraiment intéressants. Vous pouvez également utiliser les modes de fusion comme isoler une image avec un arrière-plan blanc, pour qu'elle semble avoir un arrière-plan transparent.

Vous pouvez utiliser la plupart des modes de fusion disponibles dans un outil de conception avec CSS, à l'aide du mix-blend-mode ou background-blend-mode. mix-blend-mode applique la fusion à un élément entier et background-blend-mode applique la fusion à l'arrière-plan d'un élément.

Vous utilisez background-blend-mode lorsque plusieurs arrière-plans sont définis pour un élément. et que vous souhaitez qu'elles se fondent les unes dans les autres.

mix-blend-mode affecte l'élément dans son ensemble. y compris ses pseudo-éléments. L'un de ces cas d'utilisation est le premier exemple, qui a des couches de couleur appliquées à l'élément via ses pseudo-éléments.

Les modes de combinaison se divisent en deux catégories: séparables et non séparables. Un mode de mélange séparable prend en compte chaque composant de couleur, comme RVB, individuellement. Un mode de mélange non séparable considère tous les composants de couleur de la même manière.

Compatibilité du navigateur

mix-blend-mode

background-blend-mode

Modes de mélange séparables

Normale

Il s'agit du mode de fusion par défaut, qui ne modifie en rien la façon dont un élément se fond avec les autres.

Multiplier

Le mode de fusion multiply revient à empiler plusieurs transparences les unes sur les autres. Les pixels blancs apparaissent transparents, et les pixels noirs s'afficheront en noir. Tout ce qui se trouve entre les deux multiplie ses valeurs de luminosité. Cela signifie que les lumières deviennent beaucoup plus claires et plus sombres, plus foncée, ce qui entraîne le plus souvent un résultat plus sombre.

.my-element {
  mix-blend-mode: multiply;
}

Écran

L'utilisation de screen multiplie les valeurs de lumière, un effet inverse à multiply, et produit le plus souvent un résultat plus lumineux.

.my-element {
  mix-blend-mode: screen;
}

Superposition

Ce mode de fusion (overlay) combine multiply et screen. Les couleurs sombres de la base deviennent plus sombres et les couleurs claires de la base deviennent plus claires. Les couleurs de milieu de gamme (gris 50 %, par exemple) ne sont pas affectées.

.my-element {
  mix-blend-mode: overlay;
}

Assombrir

Le mode de fusion darken compare la luminosité de la couleur sombre de l'image source à celle de l'image de fond et sélectionne la plus sombre des deux. Pour ce faire, il compare les valeurs RVB au lieu de la luminosité (comme le ferait multiply et screen). pour chaque canal de couleur. Avec darken et lighten, de nouvelles valeurs de couleur sont souvent créées à partir de ce processus de comparaison.

.my-element {
  mix-blend-mode: darken;
}

Lighten

L'utilisation de lighten produit exactement le contraire de darken.

.my-element {
  mix-blend-mode: lighten;
}

Esquive des couleurs

Si vous utilisez color-dodge, la couleur d'arrière-plan est éclaircie pour refléter la couleur source. Ce mode n'a aucun effet sur les couleurs noires pures.

.my-element {
  mix-blend-mode: color-dodge;
}

Brûler les couleurs

Le mode de fusion color-burn est très semblable au mode de fusion multiply, mais augmente le contraste, ce qui se traduit par une saturation des tons moyens et une réduction des tons clairs.

.my-element {
  mix-blend-mode: color-burn;
}

Lumière crue

L'utilisation de hard-light crée un contraste éclatant. Ce mode de fusion filtre ou multiplie les valeurs de luminosité. Si la valeur en pixels est plus claire que 50% de gris, l'image est éclaircie. comme s'il était filtré. Si elle est plus foncée, elle est multipliée.

.my-element {
  mix-blend-mode: hard-light;
}

Lumière douce

Le mode de fusion soft-light est une version moins accentuée de overlay. Son fonctionnement est presque le même, mais avec moins de contraste.

.my-element {
  mix-blend-mode: soft-light;
}

Différence

Vous pouvez vous représenter difference un peu comme un négatif photo. Le mode de combinaison difference prend la valeur de différence de chaque pixel, d'inverser les couleurs de la lumière. Si les valeurs de couleur sont identiques, elles deviennent noires. Les différences de valeurs seront inversées.

.my-element {
  mix-blend-mode: difference;
}

Exclusion

L'utilisation de exclusion est très semblable à difference, mais au lieu de renvoyer du noir pour des pixels identiques, il renvoie 50% de gris, ce qui donne un résultat plus doux et moins contrasté.

.my-element {
  mix-blend-mode: exclusion;
}

Modes de mélange non séparables

Vous pouvez considérer ces modes de mélange comme des composants couleur TSL. Chacune d'elles extrait une valeur de composante spécifique de la couche active et la combine avec d'autres valeurs de composante.

Teinte

Le mode de fusion hue prend la teinte de la couleur source et l'applique à la saturation et à la luminosité de l'arrière-plan.

.my-element {
  mix-blend-mode: hue;
}

Saturation

Cela fonctionne comme hue, Toutefois, si vous utilisez saturation comme mode de fusion, la saturation de la couleur source est appliquée à la teinte et à la luminosité de l'arrière-plan.

.my-element {
  mix-blend-mode: saturation;
}

Couleur

Le mode de fusion color crée une couleur à partir de la teinte et de la saturation de la couleur source. et la luminosité de l'arrière-plan.

.my-element {
  mix-blend-mode: color;
}

Luminosité

Enfin, luminosity est l'inverse de color. Elle crée une couleur avec la luminosité de la couleur source et la teinte et la saturation de la couleur d'arrière-plan.

.my-element {
  mix-blend-mode: luminosity;
}

Propriété isolation

Si vous définissez isolation doit avoir la valeur isolate, un nouveau contexte d'empilement, ce qui l'empêchera de se fondre avec un calque de fond. Comme vous l'avez appris dans le module sur z-index, lorsque vous créez un contexte d'empilement, cette couche devient la couche de base. Cela signifie que les modes de combinaison de niveau parent ne s'appliqueront plus. Toutefois, les éléments situés à l'intérieur d'un élément pour lequel isolation: isolate est défini peuvent toujours fusionner.

Notez que cela ne fonctionne pas avec background-blend-mode. car la propriété d'arrière-plan est déjà isolée.

Testez vos connaissances

Tester vos connaissances sur les modes de combinaison