Tracciati, forme, ritaglio e mascheratura

Il rendering HTML si basa sul modello a scatole, ma la vita (e il web design) non è fatta solo di rettangoli. CSS supporta diversi modi per modificare le aree di un elemento sottoposte a rendering, offrendo agli sviluppatori la libertà di creare design che supportano tutte le forme e le dimensioni. Il ritaglio consente di creare forme geometriche, mentre il mascheramento influisce sulla visibilità a livello di pixel.

Tracciati e forme

CSS utilizza funzioni per definire le forme. Forniamo informazioni generali sulle funzioni nel modulo Funzioni CSS. In questa sezione, imparerai a creare forme in CSS. Tutti gli esempi seguenti utilizzano le forme create con la proprietà clip-path, che riduce l'area visibile solo a ciò che si trova all'interno della forma. In questo modo, gli elementi possono differire visivamente dalla casella dell'elemento. Tratteremo il ritaglio in modo più dettagliato in un secondo momento.

Le forme definite in CSS possono essere forme di base (come cerchi, rettangoli e poligoni) o percorsi (che possono definire forme complesse e composte).

Forme di base

circle() e ellipse()

Le funzioni circle() e ellipse() definiscono forme rotonde e ovali con raggi relativi a un elemento. La funzione circle() accetta una singola dimensione o percentuale come argomento. Per impostazione predefinita, entrambe le funzioni posizionano la forma rispetto al centro dell'elemento. Entrambi accettano una posizione facoltativa dopo la parola chiave at, che può essere espressa come lunghezze, percentuali o parole chiave posizionali.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

L'esempio precedente mostra un tracciato di ritaglio circolare che utilizza la funzione circle(). Tieni presente che un raggio di 50% crea un cerchio della larghezza totale dell'elemento. La funzione ellipse() accetta due argomenti che rappresentano i raggi orizzontale e verticale della forma.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

L'esempio precedente mostra un percorso di ritaglio ellittico utilizzando la funzione ellipse(). Tieni presente che un raggio del 50% crea un'ellisse della larghezza totale dell'elemento. L'esempio seguente mostra la stessa ellisse posizionata con il centro nella parte superiore dell'elemento.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() e inset()

Le funzioni rect() e inset() forniscono diversi modi per definire un rettangolo impostando la posizione dei suoi lati rispetto ai lati di un elemento. In questo modo puoi creare rettangoli che differiscono visivamente dalla casella predefinita dell'elemento. Accettano facoltativamente la parola chiave round per creare un rettangolo con angoli arrotondati, utilizzando la stessa sintassi della proprietà abbreviata border-radius.

La funzione rect() definisce la posizione dei lati superiore e inferiore del rettangolo rispetto al bordo superiore dell'elemento e dei lati sinistro e destro rispetto al bordo sinistro dell'elemento. Questa funzione accetta quattro unità di dimensione o percentuale come argomenti che definiscono i lati superiore, destro, inferiore e sinistro. Puoi scegliere la funzione rect() quando vuoi un rettangolo che non venga scalato quando le dimensioni dell'elemento cambiano o che mantenga le stesse proporzioni al variare dell'elemento.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

L'esempio precedente mostra un percorso di ritaglio rettangolare definito utilizzando la funzione rect(). Le dimensioni sono relative ai bordi superiore e sinistro dell'elemento, come mostrato nel diagramma.

La funzione inset() definisce la posizione dei lati di un rettangolo in base alla distanza verso l'interno da ciascun lato di un elemento. Questa funzione accetta da una a quattro unità di dimensione o percentuale come argomenti, consentendoti di definire più lati contemporaneamente. Potresti scegliere la funzione inset() quando vuoi un rettangolo che si adatti alle dimensioni dell'elemento o un rettangolo che abbia una distanza fissa dai bordi dell'elemento.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

L'esempio precedente mostra un percorso di ritaglio rettangolare definito utilizzando la funzione inset(). Le dimensioni sono relative ai lati dell'elemento.

Le funzioni rect() e inset() accettano facoltativamente la parola chiave round per creare un rettangolo con angoli arrotondati, utilizzando la stessa sintassi della proprietà abbreviata border-radius. L'esempio seguente mostra le versioni arrotondate dei rettangoli mostrati in precedenza.

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

