Usare i ritagli in CSS può aiutarci a evitare che tutto ciò che crei nei nostri progetti abbia l'aspetto di una scatola. Puoi creare un percorso di ritaglio usando varie forme di base o un file SVG. Poi taglia le parti di un elemento che non vuoi mostrare.
Gli elementi sulle pagine web sono tutti definiti all'interno di una casella rettangolare.
Tuttavia, questo non significa che dobbiamo far sembrare tutto come una scatola.
Puoi utilizzare la proprietà CSS clip-path per ritagliare parti di un'immagine o di un altro elemento,
per creare effetti interessanti.
Nell'esempio precedente, l'immagine del fumetto è quadrata (fonte).
Utilizzando clip-path e il valore di forma di base circle(), il cielo aggiuntivo intorno al palloncino viene tagliato lasciando un'immagine circolare sulla pagina.
Poiché l'immagine è un link, puoi vedere qualcos'altro sulla proprietà clip-path.
È possibile fare clic solo sull'area visibile dell'immagine,
poiché gli eventi non vengono attivati nelle parti nascoste dell'immagine.
La possibilità di ritagliare può essere applicata a qualsiasi elemento HTML, non solo alle immagini.
Ci sono diversi modi per creare un clip-path, in questo post li vedremo.
Compatibilità del browser
Per i browser precedenti, potrebbe essere consentito al browser di ignorare la proprietà clip-path e mostrare l'immagine non ritagliata.
Se ciò costituisce un problema, puoi testare clip-path in una query di funzionalità e offrire un layout alternativo per i browser che non supportano.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Forme di base
La proprietà clip-path può assumere una serie di valori.
Il valore utilizzato nell'esempio iniziale era circle().
Questo è uno dei valori di forma di base, definiti nella specifica di forme CSS.
In questo modo, puoi ritagliare un'area
e utilizzare lo stesso valore di shape-outside per mandare il testo attorno a quella forma.
L'elenco completo delle forme di base è:
inset()
Il valore inset() inserisce l'area ritagliata dal bordo dell'elemento
e può essere trasmesso i valori per i bordi superiore, destro, inferiore e sinistro.
Puoi anche aggiungere una border-radius per curvare gli angoli dell'area ritagliata,
utilizzando la parola chiave round.
Nel mio esempio ho due caselle, entrambe con classe .box.
Il primo riquadro non presenta clip, il secondo viene tagliato utilizzando i valori inset().
circle()
Come hai notato, il valore circle() crea un'area ritagliata circolare.
Il primo valore è una lunghezza o una percentuale ed è il raggio del cerchio.
Un secondo valore facoltativo consente di impostare il centro del cerchio.
Nell'esempio che segue, utilizzo i valori delle parole chiave per impostare il cerchio ritagliato in alto a destra.
Puoi anche utilizzare lunghezze o percentuali.
Fai attenzione ai bordi piatti!
Tieni presente che, con tutti questi valori, la forma verrà tagliata dalla casella a margine dell'elemento. Se crei un cerchio su un'immagine e la forma si estende al di fuori delle dimensioni naturali dell'immagine, otterrai un bordo piatto.
circle(50%) applicata. Poiché l'immagine non è quadrata, premiamo la casella a margine in alto e in basso e il cerchio viene tagliato.ellipse()
Un'ellisse è essenzialmente un cerchio compresso,
quindi si comporta in modo molto simile a circle(), ma accetta un raggio per x e un raggio per y,
più il valore del centro dell'ellisse.
polygon()
Il valore polygon() può aiutarti a creare forme piuttosto complesse, definendo tutti i punti che ti servono e impostando le coordinate di ciascun punto.
Per aiutarti a creare poligoni e vedere le tue potenzialità, dai un'occhiata a Clippy,
un generatore clip-path,
quindi copia e incolla il codice nel tuo progetto.
Forme da valori casella
Nelle forme CSS sono definite anche forme dai valori casella.
Si riferiscono al modello CSS Box: casella dei contenuti, spaziatura interna, casella di bordo e casella di margine con valori delle parole chiave content-box, border-box, padding-box e margin-box.
Questi valori possono essere utilizzati da soli o insieme a una forma di base per definire la casella di riferimento utilizzata dalla forma. Ad esempio, quanto segue consente di ritagliare la forma al bordo dei contenuti.
.box {
clip-path: content-box;
}
In questo esempio, il cerchio userebbe content-box come casella di riferimento anziché margin-box (che è l'impostazione predefinita).
.box {
clip-path: circle(45%) content-box;
}
Attualmente i browser non supportano l'utilizzo di valori casella per la proprietà clip-path.
Sono tuttavia supportati per shape-outside.
Utilizzo di un elemento SVG
Per un maggiore controllo sull'area ritagliata rispetto a quanto possibile con le forme di base,
utilizza un elemento clipPath SVG.
quindi fai riferimento a quell'ID utilizzando url() come valore per clip-path.
Animazione dell'area ritagliata
Le transizioni e le animazioni CSS possono essere applicate a clip-path per creare alcuni effetti interessanti.
Nel prossimo esempio, voglio animare un cerchio al passaggio del mouse eseguendo la transizione tra due cerchi con un valore diverso per il raggio.
Esistono molti modi creativi per utilizzare l'animazione con il ritaglio. L'animazione con clip-path su CSS Tricks spiega alcune idee.
Foto di Matthew Henry su Burst.