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!
8 Commenti
Ma perchè utilizzare percentuali per le dimensioni?
Utilizzando percentuali dobbiamo fare attenzione che portino sempre ad un numero intero e non possiamo aumentare la dimensione della sprite in futuro…
@stefano solinas: Ottima osservazione, è sempre meglio in PX.
@ stefano solinas:
Penso si possa anche indicare la background-position in px. Non ho mai provato, ma dovrebbe andare. Anche per immagini che richiederebbero percentuali molto esatte, con un paio di numeri dopo la virgola.
@ Enea Moro:
eh? Puoi scrivere 10.546 pixel ma:
1) Il numero viene arrotondato e non hai lo stesso arrotondamento su tutti i browser
2) Nessun broswer che conosca crea un effetto di pixel intermedio (come sfortunatamente fa photoshop).
Quindi perchè scrivere pixel con la virgola?
Interessante questa tecnica grazie!
@ stefano solinas:
Intendevo che per essere precisi dovresti usare percentuali con la virgola. In quel caso è meglio l’utilizzo dei pixel al posto delle percentuali.
Occhio Julius, il link al tag che c’è ad inizio articolo porta a pagina non trovata.
Articolo interessante cmq, adesso mi cerco e mi leggo gli altri trick che mi sa che me li sono persi.
La tecnica dei CSS Sprite è una delle migliori per aumentare la velocità del sito e diminuire il numero di richieste HTTP. Proprio qualche giorno fa ho creato una guida che ci permette di utilizzare SpriteMe, una Web App che genererà in modo automatico le tue immagini e fornirà le regole CSS da sostituire all’interno dei nostri fogli di stile.
Piccola Tip, potrete trovare anche un video dimostrativo su YouTube!
ho utilizzato css generator ed ho ottenuto i codici per un’unica immagine css spriter.
Come faccio ora ad inserirla nel sito?
ho caricato la nuova immagine ottenuta con css spriter in …/miotema/images, dove ci sono anche le altre.
ora nel foglio di stile mi dice css generator di inserire
#container li { background: url(csg-50289151dcb6a.png) no-repeat top left; }
e le css rules per le immagini.
la domanda è:
nel mio foglio css ci sono varie sezioni di background che richiamano le varie immagini (che io ho assemblato), su righe diverse e non in un solo richicamo , quindi come devo fare?