Per altre forme, come triangoli, pentagoni, stelle e così via, la funzione polygon() ti consente di creare forme collegando più punti con linee rette. La funzione polygon() accetta un elenco di coppie costituite da due unità di lunghezza o percentuale. Ogni coppia descrive un punto del poligono: il primo valore è la distanza dal bordo sinistro dell'elemento, il secondo è la distanza dal bordo superiore dell'elemento. Non è necessario chiudere il poligono, perché verrà completato collegando l'ultimo punto al primo.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

L'esempio precedente crea un tracciato di ritaglio triangolare definendo tre punti.

Per impostazione predefinita, la funzione polygon() esegue il rendering delle aree sovrapposte come riempite. Puoi modificare questo comportamento con un primo argomento facoltativo chiamato regola di riempimento. Per alternare le aree piene e non piene, imposta la regola di riempimento su evenodd. Per utilizzare la regola di riempimento predefinita, impostala su nonzero.

L'esempio precedente mostra la funzione polygon() con funzioni trigonometriche per creare poligoni regolari e forme a stella. In questo modo non viene creato il poligono regolare più grande possibile che si adatta all'interno di un elemento o lo centra. Lasciamo a te il compito di provare. Le forme a stella in questo esempio mostrano anche le regole di riempimento nonzero e evenodd.

Forme complesse

Quando le funzioni di forma di base non sono sufficienti per descrivere una forma complessa, CSS fornisce funzioni che utilizzano una sintassi più sofisticata per descrivere caratteristiche come curve e linee. Queste funzioni sono utili anche per le forme composte (forme costituite da più forme, ad esempio un cerchio con un foro).

path()

La funzione path() accetta una stringa di sintassi del percorso SVG per descrivere una forma. Ciò consente di creare forme complesse utilizzando istruzioni che descrivono le linee e le curve che compongono la forma. La modifica diretta della sintassi SVG può essere complicata, pertanto ti consigliamo di prendere in considerazione un editor visivo dedicato in grado di esportare la sintassi durante la creazione di forme con la funzione path().

La funzione path() non utilizza unità di dimensionamento CSS e tutti i valori vengono interpretati come pixel. Ciò significa che le forme create con la funzione path non sono reattive alle dimensioni dell'elemento o del contenitore. Ti consigliamo di utilizzare path() solo per le forme con dimensioni fisse.

shape()

La funzione shape() utilizza una sintassi di comando per descrivere una forma, in modo simile alla funzione path(). Tuttavia, i comandi della funzione shape() sono CSS nativi e possono utilizzare le unità di dimensione CSS. In questo modo, le forme definite utilizzando la funzione shape() possono essere ridimensionate in modo reattivo.

L'esempio precedente utilizza le funzioni path() e shape() per definire una forma a cuore e un cerchio con un foro al centro. L'esempio utilizza lo stesso valore in pixel per entrambe le funzioni, ma le funzioni shape() avrebbero potuto utilizzare anche altre unità di dimensione CSS, come percentuali o unità relative al contenitore.

Ritaglio

Il ritaglio definisce quali aree di un elemento sono visibili, in modo simile al ritaglio di un'immagine da una rivista. La proprietà clip-path imposta il percorso utilizzato per definire l'area di ritaglio.

Come hai visto negli esempi della sezione precedente, qualsiasi funzione di forma o percorso di base può essere utilizzata come clip-path. La proprietà clip-path supporta anche i percorsi definiti in un elemento SVG clipPath, che può essere incorporato o in un file separato.

Il diagramma precedente mostra come l'aggiunta di un clip-path a un elemento immagine modifichi l'area visibile dell'immagine. Il percorso di ritaglio superiore utilizza la funzione circle(), mentre quello inferiore utilizza un clipPath SVG. Tieni presente che il cerchio creato utilizzando la funzione circle() è posizionato al centro dell'elemento per impostazione predefinita.

