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:
- Laboratorio di Accessibilità e Usabilità
- SmashingMagazine
Nel prossimo articolo vedremo assieme come generare automaticamente il codice degli sprite.
Altri articoli correlati:
Alberto TrussardiFondatore del progetto webfandom, è un Web Designer freelance di Bergamo che collabora in tutta Italia con diverse aziende nel campo dello sviluppo web e marketing online. Ama l’arte e la poesia, due ottime compagne che lo aiutano a trovare ispirazione per i lavori che svolge.
![Oltre 100 paper texture gratuite che potranno aiutarti a migliorare i background dei tuoi progetti grafici + [tutorial su come creare un effetto vintage a un foglio di carta]](http://www.webfandom.com/wp-content/uploads/2010/05/texture_vecchia_carta-150x150.jpg "Oltre 100 paper texture gratuite che potranno aiutarti a migliorare i background dei tuoi progetti grafici + [tutorial su come creare un effetto vintage a un foglio di carta]")
Idolo!!! A parole sembra difficile ma lo schema e l’esempio chiariscono molto …
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”
Ma quindi puoi regolare anche la larghezza? E se ho più di una immagine come faccio a trovare le coordinate?
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ù!
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.
@teuz
ehehe credo che li sia 43px con uno zero che é saltato fuori
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.
Col prossimo articolo Teo ti sarà molto più chiaro!!