Un tool per generare CSS sprites

L'uso dei cosiddetti CSS sprites è stato reso popolare da questo articolo di Dave Shea su A List Apart

Si tratta, tra l'altro, di una tecnica spesso consigliata per ridurre i tempi di caricamento di una pagina, dal momento che, dovendo caricare una sola immagine invece che due o più (per esempio per un rollover), si riduce il numero di richieste HTTP al server.

Dal punto di vista dei CSS, tutto consiste nell'usare la proprietà  background-position per visualizzare l'area dell'immagine che ci interessa. Alessandro Fulciniti l'ha usata in tanti suoi articoli e proprio a partire da uno degli ultimi vorrei partire per presentare questo CSS sprites generator, un tool online per la generazione di sprites che, pur con qualche limite, potrà  esservi utile nella preparazione di immagini di questo tipo da utilizzare nei vostri progetti.

àˆ chiaro che tutto può essere realizzato con un programma di grafica, ma spesso questi tool semplificano il lavoro, offrendo spesso qualche utile ausilio. Nel caso specifico, mi riferisco al calcolo automatico delle coordinate da usare nel CSS per impostare la posizione dell'immagine.

Nel secondo esempio dell'articolo Bottoni con rollover, viene usata questa immagine (uno sprite appunto) per definire l'aspetto del pulsante negli stati normale e :hover:

Il codice CSS per realizzare l'effetto rollover è questo:


a.button{display:block;width: 145px;height: 35px; margin: 1em;
font: bold 18px/35px "Trebuchet MS",Arial,sans-serif;
text-align:center;text-decoration: none; color: #286C98;
background: url(bottone2.png) no-repeat 0 0}

a.button:hover{background-position:0 -35px;color: #98286C}


Quello che ho fatto per provare il tool è semplice. Sono partito da due immagini separate, questa

e questa

Le ho uploadate come indicato sulla pagina:

Ho quindi cliccato sul pulsante 'Generate', ottenendo questo risultato:

Oltre al link che punta all'immagine (per poterla salvare), è importante annotare i dati relativi alla posizione nei CSS. Ho infatti semplicemente modificato il codice visto qui sopra con i dati forniti dal tool per ottenere questa versione dell'esempio. Ecco il codice CSS:


a.button{display:block;width: 145px;height: 35px; margin: 1em;
font: bold 18px/35px "Trebuchet MS",Arial,sans-serif;
text-align:center;text-decoration: none; color: #286C98;
background: url(butt.png) no-repeat -18px -18px}

a.button:hover{background-position:-18px -88px;color: #98286C}


L'autore, nel presentare il generatore, offre anche il codice PHP e Javascript utilizzato. àˆ tutto in questo post.

àˆ possibile approfondire css sprite e image replacement su Css.HTML.it