Kako se implementiraju CSS sprite-ovi na stranici ili sajtu?

CSS sprite-ovi se implementiraju kombinovanjem više malih slika u jedan veliki fajl (sprite), a zatim se prikazuje potrebni deo tog velikog fajla na elementima stranice pomoću CSS-a.

Glavni koraci:

1. Kreiranje sprite-a: Sve slike koje treba da se kombinuju (ikone, mali pozadini itd.) se postavljaju u jedan fajl. Ovo se može uraditi ručno u grafičkom uređivaču ili pomoću automatskih alata/generatora sprite-ova.

2. Primena CSS-a: Za svaki element u koji je potrebno "ubaciti" sliku iz sprite-a, podešavaju se sledeće CSS osobine:

   • background-image: ukazuje putanju do sprite fajla.
   • background-repeat: no-repeat;: isključuje ponavljanje slike u pozadini.
   • background-position: određuje koordinate gornjeg levog ugla dela sprite-a koji treba prikazati. Ove koordinate ukazuju na horizontalno i vertikalno pomeranje od gornjeg levog ugla elementa.
   • width i height: određuju dimenzije oblasti u kojoj će biti prikazan deo sprite-a. Ove dimenzije obično odgovaraju veličini originalne ikone ili slike.

Primer za korišćenje za dve ikone u sprite-u:

/* Fajl sprite: icons.png */

.icon {
  background-image: url('icons.png'); // Putanja do sprite fajla
  background-repeat: no-repeat; // Ne ponavljaj
  width: 32px; // Širina elementa
  height: 32px; // Visina elementa
  display: inline-block; /* Ili drugi način da element bude blok/inline-block */
}

/* Ikona 1: nalazi se u sprite-u na adresi 0, 0 */
.icon-home {
  background-position: 0 0;
}

/* Ikona 2: nalazi se u sprite-u na adresi -40px, 0 (npr., ako između ikona postoji razmak od 8px) */
.icon-settings {
  background-position: -40px 0;
}

Prednosti:

• Smanjenje HTTP zahteva: Umesto više zahteva, pregledač učitava samo jedan sprite fajl, čime se skraćuje vreme učitavanja stranice.
• Keširanje: Učitava se jedan veliki fajl koji se kešira, umesto više malih.

Nedostaci:

• Složenost održavanja: Pri dodavanju ili izmeni slika, potrebno je ponovo napraviti sprite i ažurirati CSS koordinate.
• Ne odgovara za velike ili veoma različite slike.