Immagini · Crea sprite sheet

Creare uno sprite sheet CSS su Mac

Raccogli le icone in un'unica immagine con il CSS per mostrarle una per una, più un'anteprima HTML.

Funziona sul tuo Mac

Chiedi all'IAChatGPTClaudePerplexityModalità IAGrokMarkdown

Scarica OneMacTools Altri strumenti Immagini

Crea sprite sheet su un Mac

Crea sprite sheet con file di esempio e le sue opzioni

Cosa ha prodotto Crea sprite sheet dai file di esempio

Screenshot dell'app, realizzati con file di esempio.

Come usare Crea sprite sheet

1
Trascina le tue icone
Aggiungi due o più immagini. Ogni nome file diventa una classe CSS, quindi dai prima nomi chiari, per esempio “search.png” e “cart.png”.
2
Imposta lo spazio e il prefisso
Scegli lo spazio tra le icone e il prefisso della classe CSS.
3
Segna le icone retina
Se le tue icone sono @2x, attiva l'opzione retina, così vengono mostrate a metà dimensione e nitide.
4
Fai clic su Crea foglio
Le icone vengono disposte in righe e salvate come sprite.png, con sprite.css e una pagina preview.html, in una cartella con la data in Download › OneMacTools.
5
Usala sul tuo sito
Tieni insieme sprite.png e sprite.css, collega il CSS e aggiungi le classi agli elementi. Apri preview.html per vedere tutte le classi.

Cosa fa Crea sprite sheet

Icone di qualsiasi dimensione vengono disposte in righe compatte, ognuna riceve la propria classe CSS con posizione e dimensione corrette, e una pagina di anteprima le mostra tutte. Imposta lo spazio tra le icone, il prefisso delle classi e se le icone sono @2x per schermi retina nitidi.

Ideale per

Carica un set di icone con una sola richiesta
Crea uno sprite sheet per un gioco
Raggruppare bandiere o emoji per un sito web

Le opzioni spiegate

Spazio tra le icone: 0, 2, 4 o 8 px; il valore predefinito è 2 px. Un piccolo spazio impedisce che le icone vicine si sovrappongano quando la pagina viene ingrandita.
Icone @2x (mostrate a metà dimensione per schermi retina nitidi): Disattivato per impostazione predefinita. Se attivo, il CSS mostra ogni icona a metà della sua dimensione in pixel e scala il foglio di conseguenza, così le icone a doppia risoluzione risultano nitide sugli schermi retina.
Prefisso classe CSS: L'inizio di ogni nome di classe; “icon” se lasciato vuoto. Con il prefisso icon, “search.png” diventa .icon-search.

Consigli pratici

Prima di iniziare, dai ai file nomi in minuscolo con i trattini. I nomi delle classi derivano da questi, e “@2x” viene tolto automaticamente.
Usa icone con sfondo trasparente, così il foglio funziona con qualsiasi colore di pagina.
Crea icone retina esattamente al doppio della dimensione di visualizzazione, con dimensioni in pixel pari, così le dimensioni dimezzate sono pixel interi.
Comprimi poi sprite.png con Comprimi PNG; per i fogli di icone un PNG a tavolozza è spesso molto più piccolo.
Usa uno spazio di 2 px o più se le icone verranno ridimensionate o mostrate con la pagina ingrandita.

Funziona con

In: Due o più immagini, di solito icone PNG, di qualsiasi dimensione.
Esce: sprite.png (tutte le icone raccolte insieme), sprite.css (una classe per icona con dimensioni e posizione) e preview.html.

Icone di dimensioni diverse vengono disposte in righe compatte, a partire dalle più alte.
I file con lo stesso nome ricevono classi numerate, come -2, così nessuno va perso.

Domande su Crea sprite sheet

Cos'è uno sprite sheet CSS?

Un'unica immagine che contiene molte icone, con un CSS che mostra una sola icona per elemento spostando lo sfondo. Carica tutte le icone con un'unica richiesta.

Come faccio a usare lo sprite nel mio sito web?

Carica sprite.png e sprite.css nella stessa cartella, collega il CSS nella tua pagina e aggiungi classi come class="icon icon-search" a un elemento.

Come vengono creati i nomi delle classi?

Dal nome di ogni file, in minuscolo con spazi e simboli trasformati in trattini, dopo il tuo prefisso. “Shopping Cart.png” con il prefisso icon diventa .icon-shopping-cart.

Posso usare icone di dimensioni diverse?

Sì. Ogni icona mantiene le sue dimensioni, e la sua classe CSS riceve larghezza e altezza corrispondenti.

Come faccio a rendere nitidi gli sprite sugli schermi retina?

Crea le icone al doppio della dimensione a cui le mostrerai e attiva l'opzione @2x. Il CSS le mostra a metà dimensione, così risultano nitide sugli schermi ad alta risoluzione.

Posso usarlo per gli sprite dei videogiochi?

Sì. sprite.css elenca posizione e dimensioni di ogni immagine nel foglio, dati che puoi leggere in un motore di gioco o in codice canvas.

Crea sprite sheet carica i miei file?

No. Crea sprite sheet funziona interamente sul tuo Mac, quindi i tuoi file non lo lasciano mai e funziona anche offline.

Crea sprite sheet modificherà i miei file originali?

No. I risultati vengono salvati come nuovi file in una cartella datata in Download › OneMacTools, e gli originali restano esattamente com'erano, a meno che tu non attivi un'opzione che dice il contrario.

Cosa serve a Crea sprite sheet?

Basta un Mac con macOS 26 o versioni successive. Non c'è nient'altro da installare.