Skoči na sadržaj

Što su CSS spriteovi i kako ih koristiti?

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

Prijavite grešku u vodiču

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?

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.

Ako imate pitanja, možete nam se obratiti putem formulara pitajte učitelja

Komentirajte prvi