Modes de fusion

Podcast CSS – 024: Modes de fusion

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

Vous pouvez appliquer cet effet à n'importe quelle image à l'aide des modes de fusion et d'autres techniques que vous avez apprises, telles que les filtres et les pseudo-éléments.

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 calques 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 utilitaire, par exemple pour isoler une image dont l'arrière-plan est blanc afin 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 des propriétés mix-blend-mode ou background-blend-mode. mix-blend-mode applique la fusion à un élément entier, tandis que background-blend-mode applique une fusion à l'arrière-plan d'un élément.

Utilisez background-blend-mode lorsque l'élément comporte plusieurs arrière-plans et que vous souhaitez qu'ils se fondent les uns dans les autres.

mix-blend-mode affecte l'ensemble de l'élément, y compris ses pseudo-éléments. L'un de ces cas d'utilisation concerne l'exemple initial d'une image en deux parties, dans laquelle des couches de couleurs sont appliquées à l'élément via ses pseudo-éléments.

Les modes de fusion se divisent en deux catégories: séparables et non séparables. Un mode de fusion séparable considère chaque composant de couleur, tel que le RVB, individuellement. Un mode de fusion 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 fusion séparables

Normal

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

Multiplier

Le mode de fusion multiply revient à empiler plusieurs transparences. Les pixels blancs apparaîtront transparents, et les pixels noirs apparaîtront en noir. Tout ce qui se trouve entre les deux multiplie ses valeurs de luminosité (luminosité). Cela signifie que les lumières deviennent beaucoup plus claires, sombres et sombres, produisant 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 de base sombres s'assombrissent et les couleurs claires de base s'éclaircissent. Les couleurs de milieu de gamme (50% de gris, par exemple) ne sont pas affectées.

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

Assombrir

Le mode de fusion darken compare la luminosité des couleurs sombres de l'image source et de l'image de fond, puis sélectionne la plus sombre des deux. Pour ce faire, elle compare les valeurs RVB au lieu de la luminosité (comme le feraient 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;
}

Éclaircir

L'utilisation de lighten fait le contraire de darken.

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

Esquive des couleurs

Si vous utilisez color-dodge, la couleur d'arrière-plan s'éclaircit pour refléter la couleur source. Le noir pur n'a aucun effet dans ce mode.

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

Élimination des couleurs

Le mode de fusion color-burn est très semblable au mode de fusion multiply, mais il augmente le contraste, ce qui se traduit par des tons moyens plus saturés 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 marqué. Ce mode de fusion affiche ou multiplie les valeurs de luminosité. Si la valeur du pixel est inférieure à 50% de gris, l'image est éclaircie, comme si elle avait été filtrée. S'il est plus foncé, il est multiplié.

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

Lumière douce

Le mode de fusion soft-light est une version moins stricte de overlay. Elle fonctionne à peu près de la même manière avec moins de contraste.

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

Différence

Pour vous représenter le fonctionnement de difference, vous pouvez le comparer à celui d'un négatif photo. Le mode de fusion difference prend la valeur de différence de chaque pixel, en inversant les couleurs claires. 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 se traduit par une sortie plus douce avec moins de contraste.

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

Modes de fusion non séparables

Vous pouvez considérer ces modes de fusion comme des composants HSL color. Chacune d'elles reçoit une valeur de composant spécifique de la couche active et la combine avec d'autres valeurs de composant.

Hue

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

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

Saturation

Cela fonctionne comme hue, mais l'utilisation de saturation en tant que mode de fusion applique la saturation de la couleur source à la teinte et à la luminosité de la couleur d'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 de la luminosité de la couleur d'arrière-plan.

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

Luminosité

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

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

La propriété isolation

Si vous définissez la propriété isolation sur la valeur isolate, elle crée un contexte d'empilement, ce qui l'empêchera de se fondre avec une couche de fond. Comme vous l'avez appris dans le module z-index, lorsque vous créez un contexte d'empilement, cette couche devient la couche de base. Cela signifie que les modes de fusion au niveau du parent ne s'appliqueront plus, mais que les éléments d'un élément pour lequel isolation: isolate est défini peuvent continuer à se 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 fusion