Il Clip-path è una proprietà CSS rilasciata nel 2016. Perché, pur essendo disponibile da così tanto tempo, non ne sentiamo mai parlare e, soprattutto, a cosa potrebbe servirci per la nostra libreria CSS?
Lo scopo del Clip-path è semplice: crea una forma geometrica all'interno dell'elemento in cui viene applicata, rendendo visibile tutto quello che vi è all'interno e invisibile ciò che stà all'esterno. Il problema nel suo utilizzo è proprio nella descrizione: creare una forma geometrica e gestirla non è banale.
Facciamo un esempio di un div che tramite la proprietà scomparirà verso il centro formando un cerchio e si riaprirà a metà dell'animazione
.box { animation: circle 3s infinite; background: orange; height: 200px; width: 200px; } @keyframes circle { /* un cerchio con raggio 75% delle dimensioni del quadrato è sufficiente a coprire tutta l'area del quadrato */ 0% { clip-path: circle(75%); } 50% { clip-path: circle(25%); } 100% { clip-path: circle(75%); } }
Se volessimo spostare il centraggio dell'animazione, possiamo utilizzare il secondo argomento, per definire la posizione spaziale della forma
@keyframes circle { /* [...] */ /* cerchio che si chiuderà verso il lato sinistro*/ 50% { clip-path: circle(25% 0%); } /* cerchio che si chiuderà a metà strada tra il centro e il lato destro*/ 50% { clip-path: circle(25% 75%); } /* [...] */ }
Il cerchio non è la sola forma disponibile, troviamo anche: Ellipse, Inset per un rettangolo a cui definire i bordi e il raggio, polygon che ci permette di creare forme complesse.
Ora che ne abbiamo dato una definizione, come può tornarci utile? Applicandola ad un button, una card, un link o una voce di menù, possiamo creare animazioni all'hover, ad un cambio stato o cicliche tramite animazioni.
Nel codice sottostante l'effetto è un riempimento dall'interno verso l'esterno di colore arancione in fase di hover. Dato che Clip-path lavora sulla visibilità non possiamo applicarla direttamente al bottone, utilizziamo quindi il before dell'elemento.
<style> .btn-clip { position: relative; overflow: hidden; background: transparent; color:black; transition: 0.5s ease-in-out; } .btn-clip::before { content: ''; position: absolute; inset: 0; background-color: #ff5722; clip-path: circle(0% at 50% 50%); transition: 0.5s ease-in-out; } .btn-clip span{ /* permette al testo di stare sempre sopra tutti gli altri elementi */ position:relative; z-index: 1; } .btn-clip:hover { color:#fff; } .btn-clip:hover::before { clip-path: circle(100% at 50% 50%); } </style> <a href="#" class="btn-clip btn btn-secondary"><span>Hover me</span></a>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Eseguire script pre e post esecuzione di un workflow di GitHub
Introduzione alle Container Queries
Utilizzare Container Queries nominali
Configurare lo startup di applicazioni server e client con .NET Aspire
Usare le navigation property in QuickGrid di Blazor
Ordine e importanza per @layer in CSS
Creare alias per tipi generici e tuple in C#
Ottimizzare le performance usando Span<T> e il metodo Split
Referenziare un @layer più alto in CSS
Collegare applicazioni server e client con .NET Aspire