L'uso dei cosiddetti CSS sprites è stato reso popolare da
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
e proprio a partire da uno degli ultimi vorrei partire per presentare questo
, 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
dell'articolo
, 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
. 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
.
àˆ possibile approfondire
