Un po’ di teoria sui CSS Sprite

Il “CSS Sprite” non è altro che una tecnica CSS che ti consente di visualizzare differenti porzioni di una stessa immagine come backgorund di differenti elementi della pagina, utilizzando come riferimento, appunto, un’unica immagine. Il tutto si riduce quindi ad una singola immagine di cui vengono modificati i valori della proprietà background-position per essere di vota in volta riutilizzata per differenti elementi della pagina. Quella che segue potrebbe essere un esempio di sprite Image:


I Vantaggi del CSS Sprite

I vantaggi principali sono riconducibili ad una migliore gestione delle immagini. Non vi è dispersione delle stesse in quanto vengono raggruppate in un unica immagine che funge da contenitore. Immagine che viene scaricata una volta sola sul computel locale dell’utente evitando spiacevoli ritardi nella visualizzazione degli stati hover dei link.

Come utilizzare la tecnica del CSS Sprite

Prendiamo in esame un semplice menu di navigazione al quale vogliamo applicare un immagine di sfondo diversa per ogni link. Niente di più semplice, componiamo in photoshop il nostro sprite con le icone allineate in verticale o in orizzontale, e richiamiamo l’unica immagine risultante tramite la proprietà background-image.

<ul id="navigation">
    <li class="home"><a href="#">Home</a></li>
    <li class="contatti"><a href="#">Contatti</a></li>
    <li class="dovesiamo"><a href="#">Dove Siamo</a></li>
</ul>
ul#navigation li{
    background-image:url("sprite.jpg");
    background-repeat:no-repeat;
}
ul#navigation li.home{
    background-position:0 0;
}
ul#navigation li.contatti{
    background-position:0 10px;
}
ul#navigation li.dovesiamo{
    background-position:0 20px;
}

Attenzione a come strutturi lo sprite image

Quando decidi di creare uno sprite image, stai attento agli spazi che lasci tra un elemento grafico e l’altro dello sprite. Nella maggiorparte dei casi, l’elemento html a cui devi applicare il background ha le medesime dimensioni dell’elemento grafico quindi non c’è pericolo che un’altra porzione dello sprite possa subentrare nel background. In altri casi invece capita che un elemento non abbia dimensioni fisse e che sia piu alto o piu largo dello spazio che intercorre tra un elemento grafico e un altro, con la conseguenza che più immagini si paleseranno per un medesimo elemento rovinando il template. Nell’immagine qui di seguito, il terzo elemento della lista ha del testo in piu è la seconda iconcina dello sprite fa capolinea dal basso rovinando il layout. Quindi attenzione agli spazi tra un elemento ed un altro.

Inoltre capita spesso che gli sprite image debbano essere aggiornati con nuovi elementi grafici. La regola è di accodare sempre nuovi elementi grafici e mai di inserirli in mezzo spostando quelli esistenti, rischieresti di non trovarti con le coordinate css precedentemente impostate.

CSS Sprite Generator

Online se ne trovano molti, tutti bene o male fanno il loro lavoro: comporre sprite funzionali per i propri layout. L’unico consiglio è di provarli e capire se possano venire incontro alle proprie esigenze. Personalmente li compongo a manina in photoshop, trovandomi le coordinate corrispondenti lato css man mano che compongo il template. Ho trovato per te questo articolo che raggruppa i migliori tool online.

Conclusioni

La tecnica CSS Sprite è una di quelle tecniche non dovrebbe mail mancare nel bagaglio di un webdesigner che si rispetti. E tu la usi? La trovi interessante? Scrivimi le tue impressioni e i tuoi commentio, sarò ben lieto di discuterne insieme.

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github