Vodič je stariji od 2 godine i možda nije u potpunosti aktualan. Za provjeru, koristite “pitaj učitelja”.

Što su CSS spriteovi i kako ih koristiti?

Što su CSS spriteovi i kako ih koristiti?
Autor članka: Igor Kovačić
Kategorije: Programiranje
Datum objave: 31.07.2010

Pri izradi većih web stranica iznimno je bitno opitimizirati stranice za brzo učitavanje na klijentskoj strani. Jedna od metoda koju koristimo su tzv. “CSS sprites“.

Primjer na kojem ćemo raditi biti će jednostavan: Button i njegovo rollover stanje.

Na takvom primjeru 2 requesta možemo smanjiti na 1.

Izrada slike

Prije svega moramo napraviti sliku koja će sadržavati oba izgleda buttona.

css-sprite-01

Pisanje HTML-a

<a href="#" class="button">Tekst linka</a>

Pisanje CSS-a

.button {
width: 151px;
height: 25px;
display: block;
background: url(css-sprite-01.gif) no-repeat 0 0; /* prva nula znači pozicija na y-osi od gornjeg lijevog ugla, a druga po x-osi */
text-indent: -9999em; /* sakrivamo tekst koji piše untar a taga */
overflow: hidden;
}
.button:hover {
background-position: 0 -35px; /* pošto se po slici krećemo prema dolje tada je vrijednost negativna */
}

To je sve! ;)
Zamislite koliko biste ubrzali učitavanje kada bi Vaš cijeli Web bio u jednom sprite-u.
Pogledajte primjer u browseru: CSS sprite primjer.

Ponavljanje pozadine

Ukoliko imate pozadine koje se pojavljaju po x-osi tada slike slažite jednu ispod druge.
Ukoliko imate pozadine koje se pojavljaju po y-osi tada slike slažite jednu do druge.

Kod repeatanja pozadine, imajte na umu da je pozadina široka tj. visoka koliko i sprite.

Alati

Na linku SpriteMe možete pronaći alat koji iz postojećeg web-a može napraviti sprite te odgovarajući CSS kod.

Komentirajte prvi!

Pratite komentare na članak 'Što su CSS spriteovi i kako ih koristiti?' putem RSS feeda.

Ostavite komentar na ovaj članak

Uvredljivi i spam komentari biti će obrisani. Ukoliko se Vaš komentar ne pojavi odmah, pričekajte da ga odobrimo ;-). Odgovore na pitanje brže ćete dobiti ukoliko nas kontaktirate putem forme pitajte učitelja.