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

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!

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…

Passa qui il 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?



Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Sicurezza PHP: proteggi il tuo sito dagli attacchi SQL Injection e XSS


Vuoi imparare a proteggere il tuo sito web da attacchi SQL Injection e XSS in PHP? Scopri come fare utilizzando le funzioni di sicurezza integrate e testando il tuo codice.

Come utilizzare i modelli di oggetti JavaScript


Come programmare ad oggetti utilizzando i modelli? Scopri come fare con JavaScript.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)