Partagez cet article :

Masque et découpage en CSS

Dernière mise à jour : avril 2022

Introduction

Masquer (masking) et découper (clipping) permettent de masquer certaines parties d'un élément. Il existe pourtant des différences entre les deux.

Alors que l'écrêtage (ou découpage) définit une région de rognage et coupe par conséquent tout ce qui ne fait pas partie de la région, le masquage va, quant à lui, filtrer les parties visibles d'un élément.

Déjà présents dans SVG, ces deux notions sont apparues dans CSS Masking Module Level 1 avec les propriétés clip-path et mask.


Le découpage avec clip-path

La propriété clip-path peut être appliquée à n'importe quel élément HTML soit en utilisant un chemin défini avec une URL qui fait référence à un SVG externe ou en ligne, soit à l'aide de formes géométriques introduites avec les formes CSS.

On peut définir la propriété clip-path avec une ou plusieurs des valeurs suivantes :

-Avec un chemin url()

Cette url de référence contiendra un chemin de rognage (élément SVG clipPath), comme sur l'exemple ci-dessous :

exemple clip path avec url


<svg width=0 height=0>
<defs>
<clipPath id="decoupage">
<circle cx="210" cy="105" r="105" />
</clipPath>
</defs>
</svg>

<img src="image.jpg" alt>




img {

  clip-path: url(#decoupage);
  
}


Il faut bien penser à reporter le nom de l'identifiant dans l'élément SVG <clipPath> ainsi que dans l'url de la propriété CSS clip-path.

Valeurs géométriques

Utilisons maintenant le type <basic-shape> avec ses différentes fonctions :

  • - inset()
  • - circle()
  • - ellipse()
  • - polygon()

Exemple ci-dessous avec la fonction polygon(). J'ai découpé le ciel et la mer, ne laissant apparaître que l'herbe au premier plan (notez la perfection du détourage 😃).

En SVG inline :

exemple clip path svg inline


<svg width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="0 280,421 279,421 203,378 198,352 216,322 203,304 211,229 194,171 209,113 207,79 222,0 213"/>
</clipPath>
</svg>

<svg width="420" height="279" viewBox="0 0 420 279">
<image href="image.jpg" width="420" height="279" clip-path="url(#clipPolygon)"/>	
</svg>


En pur CSS :

exemple clip path pure css


img{
clip-path: polygon(
0px 280px,
421px 279px,
421px 203px,
378px 198px,
352px 216px,
322px 203px,
304px 211px,
229px 194px,
171px 209px,
113px 207px,
79px 222px,
0px 213px)

}
  

Combinaison boîte et géométrie

La propriété clip-path peut également prendre des valeurs de boîte:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor venenatis volutpat. Curabitur iaculis dapibus est in commodo. Donec ut rutrum arcu, at malesuada leo. Sed lobortis convallis elit, nec fringilla eros pretium eu. Nunc iaculis nec ante nec dictum. Cras hendrerit, mi id pharetra pellentesque, velit nunc pretium turpis, sit amet imperdiet quam enim lobortis quam. Ut tincidunt molestie ullamcorper. Aliquam lorem tortor, pulvinar eget sem ac, vulputate ullamcorper arcu. Vestibulum cursus ullamcorper ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor venenatis volutpat. Curabitur iaculis dapibus est in commodo. Donec ut rutrum arcu, at malesuada leo. Sed lobortis convallis elit, nec fringilla eros pretium eu. Nunc iaculis nec ante nec dictum. Cras hendrerit, mi id pharetra pellentesque, velit nunc pretium turpis, sit amet imperdiet quam enim lobortis quam. Ut tincidunt molestie ullamcorper. Aliquam lorem tortor, pulvinar eget sem ac, vulputate ullamcorper arcu. Vestibulum cursus ullamcorper ultrices.

Support Firefox pour la plupart des valeurs.


Le masquage avec la propriété mask

La propriété mask permet d'afficher des parties sélectionnées d'un élément ou d'une image sur l'écran tout en masquant le reste.

Cette propriété est un raccourci pour les propriétés suivantes :

  • - mask-image
  • - mask-mode
  • - mask-repeat
  • - mask-position
  • - mask-clip
  • - mask-origin
  • - mask-size
  • - mask-composite

Par ailleurs, il existe deux types de masque :

  • - mask-type : luminance
  • - mask-type : alpha (ou transparent)

Exemples propriété mask-image

Avec dégradés CSS :

Exemple avec masque dégradé


<img src="image.jpg" width="420" height="279" class="mask-image1" alt="Exemple avec masque dégradé">




.mask-image1 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
  mask-image: linear-gradient(to bottom, transparent 25%, black 75%);
}
	
	

