CSS
Knippen en maskeren

Syntaxis

• knipsel
• clip-path: <clip-source> | [<basic-shape> || <clip-geometry-box>] | geen
• masking
• mask-image: [geen | <masker-referentie>] #
• mask-mode: [<masker-mode>] #
• mask-repeat: [<herhaalstijl] #
• mask-position: [<positie>] #
• mask-clip: [<geometry-box> | geen clip ]#
• mask-origin: [<geometry-box>] #
• mask-size: [<bg-size>] #
• mask-composite: [<compositing-operator>] #
• mask: [<masker-referentie> <masker-modus>? || <positie> [/ <bg-size>]? || <repeat-style> || <geometry-box> || [<geometry-box> | geen clip] || <compositing-operator]] #

parameters

Opmerkingen

Clipping (Polygon)

CSS:

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

HTML:

<div></div>

In het bovenstaande voorbeeld wordt een veelhoekig uitknippad gebruikt om het vierkante (200 x 200) element in een driehoekvorm te knippen. De uitvoervorm is een driehoek omdat het pad begint bij (dat wil zeggen, de eerste coördinaten zijn bij) 0 0 - dat is de linkerbovenhoek van het vak en gaat vervolgens naar 0 100% - dat is de linkeronderhoek van het vak en dan eindelijk tot 100% 50% wat niets anders is dan het middelste rechterpunt van de doos. Deze paden zijn zelfsluitend (dat wil zeggen dat het beginpunt het eindpunt is) en dus is de uiteindelijke vorm die van een driehoek.

Dit kan ook worden gebruikt op een element met een afbeelding of een verloop als achtergrond.

Bekijk voorbeeld

Output:

Clipping (Cirkel)

CSS:

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

HTML

<div></div>

Dit voorbeeld laat zien hoe een div in een cirkel wordt geknipt. Het element wordt in een cirkel geknipt waarvan de straal 30% is op basis van de afmetingen van het referentiekader met het middelpunt in het midden van het referentiekader. Aangezien hier geen <clip-geometry-box> (met andere woorden, referentiekader) is opgegeven, wordt de border-box van het element gebruikt als referentiekader.

De cirkelvorm moet een straal en een middelpunt met (x,y) coördinaten hebben:

circle(radius at x y)

Bekijk voorbeeld

Output:

Knippen en maskeren: overzicht en verschil

Met Clipping and Masking kunt u bepaalde gespecificeerde delen van elementen transparant of ondoorzichtig maken. Beide kunnen op elk HTML-element worden toegepast.

knipsel

Clips zijn vectorpaden. Buiten dit pad is het element transparant, binnen is het ondoorzichtig. Daarom kunt u een clip-path op elementen definiëren. Elk grafisch element dat ook in SVG bestaat, kunt u hier als functie gebruiken om het pad te definiëren. Voorbeelden zijn circle() , polygon() of ellipse() .

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

Het element is alleen zichtbaar binnen deze cirkel, die zich in het midden van het element bevindt en een straal van 100 px heeft.

masking

Maskers zijn vergelijkbaar met Clips, maar in plaats van een pad te definiëren, definieert u een masker dat op het element wordt geplaatst. Je kunt je dit masker voorstellen als een afbeelding die hoofdzakelijk uit twee kleuren bestaat: zwart en wit.

Luminantiemasker : zwart betekent dat het gebied ondoorzichtig is en wit dat het transparant is, maar er is ook een grijs gebied dat semi-transparant is, zodat u vloeiende overgangen kunt maken.

Alfa-masker : alleen op de transparante delen van het masker is het element ondoorzichtig.

Deze afbeelding kan bijvoorbeeld worden gebruikt als een luminantiemasker om voor een element een zeer vloeiende overgang te maken van rechts naar links en van ondoorzichtig naar transparant.

Met de eigenschap mask kunt u het maskertype en een afbeelding opgeven die als laag moet worden gebruikt.

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

Een element genaamd rectangle gedefinieerd in masks.svg zal worden gebruikt als een luminantiemasker op het element.

Eenvoudig masker dat een afbeelding vervaagt van effen naar transparant

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>

In het bovenstaande voorbeeld is er een element met een afbeelding als achtergrond. Het masker dat op de afbeelding wordt toegepast (met behulp van CSS) zorgt ervoor dat het lijkt alsof het van links naar rechts vervaagt.

Het maskeren wordt bereikt door een linear-gradient dat van wit (links) naar transparant (rechts) gaat als het masker. Omdat het een alpha-masker is, wordt de afbeelding transparant waar het masker transparant is.

Uitvoer zonder het masker:

Uitvoer met het masker:

Opmerking: Zoals vermeld in opmerkingen, zou het bovenstaande voorbeeld alleen werken in Chrome, Safari en Opera wanneer gebruikt met het voorvoegsel -webkit . Dit voorbeeld (met een linear-gradient als maskerafbeelding) wordt nog niet ondersteund in Firefox.

Maskers gebruiken om een gat in het midden van een afbeelding te maken

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

In het bovenstaande voorbeeld wordt een transparante cirkel gemaakt in het midden met behulp van een radial-gradient en dit wordt vervolgens gebruikt als een masker om het effect te produceren van een cirkel die uit het midden van een afbeelding wordt uitgesneden.

Afbeelding zonder masker:

Afbeelding met masker:

Maskers gebruiken om afbeeldingen met onregelmatige vormen te maken

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>

In het bovenstaande voorbeeld worden drie linear-gradient (die op de juiste posities geplaatst 100% x 100% van de grootte van de container bedekken) gebruikt als maskers om een transparante driehoekige snede aan de onderkant van de afbeelding te produceren.

Afbeelding zonder het masker:

Afbeelding met het masker: