Creare sprite CSS

27 ottobre 2009

Questa è la traduzione dell’articolo Creating easy and useful CSS Sprites di Ignacio Ricci pubblicato originariamente su CSS Globe il 29 Ottobre 2008. La traduzione viene qui presentata con il consenso dell’editore e dell’autore.

Gli sprites CSS sono un modo per combinare insieme delle immagini al fine di ottimizzare il caricamento della pagina riducendo il numero di richieste HTTP al server. In questo articolo vedremo come crearli. Iniziamo subito con il link alla demo.

Per chiarire cos’è uno sprite CSS, ecco l’immagine di uno sprite CSS creata e usata da Google:

Figura 1 – Sprite CSS usato da Google

screenshot

Quando fate una ricerca su Google, avete in fondo alla pagina la paginazione. Otterrete qualcosa di simile a Goooooooooooooooogle. La lettera ‘o’ viene ripetuta usando lo sprite CSS, così, invece di caricare 15 volte la lettera, Google carica lo sprite con tutte le lettere una sola volta.

Passo 1: creare l’immagine di base

Prima di tutto dobbiamo creare un’immagine per lo sprite. Possiamo farlo in Fireworks, Photoshop o qualunque altro programma di grafica. Ecco quella usata in questo articolo:

Figura 2 – Immagine per lo sprite CSS usato in questo articolo

screenshot

Come potete vedere, lo sprite consiste di una serie di immagini separate tra di loro con una linea sottile 1px. Questa divisione non è realmente necessaria (come si può vedere dall’esempio di Google visto in precedenza), ma ci semplfica la vita quando metteremo mano al CSS.

Passo 2: creare il rivelatore del nostro sprite

Una volta creata l’immagine di base del nostro sprite, dobbiamo creare un’immagine gid trasparente di 1px x !px. Questa immagine, come vedremo dopo, sarà quella che rivelerà le diverse immagini all’interno del nostro sprite.

Passo 3: il codice CSS

Prima di tutto, creeremo una classe ‘sprite’ che caricherà l’immagine dello sprite.

.sprite {background:url(../images/mySprite.png);}

Dopo il caricamento, dobbiamo definire l’altezza (height) e la larghezza (width) delle immagini all’interno dello sprite.

Figura 3 – Definire altezza e larghezza

screenshot

Se vuoi aggiornamenti su Creare sprite CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Creare sprite CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy