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.
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 :
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: color-dodge;
Voici une liste de tous les mix-blend-mode
possibles :
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 :
element {
mix-blend-mode: normal;
}
Il est important de préciser que l'on peut également les associer pour y ajouter plusieurs valeurs :
element {
mix-blend-mode: multiply, darken, color-dodge;
}
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 :
background-blend-mode: multiply;
background-blend-mode: hard-light;
Et bien d'autres...
Syntaxe :
element {
background-blend-mode: normal;
}
Tout comme le mix-blend-mode, nous pouvons y ajouter plusieurs valeurs :
element {
background-blend-mode: multiply, darken, color-dodge;
}
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.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.