Admin/Dev

10
Avril
2021

Astuce CSS : Afficher l'intersection de deux éléments HTML

Publié par sky

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.

Blocs en mode normal

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

Blocs avec une multiplication

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;}

Attention aux couleurs positionnées en dessous

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

Le mélange des couleurs est isolé pour un résultat parfait

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Captcha indisponible
Pour valider le formulaire, vous devez confirmer que vous êtes bien une personne. Actuellement, la fonctionnalité est indisponible. Vous devez activer le service ReCaptcha dans le gestionnaire des cookies, et donc consentir à l'utilisation de ses cookies.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
ReCaptcha  En savoir plus
Permet de valider que les visiteurs sont bien des humains lorsqu'ils valident des formulaires.
 
Tout accepter Tout refuser Gérer