Admin/Dev

Voici une petite astuce qui peut être pratique et/ou rigolote. Elle permet de montrer l'intersection de deux blocs HTML.

Imaginons 2 blocs HTML, disposés l'un au dessus de l'autre.

.bloc1 {position:absolute; top:200px; left:200px; width:200px; height:200px; background:red;}
.bloc2 {position:absolute; top:250px; left:250px; width:200px; height:200px; background:blue;}

Telle que c'est présenté ici, on voit bien le bloc bleu au dessus du bloc rouge.

Maintenant, appliquons le style permettant de montrer l'intersection entre les deux.

.bloc1 {position:absolute; top:200px; left:200px; width:200px; height:200px; background:red;}
.bloc2 {position:absolute; top:250px; left:250px; width:200px; height:200px; background:blue; mix-blend-mode:multiply;}

et voici le résultat

Dans l'exemple, nous avons utilisé la valeur "multiply", qui, comme son nom l'indique, multiplie les deux fonds. Il existe de nombreuses valeurs qui permettront d'adapter le visuel de l'intersection à vos besoins : normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.

A noter tout de même que l'intersection se fait sur toutes les couches sous-jacentes. Ainsi si l'on met un fond de couleur au body, par exemple du vert

body {background:green;}
.bloc1 {position:absolute; top:200px; left:200px; width:200px; height:200px; background:red;}
.bloc2 {position:absolute; top:250px; left:250px; width:200px; height:200px; background:blue; mix-blend-mode:multiply;}

Le bloc bleu multiplie le rouge et le bleu, mais aussi la couleur du fond et du bleu, pour un bloc totalement noir. Le résultat n'est pas vraiment celui attendu.

Evidemment, nous pouvons ajouter un bloc parent contenant les deux blocs, et lui mettre un fond blanc pour que cela ne soit pas dénaturé.

body {background:green;}
.parent {position:relative; with:600px; height:600px; background:white;}
.bloc1 {position:absolute; top:200px; left:200px; width:200px; height:200px; background:red;}
.bloc2 {position:absolute; top:250px; left:250px; width:200px; height:200px; background:blue; mix-blend-mode:multiply;}

Mais finalement, cette solution ne permet pas de retourner le résultat souhaité. Heureusement, il existe une autre propriété CSS qui permet d'isoler les modifications. Ajoutons donc cette propriété à notre bloc parent, tout en retirant le fond blanc.

body {background:green;}
.parent {position:relative; with:600px; height:600px; isolation:isolate;}
.bloc1 {position:absolute; top:200px; left:200px; width:200px; height:200px; background:red;}
.bloc2 {position:absolute; top:250px; left:250px; width:200px; height:200px; background:blue; mix-blend-mode:multiply;}

Pour un résultat, comme espéré.