Što su CSS spriteovi i kako ih koristiti?

Datum objave

31.07.2010

Autor

Vodič je stariji od 2 godine i možda nije u potpunosti aktualan.

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

Što su CSS spriteovi i kako ih koristiti?

Photo credits: Unsplash

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.

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.