Uvod u CSS Image Sprite: lako ih je naučiti i sjajno ih je znati

Spriteovi slika su ovdje od 1970-ih. Koristili su se za prve računalne animacije na Atariju i drugim konzolama. Kako je vrijeme prolazilo, sve su ih manje upotrebljavali front-end programeri koji su željeli napredniju (čitaj: realnu) grafiku za 3D i virtualnu stvarnost.

Međutim, posljednjih godina vratili su se.

Sprite je termin računalne grafike za dvodimenzionalnu bitmapu koja je integrirana u veću scenu.

U posljednjih nekoliko godina Facebook, Twitter, Instagram i mnoge druge platforme društvenih mreža rasle su poput ludila. S rastom je došla njihova potreba za optimizacijom gdje god je to moguće i smanjenjem veličine zahtjeva poslužitelja. Tada su se CSS slikovni spitovi vratili u mainstream.

Za platformu poput Facebooka - koja ima više od milijardu korisnika - prikazivanje ikona, slika i sličnog sadržaja zahtijeva više zahtjeva poslužitelja. Zahtjevi nepotrebno preopterećuju promet.

Pa, što radite kako biste smanjili zahtjeve poslužitelja i propusnost? Okrenite se CSS-ovim spritovima.

Umjesto da zatražite sliku profila, sliku profila prijatelja, minijature albuma itd., Spritovi vam omogućuju upotrebu jedne slike, što znači samo jedan zahtjev. S tom slikom možete manipulirati tako da prikazuje te slike kao dijelove jedne veće slike.

Pogledajmo primjer koji uključuje zastave:

Sada da vidimo kako to funkcionira:

Kao što možete vidjeti u gornjem kodu, postavili smo bazu koja se sastoji od tri div-a, gdje će svaki div biti nositelj spritea.

Prvo smo odabrali div s ID-om prvog. Naš div će imati veličinu visine i širine koja će biti prikazana na našoj stranici. Kao pozadinu učitat ćemo sliku s URL-om („//i.postimg.cc/R0N7nkH9/flags.png") .

Sljedeća je stvar smanjiti / povećati našu pozadinsku sliku s veličinom pozadine: 1400px. (Možemo koristiti stvarnu veličinu piksela, postotak, em ili opciju.) Ovaj će nam parametar omogućiti "zumiranje" slike do točke na kojoj će se prikazivati ​​samo određeni dio slike.

Na kraju, dva parameta koja dolaze nakon pozadine:

URL ("// i.postimg.cc/R0N7nkH9/flags.png"), premjestit će dio glavne slike, koji će biti vidljiv duž osi X i Y. Što znači da u ovom slučaju pozadina:

URL (“// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; prikazivat ćemo dio koji je odmaknut od vrha slike za 87 piksela od vrha i 86 piksela s lijeve strane .

Prvi broj ( -86px ) označava os X, gdje negativno znači pomicanje slijeva udesno, a pozitivno prelazak udesno ulijevo. Drugi brojevi (-87px) koriste se za pomak od vrha prema dnu, gdje se primjenjuju obrnuta pravila, pozitivan broj znači odozdo prema gore, a negativni, naravno, odozgo prema dolje.

Kao što možete vidjeti na originalnoj slici, zastava koju smo dobili (Bosna) doista je druga s vrha i druga s lijeve strane.

Dovoljno dobro? OK, nastavimo.

Sada napunimo div s ID-om sekunde. Primijenit će se ista pravila za postavljanje, a jedina promjena će biti ta što ćemo u ovom slučaju ostati na izvornoj osi X (0 piksela), a smjer Y ići će od donjeg dijela prema vrhu (89 piksela). Opet, ako provjerite izvornu sliku, možda ćete vidjeti da je (Uzbekistan) prvo odozdo, a prvo slijeva.

I posljednje, ali ne najmanje važno ...

Da, na kraju, zadnji div popunjavamo ID-om trećine. Pravila su ista, a ako pogađate da smo se pomaknuli odozdo prema vrhu, to je istina.

Sada trenutak istine ...

U slučaju gore, kretali smo se duž osi X i Y kako bismo određene dijelove slike prikazali zastavicama. Idući lijevo-dolje dobili smo Bosnu (os X), odozdo i lijevo (os Y) Tajland i Uzbekistan. Kao što ste vidjeli, koristimo samo jednu sliku, a to znači samo jedan zahtjev za sliku.

Važno je znati da kada gradite spriteove, ta osnovna slika treba imati iste dijelove slika u sebi, radi vaše udobnosti. Kao u ovom slučaju kada se krećemo prema lijevoj i desnoj, gornjoj i donjoj strani, prema veličini dijela plus bijeli prostor. Uzbekistan (89 piksela) i Tajland (178 piksela) imaju razliku od 89 piksela, što je njihova stvarna veličina (87 piksela) plus bijeli prostor (1 piks + 1 piks).

Da, i vi možete raditi animacije.

Da bismo napravili ovaj stil slatkih, cool old school animacija, trebaju nam samo svojstva CSS animacije. U ovom smo slučaju premještali izvornu sliku po X-osi i dobili smo ovu animaciju u starom stilu. Vjerujte mi sa spritovima, nema ograničenja.

Jednostavno je to :)

Nadam se da ste uživali čitajući ovaj članak.

Pratite još ...