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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
background-blend-mode
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Parmi les éléments suivants, lesquels sont des modes de combinaison CSS ?
Si vous voulez fusionner différentes couleurs de différentes manières, quel style de mode de fusion avez-vous besoin ?