La proprietà clip-path accetta un solo percorso. Per ritagliare un elemento con più forme che non si sovrappongono, utilizza le funzioni path() o shape() per definire un tracciato composto oppure utilizza un clipPath SVG. Un'altra opzione per gli scenari complessi è utilizzare il mascheramento anziché il ritaglio, argomento che tratteremo in una sezione successiva.

Ritagliare con le forme

Per ritagliare utilizzando una forma di base o una funzione di percorso, imposta la proprietà clip-path sul valore restituito dalla funzione, come negli esempi precedenti. Ogni funzione posizionerà la forma di ritaglio in modo diverso rispetto all'elemento, quindi consulta il riferimento per ogni funzione.

Nell'esempio precedente, a due elementi è stato applicato un clip-path circolare utilizzando la classe .clipped. Tieni presente che clip-path è posizionato rispetto a ogni elemento e che il testo all'interno di clip-path non viene riformattato per seguire la forma.

Il riquadro di riferimento di un tracciato di ritaglio

Per impostazione predefinita, il tracciato di ritaglio di un elemento include il bordo dell'elemento. Quando utilizzi una delle funzioni di forma di base, puoi impostare il riquadro di riferimento del percorso di ritaglio in modo che includa solo l'area dell'elemento all'interno del bordo. I valori validi per la casella di riferimento sono stroke-box (il valore predefinito) e fill-box (per includere solo l'area all'interno del bordo).

L'esempio precedente mostra elementi con un bordo grande (20px), ognuno dei quali utilizza la funzione inset() per impostare clip-path. L'elemento che esegue il ritaglio rispetto al bordo dell'elemento mostra comunque una parte del bordo. Gli elementi che vengono ritagliati rispetto all'area all'interno del bordo non mostrano alcun bordo e sono più piccoli, anche con lo stesso valore di rientro.

Ritaglio con elementi grafici

Un tracciato di ritaglio può essere definito in un documento SVG, incorporato nel documento HTML o a cui viene fatto riferimento esternamente. Questa opzione può essere utile per definire tracciati di ritaglio complessi creati in programmi di grafica o tracciati di ritaglio che combinano più forme.

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

Nell'esempio precedente, l'elemento clipPath con un valore id di kitten-clip-shape viene applicato all'elemento <img>. In questo caso, il documento SVG è incorporato nel codice HTML. Se il documento SVG è un file esterno denominato kitten-clipper.svg, clipPath verrà invece indicato come url(kitten-clipper.svg#kitten-clip-shape).

Mascheramento

Il mascheramento è un altro metodo per definire quali aree di un elemento vengono mostrate o nascoste. Mentre il ritaglio utilizza forme o percorsi di base, la mascheratura utilizza i pixel di un'immagine o di un gradiente per determinare la visibilità. A differenza del ritaglio, il mascheramento consente alle aree di un elemento di essere parzialmente trasparenti. A un elemento possono essere applicate più immagini maschera per produrre una serie di effetti.

Per applicare una maschera, imposta la proprietà mask-image. Questa proprietà accetta una o più immagini, sfumature o riferimenti a elementi <mask> in un documento SVG. È possibile applicare più immagini maschera separandole con virgole.

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

Nell'esempio precedente, .my-element viene mascherato utilizzando un'immagine PNG, seguita da un gradiente lineare. Per impostazione predefinita, più maschere vengono sommate per creare la maschera finale.

L'esempio precedente mostra un'immagine a cui sono state applicate una o più maschere. Attiva/disattiva ogni maschera per vedere come si combinano per produrre l'effetto finale.

Mascheratura alpha e luminanza

Puoi applicare una maschera utilizzando il alpha o il luminance dell'immagine. Quando il mascheramento si basa su alpha, la trasparenza di ogni pixel nell'immagine della maschera viene applicata all'elemento, ignorando le informazioni sul colore del pixel. Quando il mascheramento si basa su luminance, all'elemento vengono applicati sia la trasparenza sia il valore di ogni pixel (quanto è chiaro o scuro). Il mascheramento per luminanza considera i colori più chiari come visibili e quelli più scuri come invisibili.

