La curiosità del vedo e non vedo
Voglio trattare con voi una tecnica molto particolare per ottimizzare l’impostazione grafica del sito ed aumentarne la leggerezza.
Sto parlando degli sprite CSS, che rappresentano una tecnica per ridurre il numero di richieste HTTP fatte per accedere alle immagini usate su un sito.
Le immagini vengono combinate in una immagine più grande e definite da coordinate X ed Y, poi attraverso la proprietà CSS background-position, si sposterà l’area visibile sulla sotto-immagine desiderata, in pratica si spostano semplicemente le coordinate del punto di visibilità.
Vi ho disegnato uno schema per chiarirvi il concetto:
Analizziamo assieme i punti:
- Al punto 1 abbiamo la nostra immagine completa di tutte le altre sotto-immagini.
- Al punto 2 rendiamo visibile solo l’immagine1 utilizzando il seguente blocco di codice:
a#EsempioCss{
background-image: url(EsempioSprite.png);
background-position: 0 0;
display:block;
width: 185px;
height: 62px;
}
- Al punto 3 rendiamo visibile solo l’immagine2 al passaggio del mouse sopra l’immagine:
a#EsempioCss:hover{
background-image: url(EsempioSprite.png);
background-position: 0px -430px;
display:block;
width: 185px;
height: 62px;
}
Potrete scaricare l’esempio completo: Css-Sprite-WebFandom, e per chi volesse approfondire consiglio i seguenti articoli:
Nel prossimo articolo vedremo assieme come generare automaticamente il codice degli sprite.
Come scritto in Wikipedia: "Il fandom è una sottocultura formata dalla comunità di appassionati che condividono un interesse comune in un qualche fenomeno culturale." L'obiettivo di questo blog è quello di creare una community di persone per condividere esperienze ed opinioni su argomenti informatici. Buona lettura a tutti!
Il nostro blog, è "un mercato dell’informazione" dove i clienti entrano, guardano, alcuni si lamentano, 
Cos’hanno in comune: Twitter, Facebook e WordPress? La risposta è Tweetpo.st! Tweetpo.st è 
Perchè quando commentiamo sui Blog, alcuni hanno l’immagine personalizzata e altri no? Perchè molti 
Non c’è dubbio che Photoshop sia il miglior programma di fotoritocco esistente, soprattutto per un fotografo, 
Il Life Game si sviluppa in una griglia quadrata, ogni singolo quadratino è considerato come una cellula, 
Federico
22 giu, 2009
Idolo!!! A parole sembra difficile ma lo schema e l’esempio chiariscono molto …
Alessandro NeRON Lorenzi
22 giu, 2009
Geniale
comunque ochio e croce nell’hover basta mettere una riga sola:
a#EsempioCss:hover{background-position: 0px -430px;}
tutto il resto dovrebbe essere “ereditato”
Roberta
23 giu, 2009
Ma quindi puoi regolare anche la larghezza? E se ho più di una immagine come faccio a trovare le coordinate?
Alberto
23 giu, 2009
Questo è l’argomento del prossimo articolo Roberta! … Si Ale hai ragione il resto è ereditato, è un bene che fai questa osservazione perchè così si evitano righe di codice in più!
Teuz
23 giu, 2009
Qui c’è un punto che mi è poco chiaro, quale valore devo assegnare in background-position? Le coordinate del punto in alto a sinistra o quelle del centro dell’immagine?
Poi, se l’immagine è un 185 x 123, perchè nel secondo css c’è, in background-position, una coordinata che supera i 400 px?
Ma probabilmente non sono riuscito a capire precisamente cosa sono e come funzionano precisamente i due css.
Alessandro NeRON Lorenzi
23 giu, 2009
@teuz
ehehe credo che li sia 43px con uno zero che é saltato fuori
Federico
23 giu, 2009
E’ la stessa cosa che mettere:
background-position: top top; nel a#EsempioCss
e
background-position: center bottom; in a#EsempioCss:hover
Solo che Alberto ha messo i valori numerici, per muovere le coordinate.
Si possono usare 3 modi per visualizzare le varie immagini: valori espressi in px, valori in percentuale oppure usare i comandi letterali che sono:
- Top
- Bottom
- Center
- Left
- Right
Il -430 è corretto perchè sarebbe da trasformare in percentuale rispetto all’area della figura e il segno meno davanti è per farla “salire” verso l’alto per far visualizzare quella successiva.
Alberto
23 giu, 2009
Col prossimo articolo Teo ti sarà molto più chiaro!!