Raccogli le tue icone in un unico foglio, con il suo CSS

Con Foglio di sprite, fotografi e creativi visuali possono riunire icone e relativo CSS prima dell’integrazione. Raccogli le tue icone in un unico foglio, con il suo CSS.

Raccogli le tue icone in un unico foglio, con il suo CSS. Lo strumento è gratuito nel browser e mostra il risultato senza richiedere un account.

Come si usa

Scegli diverse immagini PNG, JPEG o WebP; ciascuna deve essere di 20 MB o meno, e hai bisogno di un numero di file compreso tra 2 e 100.
Imposta la larghezza massima desiderata per il foglio finale, in pixel.
Aggiungi un margine attorno a ogni sprite in modo che le icone non si tocchino tra loro.
Genera il foglio e scarica sia l'immagine che il relativo foglio di stile CSS.

Esempio

Uno sviluppatore front-end sta assemblando una serie di piccole icone per una barra di navigazione. Carica i file, sceglie una larghezza del foglio ragionevole e un margine ridotto, quindi aggiunge il foglio generato e il CSS al progetto. La pagina può richiedere una singola immagine invece di molti file separati.

Limiti e formati

L'output è un foglio bitmap, non un sistema di icone vettoriali, quindi un forte ingrandimento può ammorbidire le icone.
I file di input devono essere PNG, JPEG o WebP, con un limite di 20 MB per immagine e un totale compreso tra 2 e 100 file.
Controlla il CSS generato rispetto alla struttura del tuo progetto, perché i nomi delle classi o i percorsi dei file potrebbero richiedere modifiche.
Una larghezza scelta male o troppe immagini possono creare un foglio difficile da mantenere in seguito.

Dove avviene il trattamento

La generazione del foglio e del CSS viene eseguita all'interno del tuo browser. I tuoi file immagine non vengono caricati, non è richiesto alcun account e gli asset finiti diventano disponibili per il download sul tuo dispositivo.

Domande frequenti

Come devo scegliere la larghezza massima del foglio?

Pensa a quante icone hai e dove verrà utilizzato il foglio. Una larghezza moderata evita che il foglio diventi estremamente alto, mentre un foglio più largo può ridurne l'altezza. Prova un valore, controlla il risultato e regola se il layout sembra sbilanciato.

Devo usare il file CSS generato?

Puoi usarlo così com'è, adattarlo alle tue convenzioni di denominazione o semplicemente leggerlo come guida al posizionamento. Il CSS descrive dove si trova ogni sprite nel foglio. L'immagine del foglio stessa rimane la stessa indipendentemente dal fatto che tu conservi o meno il foglio di stile.

Posso mescolare formati di immagine diversi in un unico foglio?

Sì, i file PNG, JPEG e WebP possono essere selezionati insieme. Per le icone, i file PNG con trasparenza spesso funzionano meglio perché si fondono in modo pulito con diversi sfondi di pagina. Controlla sempre il foglio finale, poiché i bordi e le aree di sfondo possono variare a seconda del formato di origine.