En introduktion til CSS Image Sprites: de er nemme at lære og dejlige at kende

Billedsprites har været her siden 1970'erne. De blev brugt til de første computeranimationer på Atari og andre konsoller. Efterhånden som de gik, blev de brugt mindre og mindre af front-end-udviklere, der ønskede mere avanceret (læs: realistisk) grafik til 3D og virtual reality.

I de senere år har de dog gjort comeback.

Sprite er et computergrafikudtryk for et todimensionalt bitmap, der er integreret i en større scene.

I de sidste par år voksede Facebook, Twitter, Instagram og mange andre sociale medieplatforme som vanvittige. Med vækst kom deres behov for at optimere hvor det var muligt og formindske størrelsen på serveranmodninger. Det var da CSS image sprites gik tilbage til mainstream.

For en platform som Facebook - der har mere end 1 milliard brugere - kræver ikoner, billeder og lignende indhold flere serveranmodninger. Anmodningerne overbelaster trafikken unødigt.

Så hvad gør du for at reducere serveranmodninger og båndbredde? Drej til CSS image sprites.

I stedet for at stille en anmodning om dit profilbillede, din vens profilbillede, dine album miniaturer osv. Giver sprites dig mulighed for at bruge et billede, hvilket kun betyder en anmodning. Du kan manipulere billedet for at vise disse billeder som dele af et større billede.

Lad os se et eksempel på flag:

Lad os nu se, hvordan det fungerer:

Som du kan se i koden ovenfor, har vi oprettet basen, der består af tre divs, hvor hver div vil være en sprite-bærer.

For det første valgte vi div med id'et for først. Vores div vil have en størrelse på højde og bredde, der vises på vores side. Som baggrund indlæser vi et billede med URL (“//i.postimg.cc/R0N7nkH9/flags.png”) .

Den næste ting er at skalere ned / op vores baggrundsbillede med baggrundsstørrelse: 1400px. (Vi kan bruge den faktiske pixelstørrelse, procentdel, em eller rem.) Denne parameter giver os mulighed for at "zoome ind" på et billede indtil det punkt, hvor kun en bestemt del af billedet vises.

Endelig er de to parametre, der kommer efter baggrunden:

URL (“// i.postimg.cc/R0N7nkH9/flags.png"), vil flytte den del af hovedbilledet, der vil være synlig langs X- og Y-aksen. Hvilket betyder, at i dette tilfælde baggrund:

URL (“// i.postimg.cc/R0N7nkH9/flags.png") -86px -87px; vi viser den del, der er forskudt fra toppen af ​​billedet med 87 pixels fra toppen og 86 pixels fra venstre .

Det første tal ( -86px ) står for X-aksen, hvor negativ betyder at bevæge sig fra venstre til højre og positiv står for at gå fra højre til venstre. De andet tal (-87px) bruges til at forskyde fra top til bund, hvor omvendte regler gælder, et positivt tal betyder at gå fra bund til top og negativ selvfølgelig gå fra top til bund.

Som du kan se på det originale billede, er det flag, vi fik (Bosnien), faktisk andet fra toppen og andet fra venstre.

Godt nok? OK lad os fortsætte.

Lad os nu udfylde div med et ID på sekund. De samme regler for opsætning vil gælde, og den eneste ændring vil være, at i dette tilfælde forbliver vi på den originale X-akse (0px), og Y-retning vil gå fra den nederste del mod toppen (89px). Igen, hvis du tjekker det originale billede, kan du muligvis se, at (Usbekistan) først er fra bunden og først fra venstre.

Og sidst men ikke mindst…

Ja, til sidst udfylder vi den sidste div med et ID på tredje. Reglerne er de samme, og hvis du gætter på, at vi bevægede os fra bunden mod toppen, så er det sandt.

Nu sandhedens øjeblik….

I ovenstående tilfælde bevægede vi os langs X- og Y-aksen for at vise visse dele af billedet med flag. Gå højre mod venstre og ned fik vi Bosnien (X-aksen), gående fra bunden og venstre (Y-aksen) fik vi Thailand og Usbekistan. Som du har set bruger vi kun et billede, og det betyder kun en anmodning om et billede.

Det er vigtigt at vide, at når du bygger sprites, skal basisbilledet have de samme dele af billeder inden for det for din egen bekvemmelighed. Som i dette tilfælde, hvor vi bevæger os mod venstre og højre, top og bund, efter størrelsen på delen plus det hvide rum. Usbekistan (89px) og Thailand (178px) har en forskel på 89px, hvilket er deres faktiske størrelse (87px) plus hvidt mellemrum (1px + 1px).

Ja, du kan også lave animationer.

For at lave denne stil med søde, seje old school-animationer har vi kun brug for CSS-animationsegenskaber. I dette tilfælde flyttede vi det originale billede langs X-aksen, og vi får denne gamle animation. Tro mig med sprites, der er ingen grænser.

Det er så let som det :)

Jeg håber, at du har nydt at læse denne artikel.

Hold øje med mere ...