CSS Sprites

Nu stiu daca ati auzit de CSS Sprites, dar mie mi-a placut ideea asta. Sa va explic, sprite-urile in sine reprezinta niste imagini in care sunt bagate toate elementele grafice(ori majoritatea) ale unui web-site. Iata un exemplu trivial de sprite.

La ce sunt bune spriteurile? Atunci cind aveti o multime de elemente grafice, probe de background, iconite, bare, separatoare etc. este nevoie de cite un request la server pentru fiecare din aceste componente, si uneori poate sa puna in dificultate serverul datorita numarului mare de requeste-uri. Daca toate elementele grafice sunt puse intr-un singur fisier grafic, atunci se face doar o singura interpelare la server, si nu cite una pentru fiecare "particica".
Mai jos am scris un exemplu de utilizare a spriteurilor.


Codul HTML

<div id="wrapper">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>

Codul CSS
#left, #center, #right{
    float:left;
    margin-left:25px;
    background:url('images/mySprite.png');
}
#left{
    width:60px;
    height:60px;
    background-position:-2px -134px;
}
#center{
    width:52px;
    height:60px;
    background-position:-176px -133px;
}
#right{
    width:72px;
    height:60px;
    background-position:-230px -133px;
}

Si la final, ca de obicei rezultatul exemplului. Priviti atenti la exemplul spriteului de mai sus, si pe urma la exemplul de mai jos, am creat 3 div-uri si ca background am pus aleator 3 "bucati" din acel sprite.