Utiliser les modes de fusion (mix-blend-mode / blackground-blend-mode) de CSS

Dans cet article, nous allons apprendre à utiliser les modes de fusion : ces propriétés qui nous permettent de mélanger plusieurs couleurs et différentes images pour créer des effets artistisques, un peu comme Photoshop.

Maxime Delville

Mis à jour le 3 décembre 2024

Un mode de fusion ?

Les modes de fusion sont souvent utilisés dans les outils comme Photoshop pour créer des effets de composition grâce aux mélanges des couleurs de plusieurs calques. Lorsqu'on on modifie la façon dont les couleurs se mélangent, on obtient des effets visuels très artistiques. On peut également utiliser ces modes de fusion comme utilitaire, en isolant une image sur un fond blanc, de manière à ce qu'elle semble avoir un fond transparent, par exemple.

Qu'est ce que le mix-blend-mode ?

Le mix-blend-mode est une propriété CSS qui permet de modifier l'apparence d'un élément en combianant ses couleurs avec celles de son arrière plan. Cette propriété est très utile pour créer des effets visuels intéressants et pour rendre le conte,u plus attractif.

En utilisant le mix-blend-mode, vous pouvez choisir parmi une variété de modes de fusions pour appliquer un effet à un élément. Les modes de fusion incluent :

normal : aucune fusion n'est appliquée et les couleurs de l'élément sont affichées telles qu'elles.

CSS

mix-blend-mode: normal;

multiply : les couleurs de l'élément sont multipliées avec celles de l'arrière plan, créant un effet sombre et riche.

CSS

mix-blend-mode: multiply;

screen : les couleurs de l'élément sont inversées, multipliées avec l'inverse de l'arrière plan, puis inversées à nouveau.

CSS

mix-blend-mode: screen;

overlay : l'élément est mélangé avec l'arrière-plan en fonction de leur luminosité, créant un effet contrasté.

CSS

mix-blend-mode: overlay;

color-dodge : les couleurs de l'élément sont éclairées en fonction de celles de l'arrière plan, créant un effet clair et lumineux.

CSS

mix-blend-mode: color-dodge;

Voici une liste de tous les mix-blend-mode possibles :

CSS

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

Syntaxe :

CSS

element {
  mix-blend-mode: normal;
}

Il est important de préciser que l'on peut également les associer pour y ajouter plusieurs valeurs :

CSS

element {
  mix-blend-mode: multiply, darken, color-dodge;
}

Le background-blend-mode

Un rapide point sur le backround-blend-mode

Le background-blend-mode ressemble beaucoup au mix-blend-mode. Il met en place la façon dont l'image d'arrière-plan d'un élément doit se comporter et se mélanger avec la couleur d'arrière plan de celui-ci.

Le background-blend-mode peut être :

CSS

background-blend-mode: multiply;

CSS

background-blend-mode: hard-light;

Et bien d'autres...

Syntaxe :

CSS

element {
  background-blend-mode: normal;
}

Tout comme le mix-blend-mode, nous pouvons y ajouter plusieurs valeurs :

CSS

element {
  background-blend-mode: multiply, darken, color-dodge;
}

Attention

Il faut noter que le mix-blend-mode et le background-blend-mode ne fonctionnent pas sur tous les éléments. En général, il fonctionne mieux sur les éléments qui ont une opacité partielle, comme les images ou les éléments avec une couleur de fond transparente.

En résumé, le mix-blend-mode est un propriété CSS qui permet de modifier l'apparence d'un élément en combiant ses couleurs avec celles de son arrière plan. Le background-blend-mode permet de faire exactement la même chose, mais en utilisant les images de fond. En utilisant différents modes de fusion, vous pouvez créer une variété d'effets visuels intéressants pour améliorer le design de votre site web.

Catégorie : Développement