Partagez cette démonstration :

Masque et découpage en CSS

Dernière mise à jour : juillet 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 :



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



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



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:

none content-box padding-box border-box margin-box fill-box stroke-box view-box

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 :



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



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



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



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



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



<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` :



<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` :



<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` :



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



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



<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 (tapez ou passez votre souris) :




<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` :



<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

Source, inspiration, ressources :

Compatibilité navigateurs .

Combiner CSS clip-path et shapes ^(EN) .

Comprendre la propriété clip-path ^(EN) .

Article ^(EN) de Chris Coyier.

Article sur le masquage en CSS ^(EN) et SVG.

Générateur en ligne de découpage.

Tutoriel sur les masques et découpages ^(EN) .

Quand utiliser le masquage ou le découpage ^(EN) .

Article formes responsive avec clip-path ^(EN) .

Un bon exemple d'utilisation de la 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

Masque et découpage en CSS

Introduction

Le découpage avec clip-path

-Avec un chemin url()

Valeurs géométriques

En SVG inline :

En pur CSS :

Combinaison boîte et géométrie

Le masquage avec la propriété mask

Exemples propriété mask-image

Avec dégradés CSS :

Avec un chemin url :

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

Exemples avec la propriété mask-mode :

Valeur alpha

Valeur luminance

Exemple avec mask-repeat

Exemples avec la propriété mask-position :

Valeur top left :

Valeur bottom right :

Exemples propriété mask-size :