Generatore CSS
clip-path
Un generatore intuitivo per creare forme CSS clip-path tramite drag-and-drop. Supporta poligoni, cerchi ed ellissi, fornendo codice CSS immediatamente utilizzabile.
Editor
Fai clic sulla tela per aggiungere un vertice. Trascina per spostare. Clic destro per eliminare.
Impostazioni Anteprima
Animazione al Passaggio (Opzionale)
Se abilitato, verrà generato il CSS per clip-path + transizione al passaggio del mouse. Per la modalità poligono, assicurati che il numero di vertici corrisponda.
Modifica della forma di base nell’editor. Passa allo stato al passaggio per configurare la forma al passaggio del mouse.
Codice Generato
Potrebbe piacerti anche
Informazioni sul Generatore CSS clip-path
Questo generatore è uno strumento online gratuito che ti consente di creare intuitivamente proprietà CSS clip-path tramite operazioni di drag-and-drop.
In precedenza, il ritaglio di immagini richiedeva il calcolo manuale delle coordinate. Con questo strumento, puoi creare visivamente le forme e generare il codice CSS con un singolo clic.
Supporta diverse forme e genera persino il codice per animazioni fluide al passaggio del mouse.
Come Usare
1️⃣ Seleziona una Forma
Scegli la tua forma preferita dai preset o dalle schede.
2️⃣ Regola la Forma
Trascina i vertici sulla tela. Nella modalità poligono, puoi fare clic per aggiungere o fare clic con il tasto destro per eliminare i vertici.
3️⃣ Copia il Codice
Una volta soddisfatto dell'anteprima, clicca su 'Copia' e incollalo nel tuo codice.
Guida alla Proprietà clip-path
Spiegazione delle principali funzioni di forma:
■ polygon() — Poligono
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
Specifica un numero qualsiasi di coordinate di vertice. È richiesto un minimo di 3 vertici.
■ circle() — Cerchio
clip-path: circle(radius at centerX centerY)
Specifica il raggio del cerchio e le coordinate del centro.
■ ellipse() — Ellisse
clip-path: ellipse(rx ry at centerX centerY)
Disegna un'ellisse specificando raggi diversi per le direzioni X e Y.
■ inset() — Riquadro Rettangolare
clip-path: inset(top right bottom left round radius)
Specifica quanto tagliare verso l'interno dai bordi dell'elemento.
FAQ
- Q.clip-path influisce sulla SEO?
- No. La proprietà clip-path modifica solo la resa visiva e non altera la struttura HTML o il contenuto del testo. I motori di ricerca continueranno a riconoscere e indicizzare normalmente il testo al di fuori dell’area ritagliata.
- Q.Qual è la differenza tra CSS clip-path e SVG clipPath?
- CSS clip-path opera interamente all’interno dei fogli di stile utilizzando funzioni integrate. SVG clipPath definisce un elemento SVG e lo referenzia. Sebbene i CSS siano più facili da applicare, SVG è più adatto per percorsi altamente complessi.
- Q.Posso animare clip-path al passaggio del mouse (hover)?
- Sì. Puoi animare fluidamente la transizione utilizzando la proprietà transition, a condizione che il numero di vertici sia esattamente lo stesso prima e dopo (per i poligoni).
- Q.Le aree al di fuori di clip-path sono cliccabili?
- No. Gli eventi del puntatore, come clic o passaggi del mouse, non si attivano sulle aree esterne all’area ritagliata. Questo assicura che gli elementi interattivi si comportino come previsto.
- Q.Ci sono rischi per la sicurezza nell’utilizzo di questo strumento?
- Assolutamente nessuno. Tutti i processi, inclusi il caricamento e l’anteprima delle tue immagini, vengono eseguiti interamente all’interno del tuo browser.
Casi d'Uso
Sezioni Hero con Taglio Diagonale
Crea prime impressioni dinamiche ritagliando diagonalmente le immagini di sfondo nell’intestazione hero di un sito web.
Immagini del Profilo Uniche
Invece di un cerchio standard, puoi ritagliare le immagini avatar dei membri in forme personalizzate accattivanti come esagoni o stelle.
Animazioni di Rivelazione al Passaggio
Inizia con una piccola immagine ritagliata e animala fluidamente fino alle dimensioni complete al passaggio del mouse senza sforzo.
Invia feedback
Facci sapere la tua opinione per aiutarci a migliorare lo strumento.
Il feedback è temporaneamente sospeso
Il server è occupato o la protezione antispam è attiva. Riprova più tardi.