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é)

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:

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 fusionnent 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é.

CodePen | smnarnold 👀

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');
}

CodePen | smnarnold 👀