Per impostare la modalità di mascheramento, utilizza la proprietà mask-mode. Per impostazione predefinita, la proprietà mask-mode è impostata su match-source, che imposta una modalità in base al tipo di immagine della maschera. Per immagini e gradienti, il valore predefinito è alpha. Per le maschere SVG, il valore predefinito sarà il valore della proprietà mask-type dell'elemento <mask> o luminance, se non è definita alcuna proprietà mask-type.

Nell'esempio precedente, un pattern di test che mostra diversi valori di colore e alfa viene utilizzato come maschera. Se attivi/disattivi l'opzione mask-mode, puoi vedere come la modalità alpha si basa sulla trasparenza, mentre la modalità luminance si basa sia sulla luminosità del colore che sulla trasparenza.

Proprietà di mascheramento aggiuntive

CSS fornisce proprietà aggiuntive per perfezionare il comportamento delle maschere. Ciascuna delle proprietà accetta un elenco di valori separati da virgole, che verranno confrontati con l'elenco di maschere impostato dalla proprietà mask-image. Se i valori sono inferiori alle maschere, l'elenco si ripeterà finché non sarà stato impostato un valore per ogni maschera. Se ci sono più valori che maschere, i valori in eccesso vengono eliminati.

Abbreviazione della maschera

Puoi impostare più proprietà della maschera contemporaneamente con la notazione abbreviata della maschera. In questo modo, puoi semplificare l'impostazione di più maschere raggruppando tutte le proprietà di ciascuna maschera. L'abbreviazione della maschera equivale a impostare queste proprietà in ordine: mask-image, mask-mode, mask-position, mask-size, mask-repeat, mask-origin, mask-clip e mask-composite. Non è necessario includere tutte le proprietà e quelle non incluse verranno reimpostate sul valore iniziale. Con il supporto di un massimo di otto proprietà per maschera, può essere utile avere a disposizione un riferimento completo.

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

Nell'esempio precedente, a ogni classe sono applicate due maschere. Il primo utilizza proprietà individuali, mentre il secondo utilizza la notazione abbreviata mask. Entrambi gli stili sono equivalenti.

Testo scorrevole intorno agli elementi in modalità Flusso

Quando ritagli o mascheri un elemento, modifichi solo l'area visibile all'interno del riquadro, ma il riquadro stesso rimane invariato. Ciò significa che un elemento mobile influirà sul flusso del documento in base al suo riquadro di selezione originale, non alle porzioni visibili dell'elemento. Per definire il flusso intorno a un elemento, utilizza la proprietà shape-outside insieme al percorso di ritaglio.

La proprietà shape-outside definisce la forma in cui i contenuti scorreranno intorno a un elemento. Questa forma può essere una qualsiasi delle funzioni di forma di base, ma non le forme definite utilizzando le funzioni path() o shape() oppure un clipPath definito in un documento SVG.

La proprietà shape-outside accetta anche un'immagine o una sfumatura. Come per le maschere, i limiti della forma saranno determinati dalla trasparenza dell'immagine o del gradiente. La proprietà shape-image-threshold imposta i livelli di trasparenza considerati all'interno della forma.

Forme nell'animazione

Animare clip-path

Puoi animare la proprietà clip-path, eseguendo la transizione da una forma all'altra. Per produrre animazioni fluide, devi utilizzare la stessa funzione di forma per ogni fotogramma chiave. Quando utilizzi le funzioni polygon() o shape(), devi utilizzare lo stesso numero di punti in ogni fotogramma chiave.

Nell'esempio precedente, la clip-path di un elemento passa da un pentagono a una stella definita utilizzando la funzione polygon(). L'esempio utilizza la regola di riempimento evenodd per mostrare come i punti di animazione creano aree sovrapposte.

Animare con offset-path

Puoi anche animare gli elementi lungo i percorsi creati con queste funzioni di forma. La proprietà offset-path imposta la forma da utilizzare come percorso, mentre la proprietà offset-distance imposta la posizione lungo il percorso. Puoi anche utilizzare la funzione ray() con la proprietà offset-path per animare lungo una linea retta.

L'esempio precedente mostra l'utilizzo dello stesso poligono sia per un clip-path che per un offset-path. L'animazione utilizza offset-distance per spostare le stelle più piccole lungo lo stesso poligono utilizzato dalla stella grande come clip-path.

Verifica la tua comprensione