Guillaume Duverger - Développement & Graphisme - Blog

Dernière mise à jour de l'article : mars 2021

CSS blend-mode (mode de fusion d'images) :

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 :

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

Avant d'utiliser les propriétés du module Compositing and Blending Level 1 , un petit tour sur Can I Use vous sera fort utile. Vous pouvez d'ores et déjà oublier la compatibilité avec Internet Explorer.

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

Code :

<div class="votre_class"></div>

.votre_class{

background:url(image.jpg) no-repeat top center,
linear-gradient(to bottom, transparent 80%, hsla(0,0%,0%,1) 100%) fixed,
url(image.jpg) no-repeat center center;
background-size: cover,cover;
background-blend-mode: multiply,normal

}

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.

Photographies utilisées :

Source originale photos .

Code :

<div class="photo1">
<div class="photo2"></div>
</div>

.photo1{

margin: auto;
background: url(image.jpg);
height: 398px;
width: 600px

}

.photo2{

background: url(image.jpg);
height: 398px;
width: 600px;
mix-blend-mode: hard-light

}

La propriété isolation :

Cette propriété s'utilise avec les propriétés mix-blend-mode et background-blend-mode. Elle va permettre d'isoler certains éléments que vous ne souhaitez pas voir se mélanger avec d'autres.

Passez le curseur de votre souris sur l'image ci-dessous :

Code :

<div class="pic">
<img src="image.jpg" alt>
</div>

.pic{

margin: 20px auto;
isolation: isolate;
background: #946fb5;
height: 398px;
width: 600px;
transition: background 1s

}

.pic > img{

mix-blend-mode: overlay

}

.pic:hover{

background: inherit

}

Et si maintenant on appliquait d'autres propriétés comme par exemple un dégradé linéaire, un masque, un filtre, une animation... ou tout cela à la fois...

Blend-modes et dégradés CSS :

Code :

<div class=conteneur>
<img src="4-mini.jpg" class="degra" alt>
<div class="sous_couche degra" id="gradient"></div>
<div>

.conteneur{

min-height: 420px;
position: relative;
overflow: hidden

}

.degra{

position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0%)

}

.degra1{

position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0%)}

img{
z-index:1;
mix-blend-mode: multiply
}

.sous_couche{

z-index: -1;
width: 597px;
height: 400px

}

#gradient{

background: radial-gradient(ellipse,transparent,rgba(0,0,0,1))

}

Code :

<div class=conteneur>
<img src="4-mini.jpg" class="degra1" alt/>
<div class="sous_couche degra1" id="gradient1"></div>
<div>

.conteneur{

min-height: 420px;
position: relative;
overflow: hidden

}

.degra1{

position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0%)

}

img{

z-index:1;
mix-blend-mode:multiply

}

#gradient1{

background: linear-gradient(to right,transparent,hsla(0, 100%, 50%,.4)),
linear-gradient(to left,transparent,hsla(232, 100%, 50%,.6)),
linear-gradient(to bottom,transparent,hsla(51, 100%, 50%, 1)),
linear-gradient(to top,transparent,hsla(116, 100%, 50%,.4))

}

Blend Modes animation CSS :

Blend-modes avec canvas

Code :

<canvas height="400" width="597" id="canvas">
</canvas>

<script>var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'orange';
ctx.beginPath();
ctx.rect(0,0,298.5,400);
ctx.closePath();
ctx.fill();
canvas_img();
function canvas_img()
{
image_canvas = new Image();
image_canvas.src = 'votre_image.jpg';
image_canvas.onload = function(){
ctx.drawImage(image_canvas,0,0);
ctx.globalCompositeOperation = 'darker';
}}
</script>