CSS blend-mode (mode de fusion)

Partagez cet article :

Mise en ligne : novembre 2018. Dernière mise à jour : juillet 2023

Introduction

Avec CSS, il est de plus en plus facile de se passer d'éditeurs graphiques tels que Photoshop pour ne nommer que lui. Ci-dessous, le blending mode de Photoshop :

En effet, les modes de fusion sont couramment utilisés dans les programmes de conception graphique afin de créer, entre autres, un effet de composition en mélangeant les couleurs de deux calques ou parfois plus.

En changeant la manière dont les couleurs se mélangent, nous pouvons obtenir de nombreux effets visuels que nous verrons dans cet article. Nous pouvons également utiliser les modes de fusion pour isoler une image et bien plus encore.

En outre, nous aborderons trois notions essentielles qui composent le premier module CSS Compositing and Blending, à savoir :

- La propriété mix-blend-mode qui applique une fusion à un élément entier.
- La propriété background-blend-mode dont la fusion se destine à l'arrière-plan d'un élément.
- La propriété isolation qui permet d'isoler un ou plusieurs éléments afin qu'ils ne se mélangent pas.

Liste des modes utilisables

Vous pouvez donc, avec CSS, appliquer des couches sur des images. Ci dessous, la liste des modes utilisables :

Normal Multiply Screen Overlay Darken Lighten Color-dodge Color-burn Hard-light Soft-light Difference Exclusion Hue Saturation Color Luminosity *Plus-lighter

Chaque mode utilise une formule de couleur spécifique pour mélanger les couleurs de la source et de la destination.

En effet, lors de la composition de deux éléments, celui se trouvant dessous est appelé destination tandis que celui du haut est nommé source. Le mélange qui se produit derrière la couche supérieure devient la toile de fond (backdrop).

^*Le mode de fusion plus-lighter (apparu dans le niveau 2 du module) permet à deux éléments de se fondre en changeant leur opacité de 0 à 1 sur un élément et de 1 à 0 sur l'autre élément, conservant ainsi les pixels communs non modifiés. Cette opération est surtout utile lors d'un fondu enchaîné entre deux éléments pouvant contenir des pixels communs.

Ci-dessous, un exemple d'utilisation de ce mode de fusion (passez votre souris) :

CSS 2

CSS 3

Propriété `background-blend-mode`

La propriété background-blend-mode permet à une image de fusionner son arrière-plan avec l'arrière-plan de la page (couleur ou image). Autrement dit, si vous mettez un arrière-plan noir dans une page et que vous placez une image par dessus, celle-ci se mélangera avec l'arrière-plan de la page.

Ci-dessous, un effet très connu, à savoir la double exposition, qui consiste à associer deux images en inscrustant la seconde dans la première :

voir en plein écran

Propriété `mix-blend-mode`

Contrairement à la propriété background-blend-mode qui ne vise que les arrières-plan, la propriété mix-blend-mode s'applique à n'importe quel élément (images, textes...)

Avec la propriété mix-blend-mode, votre élément sera mélangé à tous les éléments se trouvant en dessous de celui-ci.

Ci-dessous un exemple de "knock out" obtenu en utilisant le mode de fusion mix-blend-mode: screen. Simple à mettre en place. Il suffit d'un arrière-plan ou une image, puis de placer dessus un fond blanc ainsi que du texte et d'y ajouter le mode de fusion.



<div class=demo>

<img src="image.jpg" alt>

<h2>Texte</h2>

<div>



.demo{position:relative}	
.demo img{width:100%}
.demo h2{
position:absolute;
top: 50%;
margin:0;
left:0;
transform:translate(0,-50%);
background: white;
mix-blend-mode:screen;
font-weight: 900;
padding:1rem;
font-size:20vmin;
text-transform:uppercase;
}

Avec le mode de fusion mix-blend-mode: difference, nous obtenons une inversion de valeurs. Ci-dessous, un exemple avec un fond blanc. On place un texte blanc dessus avec le mode de fusion. Le résultat donne un texte noir. Nous avons également l'impression que le texte passe derrière l'arbre.



.demo{position:relative}

.demo img{width:100%;}

.demo h2{

margin:0;
position: absolute;
left:30%;
top:0%;
color: white;
mix-blend-mode:difference;
font-weight: 900;
font-size:10vw;
text-transform:uppercase;

}

Nous pouvons multiplier les calques et ainsi donner différents effets, comme dans l'exemple ci-dessous avec un effet vintage :

voir en plein écran

La propriété `isolation` :

Cette propriété permet de créer un nouveau contexte d'empilement, ce qui va l'empêcher de fusionner avec un arrière-plan.

Elle s'utilise avec la propriété mix-blend-mode, mais pas avec la propriété background-blend-mode, la propriété background étant déjà isolée. Elle va permettre d'isoler certains éléments que vous ne souhaitez pas voir se mélanger avec d'autres.

