CSS
Ritaglio e mascheratura

Sintassi

• Ritaglio
• clip-path: <clip-source> | [<forma base> || <clip-geometry-box>] | nessuna
• mascheramento
• immagine-maschera: [nessuno | <riferimento-maschera>] #
• mask-mode: [<mask-mode>] #
• mask-repeat: [<stile di ripetizione] #
• posizione della maschera: [<posizione>] #
• mask-clip: [<geometry-box> | no-clip] #
• origine maschera: [<geometria-box>] #
• dimensione maschera: [<bg-size>] #
• mask-composite: [<compositing-operator>] #
• maschera: [<riferimento maschera> <modalità mascheratura>? || <position> [/ <bg-size>]? || <stile di ripetizione> || <geometry-box> || [<geometry-box> | no-clip] || <compositing-operator>] #

Parametri

Osservazioni

Ritaglio (poligono)

CSS:

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

HTML:

<div></div>

Nell'esempio sopra, un tracciato di ritaglio poligonale viene utilizzato per ritagliare l'elemento quadrato (200 x 200) in una forma triangolare. La forma di output è un triangolo perché il percorso inizia da (ovvero, le prime coordinate sono a) 0 0 - che è l'angolo in alto a sinistra della casella, quindi passa a 0 100% - che è l'angolo in basso a sinistra della casella e infine al 100% 50% che non è altro che il punto medio-centrale della scatola. Questi percorsi sono auto-chiudenti (cioè, il punto di partenza sarà il punto finale) e quindi la forma finale è quella di un triangolo.

Questo può anche essere usato su un elemento con un'immagine o un gradiente come sfondo.

Visualizza esempio

Produzione:

Ritaglio (Cerchio)

CSS:

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

HTML

<div></div>

Questo esempio mostra come tagliare un div a un cerchio. L'elemento è ritagliato in un cerchio il cui raggio è il 30% in base alle dimensioni della casella di riferimento con il suo punto centrale al centro della casella di riferimento. Qui dal momento che non viene fornita la <casella di clip-geometria> (in altre parole, casella di riferimento), la border-box di border-box dell'elemento verrà utilizzata come casella di riferimento.

La forma del cerchio deve avere un raggio e un centro con le coordinate (x,y) :

circle(radius at x y)

Visualizza esempio

Produzione:

Ritaglio e mascheratura: panoramica e differenza

Con il ritaglio e il mascheramento puoi rendere alcune parti specifiche degli elementi trasparenti o opache. Entrambi possono essere applicati a qualsiasi elemento HTML.

Ritaglio

Le clip sono percorsi vettoriali. Al di fuori di questo percorso l'elemento sarà trasparente, all'interno è opaco. Pertanto è possibile definire una proprietà clip-path sugli elementi. Ogni elemento grafico che esiste anche in SVG puoi usare qui come una funzione per definire il percorso. Gli esempi sono circle() , polygon() o ellipse() .

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

L'elemento sarà visibile solo all'interno di questo cerchio, che è posizionato al centro dell'elemento e ha un raggio di 100 px.

mascheramento

Le maschere sono simili alle clip, ma invece di definire un percorso si definisce una maschera su quali livelli si sovrappongono all'elemento. Puoi immaginare questa maschera come un'immagine che consiste principalmente di due colori: bianco e nero.

Maschera di luminanza : il nero indica che la regione è opaca e bianca che è trasparente, ma esiste anche un'area grigia che è semitrasparente, quindi è possibile effettuare transizioni omogenee.

Maschera Alpha : solo sulle aree trasparenti della maschera l'elemento sarà opaco.

Questa immagine, ad esempio, può essere utilizzata come maschera di luminanza per rendere un elemento una transizione molto fluida da destra a sinistra e da opaca a trasparente.

La proprietà mask consente di specificare il tipo di maschera e un'immagine da utilizzare come layer.

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

Un elemento chiamato rectangle definito in masks.svg verrà utilizzato come maschera di luminanza sull'elemento.

Maschera semplice che dissolve un'immagine da solida a trasparente

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>

Nell'esempio sopra c'è un elemento con un'immagine come sfondo. La maschera applicata all'immagine (usando i CSS) fa sembrare che si stia dissolvendo da sinistra a destra.

Il mascheramento si ottiene utilizzando un linear-gradient che va dal bianco (a sinistra) a trasparente (a destra) come maschera. Essendo una maschera alfa, l'immagine diventa trasparente dove la maschera è trasparente.

Uscita senza maschera:

Uscita con la maschera:

Nota: come accennato in precedenza, l'esempio precedente funzionerebbe in Chrome, Safari e Opera solo se usato con il prefisso -webkit . Questo esempio (con un linear-gradient come immagine maschera) non è ancora supportato in Firefox.

Utilizzo di maschere per tagliare un buco nel mezzo di un'immagine

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

Nell'esempio sopra, un cerchio trasparente viene creato al centro usando il radial-gradient e viene quindi utilizzato come maschera per produrre l'effetto di un cerchio che viene ritagliato dal centro di un'immagine.

Immagine senza maschera:

Immagine con maschera:

Utilizzo di maschere per creare immagini con forme irregolari

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>

Nell'esempio sopra, tre immagini a linear-gradient (che quando sono posizionate nelle posizioni appropriate coprono il 100% x 100% delle dimensioni del contenitore) vengono utilizzate come maschere per produrre un taglio triangolare trasparente nella parte inferiore dell'immagine.

Immagine senza maschera:

Immagine con la maschera: