Omaggi settimanali: 12 generatori di Sprite CSS gratuiti
Gli sprite di immagini CSS ti consentono di ridurre drasticamente il numero di richieste HTTP su un sito combinando molte o tutte le immagini del tuo sito in un singolo file. Questo file può quindi essere utilizzato insieme al posizionamento in background CSS per implementare singole immagini.
Il rovescio della medaglia di questa tecnica è che è un processo scrupoloso e coinvolto che richiede di combinare manualmente le tue immagini e giocherellare con il CSS per ottenere una corretta visualizzazione di ogni immagine. Fortunatamente, esistono numerosi strumenti online gratuiti che automatizzano completamente questo processo. Oggi abbiamo una fantastica collezione di dodici di questi strumenti, ognuno con la sua visione unica del processo di generazione degli sprite. Sia che tu stia cercando di creare uno sprite da una cartella di immagini o di convertire un sito esistente, abbiamo gli strumenti per aiutarti a completare il lavoro in pochi secondi.
Generatore di Sprite CSS: Project Fondue
Un buon generatore con molte opzioni. Carichi un .ZIP di tutte le immagini che vorresti fossero trasformate in uno sprite e al resto penserà tutto. Sputa un'immagine e tutti i vari valori di "posizione di sfondo" di cui hai bisogno.
Generatore di Sprites CSS
Brutto e difettoso, questo generatore di sprite ti costringe a caricare ogni immagine singolarmente. Provalo per vedere cosa ne pensi ma, onestamente, ci sono alternative migliori in questo elenco.
CSS Sprites - Generatore / generatore di Sprite CSS online
Questo è molto carino. Puoi caricare facilmente un gruppo di immagini contemporaneamente, scegliere il tipo di file di output e persino scegliere di ottenere sia il codice Sass che CSS come risultato. Ci sono anche alcune opzioni pulite per generare automaticamente effetti hover come desaturati e capovolti. Nel complesso abbastanza impressionante, assicurati di provarlo.
Spritebox - Crea CSS da Sprite Images
Questo prende un percorso diverso, leggermente meno automatizzato. Invece di creare un'immagine sprite per te, ti consente di caricare lo sprite già creato e definire aree specifiche per generare il CSS risultante. Un ottimo strumento se preferisci costruire sprite in Photoshop e vuoi solo aiuto con il codice.
Quadro: CSS Sprites Generator
Se stai caricando immagini per questo, devi farlo uno alla volta, il che è un po 'una seccatura. Se hai dei link, puoi semplicemente incollarli in un elenco con i nomi delle classi corrispondenti e sei a posto. Le opzioni includono imbottitura e colori di sfondo. Ha funzionato bene nei miei test, sicuramente vale la pena dare un'occhiata.
Stitches - Un generatore di fogli sprite HTML5
Questo ti consente di trascinare le immagini, il che è fantastico dopo aver utilizzato tutti gli scaricatori scomodi che altri sviluppatori hanno ideato. Dopodiché puoi semplicemente fare clic su un pulsante per ottenere l'immagine e un altro per afferrare il CSS. Non ci sono praticamente opzioni e funziona solo su Chrome e Firefox, ma è perfetto se vuoi solo una soluzione rapida e semplice.
Spritemapper
Questo è solo per super nerd, è un generatore di sprite scaricabile che esegui dalla riga di comando. L'implementazione è davvero semplice, basta puntarla sul file CSS esistente e fa il resto del lavoro. Questo rende il problema della gestione degli sprite a lungo termine un gioco da ragazzi in quanto puoi semplicemente aggrapparti ai tuoi file css e immagine originali e rielaborarli quando c'è un cambiamento.
SpriteMe
SpriteMe è uno strumento fantastico che ti consente di mantenere completamente intatto il tuo tipico processo di sviluppo. Crea la tua pagina come faresti normalmente usando le singole immagini. Quindi, una volta terminato, apri la pagina in un browser e premi il bookmarklet SpriteMe. Questo prende tutte le immagini sulla pagina, crea uno sprite e genera il CSS. Ciò è particolarmente utile se stai convertendo un sito in uscita.
Spritefy
Spritefy è un'altra opzione che ti consente semplicemente di trascinare un mucchio di file nel browser per elaborarli. Come con Stitches, in realtà non ci sono opzioni ma è sicuramente un modo super veloce per iniziare a funzionare con gli sprite (solo Chrome e Firefox).
Generatore di Sprite CSS
Questo ha alcuni passaggi non necessari nel processo di generazione e configurazione, quindi richiede alcuni secondi in più rispetto alla maggior parte delle altre alternative, ma ha un sacco di output di codice che include sia CSS che HTML insieme a vari frammenti per l'aggiunta di ogni immagine a un div o span, inserendo collegamenti, ecc.
SpriteMeister - Generatore automatico di CSS Sprite
SpriteMeister è molto simile a SpriteMe sopra, solo meno automatizzato. Invece di utilizzare un bookmarklet, carichi manualmente ogni immagine e il tuo file CSS corrente e quindi ricevi un download con codice aggiornato e una singola immagine.
Sprite Creator 2.0
Questo funziona proprio come Spritebox sopra. Carichi l'immagine sprite che hai creato altrove e usi un semplice processo di selezione per generare automaticamente il CSS appropriato per ogni immagine.
Lo adoro? Condividilo!
Se ti è piaciuta la raccolta di omaggi di questa settimana, condividi l'amore e invia un link ai tuoi siti preferiti. Ecco un comodo frammento da copiare e incollare come preferisci!
12 generatori di Sprite CSS gratuiti: http://goo.gl/NhLNR