Avec un chemin url :

Exemple avec masque url


<img src="image.jpg" width="420" height="279" class="mask-image2" alt="Exemple avec un chemin url"> 



	
.mask-image2{  

mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 8 8'%3E%3Cg fill='%23ffffff' fill-opacity='.8'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
mask-repeat:no-repeat;	

}


Exemple propriété mask-image avec CSS/SVG :

exemple mask-image avec CSS/SVG


<svg width="0" height="0" viewBox="0 0 420 279">
<defs>
<mask id="svg-mask">
<rect fill="black" x="0" y="0" width="420" height="279"/>
<circle fill="white" cx="210" cy="50%" r="30%"/>
</mask>
</defs>
</svg>
<img src="image.jpg" width="420" height="279" class="mask-image3" alt="Exemple avec SVG">




.mask-image3 {
 -webkit-mask-image: url(#svg-mask);
 mask-image: url(#svg-mask);
}
	

Exemples avec la propriété mask-mode :

Valeur alpha

Exemple avec mask-mode alpha


<img class="alpha" src="image.jpg" alt>




.alpha {

-webkit-mask-image: url(image.png);
mask-image: url(image.png);
mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
	
}


Valeur luminance

Exemple avec mask-mode luminance


<img class="luminance" src="image.jpg" alt>




-webkit-mask-image: url(image.png);
mask-image: url(image.png);
mask-mode: luminance;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%


Exemple avec mask-repeat

Exemple avec mask-repeat


<img class="mask-repeat" src="image.jpg" alt>





-webkit-mask-image: url(image.png);
mask-image: url(image.png);
-webkit-mask-repeat: space;
mask-repeat: space;
-webkit-mask-size: 20px 20px;
mask-size: 20px 20px


Exemples avec la propriété mask-position :

Valeur top left :

exemple mask position top left


<img class="mask-position mask-pos-top" src="image.jpg" alt>




.mask-position {

-webkit-mask-image: url(image.png);
mask-image: url(image.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 80%;
mask-size: 80%
	
}

.mask-pos-top  {
	
-webkit-mask-position: 0 0;
mask-position: 0 0
	
}



Valeur bottom right :

exemple mask position bottom right


<img class="mask-position mask-pos-bottom" src="image.jpg" alt>




.mask-position {

-webkit-mask-image: url(image.png);
mask-image: url(image.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 80%;
mask-size: 80%
	
}


.mask-pos-bottom {

-webkit-mask-position: 100% 100%;
mask-position: 100% 100%
	
}	

Exemples propriété mask-size :

exemple mask size


<img class="mask-size centre" src="image.jpg" alt>




.mask-size {

-webkit-mask-image: url(image.png);
mask-image: url(image.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;	
-webkit-mask-size: 50%;
mask-size: 50%;
}




Exemple avec le mot-clé contain :

exemple mask size contain


<img class="mask-size contenu" src="image.jpg" alt>




.mask-size {

-webkit-mask-image: url(image.png);
mask-image: url(image.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;	
-webkit-mask-size: contain;
mask-size: contain
	
}	



Animation masque et découpage

Il est possible d'animer les propriétés CSS clip-path et mask, soit avec les transitions CSS, soit avec les animations CSS.

Exemples animation et transition clip-path :

Animation CSS :

exemple animation clip path exemple animation clip path


<div class="anim anim1"></div>





.anim {
	
display: inline-flex;
width: 250px;
height: 250px;
background: purple;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
  
	}
	



Transition CSS (passez votre souris) :

exemple animation clip path



<div class="anim transition"></div>




.anim {
	
display: inline-flex;
width: 250px;
height: 250px;
background: purple;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
  
	}
	
.transition{
	
	transition: 1s
	
	}
	
	
.transition:hover{
	
clip-path:polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)
	
	}	


Exemple animation propriété mask :

exemple animation mask exemple animation mask


<div class="anim-mask">
<img src="image.jpg" alt>
</div>




.anim-mask{ 

margin: 2rem auto;
width: 420px

}
	
.anim-mask img {

-webkit-mask: url("image.png");
mask: url("image.png");
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;   
-webkit-mask-position: 0 0;
mask-position: 0 0;

}
	
.anim-mask img:hover {

  animation: anim-mask .8s steps(22) forwards
	  
}

@keyframes anim-mask {
	
to {
	
-webkit-mask-position: 100% 0;
mask-position: 100% 0
	
  }
	
}
	


Animation inspirée de cette démonstration .

Voir sur ce blog :

Article CSS morphing

masque sur texte

animation propriété mask


Vous rencontrez un problème avec cet article ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.

haut page