CSS
Couper et Masquer

Syntaxe

• Coupure
• chemin de clip: <source-clip> | [<basic-shape> || <boîte-géométrie-clip>] | aucun
• Masquage
• image-masque: [aucun | <référence du masque>] #
• mode masque: [<masque-mode>] #
• mask-repeat: [<style de répétition] #
• position du masque: [<position>] #
• masque-clip: [<boîte-de-géométrie> | no-clip] #
• mask-origin: [<boîte-de-géométrie>] #
• taille de masque: [<bg-size>] #
• mask-composite: [<compositing-operator>] #
• mask: [<masque-référence> <mode masquage>? || <position> [/ <bg-size>]? || <style de répétition> || <boîte de géométrie> || [<boîte à géométrie> | no-clip] || <opérateur de composition>] #

Paramètres

Remarques

Clipping (Polygone)

CSS:

div{
  width:200px;
  height:200px;
  background:teal;
  clip-path: polygon(0 0, 0 100%, 100% 50%); /* refer remarks before usage */
}

HTML:

<div></div>

Dans l'exemple ci-dessus, un tracé de découpe polygonal est utilisé pour découper l'élément carré (200 x 200) en une forme de triangle. La forme de sortie est un triangle car le chemin commence à (c'est-à-dire que les premières coordonnées sont à) 0 0 - qui est le coin supérieur gauche de la boîte, puis passe à 0 100% - qui est le coin inférieur gauche et puis finalement à 100% 50% ce qui n'est rien d'autre que le centre droit de la boîte. Ces chemins sont auto-fermants (c'est-à-dire que le point de départ sera le point de fin) et que la forme finale est celle d'un triangle.

Cela peut également être utilisé sur un élément avec une image ou un dégradé en arrière-plan.

Voir l'exemple

Sortie:

Coupure (Cercle)

CSS:

div{
  width: 200px;
  height: 200px;
  background: teal;
  clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}

HTML

<div></div>

Cet exemple montre comment découper un div en cercle. L'élément est découpé dans un cercle dont le rayon est de 30% en fonction des dimensions de la boîte de référence, son centre étant situé au centre de la boîte de référence. Dans la mesure où aucun <clip-geometry-box> (en d'autres termes, zone de référence) n'est fourni, la zone de border-box de l'élément sera utilisée comme zone de référence.

La forme du cercle doit avoir un rayon et un centre avec des (x,y) :

circle(radius at x y)

Voir l'exemple

Sortie:

Clipping and Masking: Aperçu et différence

Avec Clipping and Masking, vous pouvez rendre certaines parties d'éléments transparentes ou opaques. Les deux peuvent être appliqués à n'importe quel élément HTML.

Coupure

Les clips sont des chemins vectoriels. En dehors de ce chemin, l'élément sera transparent, à l'intérieur il est opaque. Par conséquent, vous pouvez définir une propriété de clip-path sur les éléments. Chaque élément graphique existant également dans SVG peut être utilisé ici pour définir le chemin. Les exemples sont circle() , polygon() ou ellipse() .

clip-path: circle(100px at center);

L'élément ne sera visible qu'à l'intérieur de ce cercle, situé au centre de l'élément et ayant un rayon de 100px.

Masquage

Les masques sont similaires aux clips, mais au lieu de définir un chemin, vous définissez un masque sur les calques de l'élément. Vous pouvez imaginer ce masque comme une image composée principalement de deux couleurs: noir et blanc.

Luminance Masque : le noir signifie que la région est opaque et blanche qu'elle est transparente, mais il existe également une zone grise semi-transparente, ce qui vous permet d'effectuer des transitions régulières.

Alpha Mask : Seulement sur les zones transparentes du masque, l'élément sera opaque.

Cette image par exemple peut être utilisée comme masque de luminance pour faire pour un élément une transition très douce de droite à gauche et d'opaque à transparente.

La propriété mask vous permet de spécifier le type de masque et une image à utiliser comme calque.

mask: url(masks.svg#rectangle) luminance;

Un élément appelé rectangle défini dans masks.svg sera utilisé comme masque de luminance sur l'élément.

Masque simple qui fait disparaître une image du solide au transparent

CSS

div {
  height: 200px;
  width: 200px;
  background: url(http://lorempixel.com/200/200/nature/1);
  mask-image: linear-gradient(to right, white, transparent); 
}

HTML

<div></div>

Dans l'exemple ci-dessus, il y a un élément avec une image en arrière-plan. Le masque appliqué sur l’image (à l’aide de CSS) donne l’impression de disparaître de gauche à droite.

Le masquage est réalisé en utilisant un linear-gradient allant du blanc (à gauche) au transparent (à droite) en tant que masque. Comme il s'agit d'un masque alpha, l'image devient transparente là où le masque est transparent.

Sortie sans le masque:

Sortie avec le masque:

Remarque: Comme mentionné dans les remarques, l'exemple ci-dessus fonctionne uniquement avec Chrome, Safari et Opera lorsqu'il est utilisé avec le préfixe -webkit . Cet exemple (avec un linear-gradient tant qu'image de masque) n'est pas encore pris en charge dans Firefox.

Utiliser des masques pour couper un trou au milieu d'une image

CSS

div {
  width: 200px;
  height: 200px;
  background: url(http://lorempixel.com/200/200/abstract/6);
  mask-image: radial-gradient(circle farthest-side at center, transparent 49%, white 50%); /* check remarks before using */
}

HTML

Dans l'exemple ci-dessus, un cercle transparent est créé au centre à l'aide d' radial-gradient et est ensuite utilisé comme masque pour produire l'effet d'un cercle découpé au centre d'une image.

Image sans masque:

Image avec masque:

Utilisation de masques pour créer des images de formes irrégulières

CSS

div { /* check remarks before usage */
  height: 200px;
  width: 400px;
  background-image: url(http://lorempixel.com/400/200/nature/4);
  mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
  mask-size: 75% 25%, 25% 25%, 100% 75%;
  mask-position: bottom left, bottom right, top left;
  mask-repeat: no-repeat;
}

HTML

<div></div>

Dans l'exemple ci-dessus, trois images à linear-gradient (qui, lorsqu'elles sont placées dans leurs positions appropriées, couvrent 100% x 100% de la taille du conteneur) sont utilisées comme masques pour produire une coupe triangulaire transparente au bas de l'image.

Image sans le masque:

Image avec le masque: