Creare e Usare Immagini in Sprite CSS – CSS Trick #6

Continua la rubrica su JuliusDesign, CSS Trick in cui vedremo alcuni codici CSS per facilitare o agevolare il flusso di lavoro.

Oggi vediamo insieme come utilizzare la tecnica CSS Sprite, utilizzata creando un’unica immagine accorpando gli elementi fondamentali di una grafica web, con lo scopo di diminuire e ottimizzare il tempo di precaricamento.

Questa tecnica che consiste nel caricare una singola immagine e spostarle con l’ausilio di codice CSS al fine di aver una sola richiesta (HTTP request), allegerendo la pagina e velocizzandone la visualizzazione.

La Proprietà background-position

La proprietà background-position permette tramite percentuali di spostare un determinato sfondo associato a uno stile.

Grazie agli stati hover e active noi possiamo far muovere la nostra immagine e visualizzare una determianta porzione.

In questo modo l’immagini da caricare sarà solo una, e per eventuali modifiche dovremo solo fare riferimento a un unico file.

Come devo creare l’immagine con tutti gli elementi?

Puoi usare un qualsiasi software di editor come Fireworks o Phostohop e inserire tutti gli elementi che vuoi gestire tramite la tecnica CSS Sprite.

Sono molti i BIG che usano questa tecnica, da Google a YouTube e da Facebook a Twitter.

Per creare una corretta aggregazione di elementi grafici nel tuo file, devi stare attento a inserirli in modo che possano essere selezionati singolarmente e che non si sovrappongano.

Come vedremo nel codice CSS qui di seguito, non andremo altro che visualizzare una determianta area, quadrato o rettangolo e quindi bisogna distanziare gli elementi in modo corretto.

Il “trucco” è creare un’unica immagine con gli elementi fondamentai della nostra grafica web ben distanziati tra di loro.

Codice CSS

Scarichiamo da 365PSD un esempio di interfaccia grafica, ecco un esempio di pulsante base associato a un comune collegamento a un testo in <a href>.

.pulsante {
background: url("grey-ui_elements.jpg");
background-repeat: no-repeat;
background-position: -22px -28px;
display: block;
height: 45px;
line-height: 42px;
margin: 0 auto;
width: 114px;
}

Questa classe ci servirà per impostare il primo stile al nostro pulsante con classe “pulsante”.

Come vedete nella classe l’attributo background-position: è impostato a X -22px e Y -28px.

a:active.pulsante {
background: url("grey-ui_elements.jpg");
background-repeat: no-repeat;
background-position: -132px -28px;
display: block;
height: 45px;
line-height: 46px;
width: 114px;
}

In questo caso agiremo sullo stato active, per simulare lo stato di pressione pulsante.

Come vedete nella classe l’attributo background-position è impostato a -132px e -28px infatt abbiamo mosso la nostra immagine orizzontalmente di 110px.

Molto importante è ricordarsi anche di definire altezza e larghezza dell’oggetto da rendere visibile e in qualche modo tagliare dalla visualizzazione.

In questo modo l’effetto sarà quello voluto, e nessuno si accorgerà che l’immagine sia stata mossa o vedere fastidiosi buci in pre-caricamento di immagini singole.

Links utili

L’immagine contenete i vari oggetti può essere realizzata con un comune editor di immagini come vi dicevo prima, oppure per ottimizzare il proprio tempo bisogna sapere che esistono tools che possono darci una mano.

Tra i diversi tool gratuiti online vi segnalo SpriteBox e CSS Sprites Generator due utilissimi strumenti da consocere.

Segnala un Tuo CSS Trick!

Conosci un codice CSS che potrebbe essere utile ai lettori di JuliusDesign?

Invia una email con il codice CSS+HTML dettagliato a csstrick@juliusdesign.net, il prossimo codice potrebbe essere firmato da te!

Conoscevi questo codice CSS?

Consiglia questa tecnica ai tuoi collegi o ai tuoi amici!

CSS TrickWebdesign