Bevezetés a CSS Image Sprites programba: könnyen megtanulhatók és nagyszerűek

A képi spritek az 1970-es évek óta vannak itt. Ezeket használták az Atari és más konzolok első számítógépes animációihoz. Az idő múlásával egyre kevésbé használták azokat a front-end fejlesztők, akik fejlettebb (olvasható: realisztikus) grafikákat akartak a 3D és a virtuális valóság számára.

Az utóbbi években azonban visszatértek.

A Sprite egy nagyobb dimenzióba integrált kétdimenziós bittérkép számítógépes grafikus kifejezése.

Az elmúlt években a Facebook, a Twitter, az Instagram és sok más közösségi média platform őrülten nőtt. A növekedéssel együtt szükségük volt optimalizálni, ahol csak lehetséges, és csökkenteni kell a szerver kérelmek méretét. Ekkor a CSS image-spritjei visszatértek a mainstreambe.

Egy olyan platformhoz, mint a Facebook - amely több mint 1 milliárd felhasználóval rendelkezik - az ikonok, képek és hasonló tartalmak megjelenítése több szerver kérést igényel. A kérések szükségtelenül túlterhelik a forgalmat.

Tehát mit tegyen a szerverkérések és a sávszélesség csökkentése érdekében? Forduljon a CSS image sprite-hez.

Ahelyett, hogy a profilképedre kéri, a barátod profilképét, az album indexképeit stb., A spritek lehetővé teszik egy kép használatát, ami csak egy kérést jelent. A képet úgy manipulálhatja, hogy ezeket a képeket egy nagyobb kép részeként jelenítse meg.

Lássunk egy példát a zászlókkal kapcsolatban:

Most nézzük meg, hogyan működik:

Amint a fenti kódban láthatja, létrehoztuk a bázist, amely három div-ből áll, ahol minden div sprite hordozó lesz.

Először az első azonosítóval rendelkező div-t választottuk. A div-nek magassága és szélessége lesz, amely megjelenik az oldalunkon. Háttérként egy képet töltünk be, amelynek URL-je van (“//i.postimg.cc/R0N7nkH9/flags.png”) .

A következő dolog a háttérképünk kicsinyítése / felfelé méretezése háttérmérettel: 1400px. (Használhatunk tényleges pixelméretet, százalékot, emet vagy remet.) Ez a paraméter lehetővé teszi számunkra, hogy „nagyítsunk” egy képet addig a pontig, ahol a képnek csak egy része jelenik meg.

Végül a két háttér, amely a háttér után következik :

Az URL („// i.postimg.cc/R0N7nkH9/flags.png") elmozdítja a fő kép azon részét, amely látható lesz az X és Y tengely mentén. Ez azt jelenti, hogy ebben az esetben a háttér:

URL („// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; megmutatjuk azt a részt, amelyet a kép tetejétől 87 pixel felülről és 86 pixel balról eltol .

Az első szám ( -86px ) az X tengelyt jelenti, ahol a negatív azt jelenti, hogy balról jobbra halad, a pozitív pedig azt, hogy jobbról balra halad. A második számokat (-87px) felülről lefelé történő eltolásra használják, ahol fordított szabályok érvényesek, a pozitív szám azt jelenti, hogy alulról felfelé halad, és negatív természetesen felülről lefelé halad.

Amint az eredeti képen látható, a megszerzett zászló (Bosznia) valóban felülről a második, balról pedig a második.

Elég jó? OK, folytassuk.

Most töltsük fel a div-et egy második azonosítóval. Ugyanazok a szabályok vonatkoznak a beállításra, és az egyetlen változás az lesz, hogy ebben az esetben az eredeti X tengelyen maradunk (0 képpont) , az Y irány pedig az alsó résztől a felső felé halad (89 képpont). Ismét megnézve az eredeti képet, láthatja, hogy (Üzbegisztán) először alulról, és először balról van.

És végül de nem utolsó sorban…

Igen, végül az utolsó div-ot kitöltjük a harmadik azonosítóval. A szabályok ugyanazok, és ha sejtette, hogy alulról felfelé haladtunk, akkor ez igaz.

Most az igazság pillanata….

A fenti esetben az X és Y tengely mentén haladtunk, hogy a kép bizonyos részeit zászlókkal jelenítsük meg. Jobbra balra és lefelé haladva megvan Bosznia (X tengely), alulról és balról (Y tengely) haladva Thaiföld és Üzbegisztán. Mint látta, csak egy képet használunk, és ez csak egy kép kérését jelenti.

Fontos tudni, hogy amikor a fröccsöket épít, akkor az alapképnek ugyanazon képrészekkel kell rendelkeznie, az Ön kényelme érdekében. Mint ebben az esetben, amikor balra és jobbra, fent és alul haladunk az adag és a fehér tér nagysága szerint. Üzbegisztán (89 képpont) és Thaiföld (178 képpont) különbsége 89 képpont, ami a tényleges méretük (87 képpont) és a fehér tér (1 képpont + 1 képpont).

Igen, animációkat is készíthet.

Annak érdekében, hogy ilyen stílusú édes, klassz old school animációkat készítsünk, csak CSS animációs tulajdonságokra van szükségünk. Ebben az esetben az eredeti képet az X tengely mentén mozgattuk, és ezt a régi stílusú animációt kaptuk. Hidd el spritekkel, nincsenek határok.

Olyan egyszerű, mint ez :)

Remélem, hogy élvezettel olvasta ezt a cikket.

Maradjanak velünk a hírek…