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:

Sprites-Css-WebFandom-Cosa-sono

Analizziamo assieme i punti:

  • Al punto 1 abbiamo la nostra immagine completa di tutte le altre sotto-immagini.

EsempioSprite

  • 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.

Altri articoli correlati:

Alberto Trussardi

Alberto Trussardi è un Web Designer Freelance di Bergamo. Studentre universitario presso il Dipartimento di Scienze Informatiche dell'Università degli Studi di Milano. Ama la grafica e tutto quello che gravita attorno al design, informatica e web.
Ti è piaciuto l'articolo?

Puoi seguire tutti gli aggiornamenti del blog iscrivendoti gratuitamente ai Feed Rss!
  • Feed

  • Cosa sono

  • Reader

Se vuoi puoi condividerlo su:

Puoi trovare articoli simili in: Web Design

8 COMMENTI

  • Federico
    22 giugno 2009

    Idolo!!! A parole sembra difficile ma lo schema e l’esempio chiariscono molto …

  • Alessandro NeRON Lorenzi
    22 giugno 2009

    Geniale :D
    comunque ochio e croce nell’hover basta mettere una riga sola:

    a#EsempioCss:hover{background-position: 0px -430px;}

    tutto il resto dovrebbe essere “ereditato” :P

  • Roberta
    23 giugno 2009

    Ma quindi puoi regolare anche la larghezza? E se ho più di una immagine come faccio a trovare le coordinate?

    • Alberto
      23 giugno 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ù!

      risposta a:  Roberta
  • Teuz
    23 giugno 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 giugno 2009

    @teuz
    ehehe credo che li sia 43px con uno zero che é saltato fuori :P

  • Federico
    23 giugno 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 giugno 2009

    Col prossimo articolo Teo ti sarà molto più chiaro!!

LASCIA UN COMMENTO pesonalizza il tuo avatar registrandoti su gravatar.com