Modes de fusion

Le duotone est un traitement de couleur populaire en photographie qui donne l'impression qu'une image n'est composée que de deux couleurs contrastées : l'une pour les hautes lumières et l'autre pour les ombres. Comment procéder avec CSS ?

Grâce aux modes de fusion et aux autres techniques que vous avez apprises, comme les filtres et les 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 ou plusieurs calques. 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 un 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 un mélange à l'ensemble d'un élément, tandis que background-blend-mode applique un mélange à l'arrière-plan d'un élément.

Vous utilisez background-blend-mode lorsque vous avez plusieurs arrière-plans sur un élément 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. Un cas d'utilisation est l'exemple initial d'une image duotone, dans laquelle des calques de couleur sont appliqués à 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 prend en compte chaque composant de couleur, tel que RVB, individuellement. Un mode de fusion non séparable tient compte de tous les composants de couleur de manière égale.

Compatibilité du navigateur

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

Modes de mélange séparables

Normale

Il s'agit du mode de mélange par défaut. Il ne modifie en rien la façon dont un élément se mélange aux autres.

Multiplier

Le mode de fusion multiply est comme si vous superposiez plusieurs transparents. Les pixels blancs apparaissent transparents, et les pixels noirs apparaissent noirs. Toute valeur comprise entre ces deux valeurs multipliera ses valeurs de luminosité (lumière). Cela signifie que les lumières deviennent beaucoup plus claires et les zones sombres plus sombres, ce qui produit 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, ce qui a l'effet inverse de multiply et produit le plus souvent un résultat plus lumineux.

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

Superposition

Ce mode de mélange (overlay) combine multiply et screen. Les couleurs de base sombres deviennent plus sombres et les couleurs de base claires deviennent plus claires. Les couleurs intermédiaires, comme un gris à 50 %, ne sont pas affectées.

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

Assombrir

Le mode de mélange 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, il 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 exactement le contraire de darken.

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

Densité couleur -

Si vous utilisez color-dodge, la couleur d'arrière-plan est éclaircie pour refléter la couleur source. Les couleurs noires pures ne sont pas affectées par ce mode.

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

Densité couleur +

Le mode de fusion color-burn est très semblable au mode de fusion multiply, mais il augmente le contraste, ce qui donne des tons moyens plus saturés et des reflets réduits.

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

Lumière crue

L'utilisation de hard-light crée un contraste saisissant. Ce mode de fusion affiche ou multiplie les valeurs de luminosité. Si la valeur du pixel est plus claire que 50% de gris, l'image est éclaircie, comme si elle était filtrée. Si elle est plus sombre, elle est multipliée.

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

Lumière tamisée

Le mode de fusion soft-light est une version moins agressive de overlay. Il fonctionne de la même manière, mais avec moins de contraste.

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

Différence

Pour comprendre le fonctionnement de difference, imaginez 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 entre les valeurs seront inversées.

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

Exclusion

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

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

Modes de mélange non séparables

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

Teinte

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

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

Saturation

Il fonctionne comme hue, mais l'utilisation de saturation comme mode de fusion applique la saturation de la couleur source à la teinte et à la luminosité de la couleur de l'arrière-plan.

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

Couleur

Le mode de mélange color crée une couleur à partir de la teinte et de la saturation de la couleur source, ainsi que de la luminosité de la couleur de l'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 de l'arrière-plan.

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

Propriété isolation

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

Si vous définissez la propriété isolation sur isolate, un nouveau contexte d'empilement est créé, ce qui l'empêche de se fondre avec un calque de fond. Comme vous l'avez appris dans le module sur l'indice de z-index, lorsque vous créez un contexte d'empilement, cette couche devient la couche de base. Cela signifie que les modes de mélange au niveau du parent ne s'appliquent plus, mais que les éléments d'un élément avec isolation: isolate défini peuvent toujours se mélanger.

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

Vérifier vos connaissances

Tester vos connaissances sur les modes de fusion

Parmi les éléments suivants, lesquels sont des modes de fusion CSS ?

Dullen
Éclaircir
Éclaircir
Superposition
Différence
Multiplier

Si vous souhaitez mélanger différentes couleurs de différentes manières, de quel style de mode de fusion avez-vous besoin ?

Non séparables
Séparables