Modes de fusion

Avant d'afficher une image sur un site, celle-ci est généralement modifiée à l'aide d'un logiciel tel que Photoshop. Les modes de fusion n'éliminent pas réellement ce besoin, mais permettent tout de même d'ajouter plusieurs effets à une image directement en CSS.

Les modes de fusion, ou en anglais blend modes, déterminent l’apparence de deux éléments lorsqu’ils sont superposés. De base, les éléments sont traités comme des entités séparées. Ainsi, l’élément en dessous est masqué par l’élément du dessus. C’est ce que l’on appelle le mode normal.

Modes disponibles
  • normal (normal) par défaut.
  • multiply (fondu)
  • screen (superposition)
  • overlay (incrustation)
  • darken (obscurcir)
  • color-dodge (densité couleur -)
  • color-burn (densité couleur +)
  • hard-light (lumière crue)
  • soft-light (lumière tamisée)
  • difference (différence)
  • exclusion (exclusion)
  • hue (teinte)
  • saturation (saturation)
  • color (couleur)
  • luminosity (luminosité)
La documentation concernant les modes de fusion en CSS fut écrite en partenariat avec les ingénieurs d’Adobe. Vous remarquerez donc que les modes disponibles correspondent à ceux dans Photoshop. mix-blend-mode

Les modes de fusion peuvent être utilisés sur des éléments séparés grâce à la propriété mix-blend-mode.

Par exemple, voici 3 <div> séparés, se superposant:

mix-blend-mode mix-blend-mode Isolation

La propriété isolation permet de créer un nouveau contexte de fusion. Lorsqu'un contexte est créé, les éléments à l'intérieur peuvent continuer de fusionner entre eux, mais ne peuvent plus fusionner avec les autres éléments sur la page.

Par exemple, si une bande jaune 🟡 est ajoutée à l'exemple précédent et qu'un contexte (.wrapper) incluant les cercles #1 et #2 est créé. Ces cercles continuent de fusionner entre eux, mais ne fusionnent pas avec ladite bande. Tandis que le cercle #3 fusionne avec celle-ci, puisqu'il n'est pas isolé.

Remarquez la bande visible seulement au travers du cercle #3. isolation isolation background-blend-mode

Il est aussi possible d’utiliser la propriété background-blend-mode pour déterminer comment les arrière-plans (couleurs ou images) d’un élément doivent fusionner entre eux.

Par exemple, un élément ayant un fond vert 🟢 et l'image de paysage en arrière-plan:

.element { background-color: green; background-image: url('paysage.jpg'); } Crédits photo 📷: Simon Berger background-blend-mode background-blend-mode
EXERCICE Modes de fusion - Émotion Pour cet exercice vous devez ajuster une affiche à l’aide des modes de fusion en CSS afin de lui donner l’apparence recherchée.