Proprietà CSS avanzate: crea forme con “clip-path”

La proprietà “clip-path” in CSS ci permette di creare forme uniche e interessanti per i nostri elementi HTML.
Dal creare un cuore al tagliare un’immagine a forma di triangolo, le possibilità sono infinite!
In questo articolo, esploreremo come utilizzare “clip-path” per creare forme e animazioni e vedremo alcuni esempi pratici di come utilizzare questa proprietà nei nostri progetti.
Se sei pronto a creare forme mozzafiato con “clip-path”, continua a leggere!
- Leggi l'articolo, ti bastano solo 1 minuto, 18 secondi
Sei di fretta? Scarica il PDF e consultalo quando vuoi!
Sommario
1 Crea forme personalizzate con la proprietà CSS "clip-path" |
2 Forme semplici |
3 Forme complesse |
4 Un po' di movimento |
5 Conclusioni |
6 Commenti |
Crea forme personalizzate con la proprietà CSS "clip-path"
Una delle proprietà avanzate più sensazionali di CSS c’è sicuramente clip-path. A cosa serve?
Con “clip-path” puoi tagliare un elemento HTML e farne apparire solo una parte, creando forme personalizzate. La sintassi è semplice:
clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
clip-source può essere un URL che fa riferimento a un’immagine di maschera o una funzione di forma come “polygon” o “path”. La proprietà “clip-path” può anche utilizzare una forma di base come un cerchio o un rettangolo, o una casella geometrica come “margin-box”. La parola chiave “none” può essere utilizzata per disabilitare la proprietà “clip-path”.
In particolare, vediamo come usare le funzioni di forma come “polygon” o “path” per creare immagini più o meno complesse.
Forme semplici
ROMBO
/* ROMBO */ .rombo { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
TRIANGOLO
/* TRIANGOLO */ .triangolo { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
RETTANGOLO ARROTONDATO
/* RETTANGOLO ARROTONDATO */ .rettangolo { clip-path: inset(10% round 20% 20%); }
Forme complesse
Ma è possibile anche dare vita a forme con complessità sempre maggiori, l’unico limite è la tua immaginazione!
Vuoi qualche esempio? Detto, fatto:
FORMA ASTRATTA
/* FORMA ASTRATTA */ .astratta { clip-path: path("M10,10 C20,20 30,40 40,10"); }
Che ne pensi invece di forme più conosciute, ma altrettanto complesse?
Si, è possibile! Se non ci credi, ecco qualche esempio.
CUORE
/* CUORE */ .cuore { clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"); }
STELLA
/* STELLA */ .stella { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
Un po' di movimento
Ma non è ancora finita!
Ora che abbiamo visto come utilizzare “clip-path”, vediamo come animare le forme.
Ecco un esempio di animazione “clip-path”:
.animazione { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition: clip-path 1s; } .animazione:hover { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
Il risultato sembra un semplice rettangolo, ma prova a posizionarci su il cursore del mouse…
Conclusioni
So a cosa stai pensando: WOW!
Considera che abbiamo usato la proprietà “clip-path” su semplici <div>
, ma puoi applicare questa fantastica proprietà anche alle immagini, per creare cornici e forme particolari.
Questi sono solo alcuni esempi di come utilizzare “clip-path” per creare forme interessanti e animazioni. E tu cosa ne pensi di condividere i tuoi esperimenti?