Dans l'exemple ci-dessous, nous souhaitons que le texte se mélange avec l'arrière-plan mais pas l'image. Passez votre souris sur le cadre, vous constaterez que nous excluons l'image de tout mode de fusion :

Isolation



<div class="isolate">

<div>

<img src="image.jpg" alt>

<h2>texte</h2>

</div>
</div>



.isolate{

padding:1rem;
margin:2rem auto;
background:#897be5;

}

.isolate div{

display: grid;
isolation: isolate;
}

.isolate div > *{

grid-area: 1/1;
mix-blend-mode: multiply

}


.isolate span{

color:white;
place-self:center;
mix-blend-mode:overlay;
font-size:10vw;

}

Un autre exemple d'utilisation de la propriété isolation, qui va nous servir ici à créer un overlay sur une image pour laisser apparaître du texte :

voir en plein écran

Blend-modes et dégradés CSS

Nous pouvons ajouter des dégradés sur des images avec les propriétés background-blend-mode et mix-blend-mode et ainsi obtenir de très beaux rendus.

En ce qui concerne le cas d'une fusion sur une image, nous devrons ajouter un élément HTML ou nous servir d'un pseudo-élément CSS pour ajouter un dégradé puisque l'élément HTML img est un objet remplacé (on ne peut pas directement placer un dégradé dessus).



<div class=demo-degrade-mix>

<img src="image.jpg">

</div>



.demo-degrade-mix{
	
display: grid;
max-width: 960px;
aspect-ratio: 3/2;
margin: 2rem auto
	
	}	
	
.demo-degrade-mix img{

grid-area:1/1;	
height: 100%;
width: 100%;
display: block;
object-fit: cover

	}
	
.demo-degrade-mix::after{

content:'';
grid-area: 1/1;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) );
mix-blend-mode: multiply
	
}

Dans le cas d'une fusion avec deux arrière-plans, c'est beaucoup plus simple. Il suffit de placer dans la même déclaration CSS une image, puis un dégradé :



<div class=demo-degrade-bg></div>



.demo-degrade-bg{

max-width:960px;
aspect-ratio:3/2;
margin:2rem auto;
background:url(di-maitland-lLDFfJ4caAU-unsplash.jpg) no-repeat center/cover,linear-gradient(45deg,cyan,magenta);
background-blend-mode:multiply;

}

Les modes de fusion vont se révéler particulièrement utiles sur du texte. En effet, la propriété background-clip et sa valeur non officielle text n'est pas très bien supportée. Du moins, elle l'est, mais avec le préfixe -webkit- pour les navigateurs blink/webkit.

La compatibilité des modes de fusion étant étendue depuis longtemps, cette méthode a donc un avantage certain.

voir en plein écran

Vous trouverez plusieurs exemples sur ce blog avec la propriété background-clip.

Blend-modes et filtres CSS :

Contrairement aux modes de fusion dont l'objectif, nous l'avons vu à mesure de l'article, sont de mélanger des images ou du texte, les filtres CSS appliquent des effets directement sur un élément.

En faisant cohabiter les deux modules, nous pouvons créer des rendus graphiques complexes très simplement.

Ci-dessous, un exemple dans lequel nous appliquons un dégradé fusionné sur un arrière-plan, qui possède lui-même plusieurs valeurs de filtre :



<div class=blend-filter>

<h1>Love</h1>

</div>



.blend-filter {
	
display:grid;
aspect-ratio:3/2;width:960px;
background: url("image.jpg") no-repeat center/cover;
filter: saturate(50%) contrast(125%) hue-rotate(25deg) sepia(20%);
}
	
.blend-filter>*{grid-area:1/1;}
	
.blend-filter::after {
	
grid-area:1/1;
content: "";
opacity: 0.75;
background: linear-gradient(to right, #2fb6a6, #DE3375);
mix-blend-mode: hard-light;

}
	
.blend-filter h1 {
 
place-self:center;
padding: 0 2rem;
font-size: 10vw;
color: #fff;
text-transform: uppercase;
font-weight: bold;
border: 10px solid #fff;
mix-blend-mode: soft-light;
	

}

voir en plein écran

Blend Modes animation CSS :

Nous ne pouvons pas animer les modes de fusion en CSS. Néanmoins, nous avons la possibilité d'utiliser d'autres propriétés CSS conjointement, et ainsi obtenir de belles animations ou transitions.

voir en plein écran

Dans l'exemple ci-dessous, nous appliquons un dégradé sur le texte. Nous allons ensuite fondre ce texte avec les modes de fusion et plus particulièrement mix-blend-mode. Enfin, nous utilisons l'API scroll-driven animation qui va nous servir à devoiler le texte en scrollant.

voir en plein écran