CSS sprite lapo generatorius

Kaip sukurti sprite lapą

1. Nutempk vaizdus į sritį arba spustelėk ją ir pasirink failus. Priimami PNG, SVG, WebP, JPG ir kiti formatai, kuriuos gali nuskaityti naršyklė, iki 500 vaizdų. Kiekvienas failas atsiranda sąraše Vaizdai su savo dydžiu; mygtukas × pašalina vieną vaizdą, o Pašalinti visus vaizdus išvalo sąrašą.
2. Pasirink Išdėstymas: Tinklelis, Sutankintas (mažiausias lapas), Horizontali juosta arba Vertikali juosta. Su Tinklelis parinktis Stulpeliai (0 = automatiškai) nustato stulpelių skaičių.
3. Nustatyk Tarpas (px) tarp sprite elementų (numatytai 2) ir pažymėk Dvejeto laipsnio dydis (256, 512, 1024…), jei to reikia tavo varikliui ar vaizdo plokštei.
4. Pasirink Duomenų failas: CSS (background-position klasės), JSON (kadrų žemėlapis) arba CSS ir JSON. Pakoreguok Failo pavadinimas ir CSS klasės priešdėlis (abu numatytai „sprite“).
5. Patikrink peržiūrą, Lapo dydis ir Panaudota vieta, tada spustelėk Atsisiųsti ZIP (PNG + duomenys) arba Atsisiųsti tik PNG. Sugeneruotas kodas taip pat gali būti nukopijuotas tiesiogiai.

Vaizdai dekoduojami tavo naršyklėje ir nieko neįkeliama. SVG be savo pločio ir aukščio paverčiamas taškiniu vaizdu, kurio ilgesnė kraštinė – 256 px.

Išdėstymo pasirinkimas

• Tinklelis kiekvienam vaizdui suteikia didžiausio vaizdo dydžio langelį. Su automatiniais stulpeliais tinklelis maždaug kvadratinis. Jis paprastas ir nuspėjamas, idealus, kai visi sprite elementai vienodo dydžio, pavyzdžiui, plytelių rinkinyje.
• Sutankintas (mažiausias lapas) naudoja lentynų pakavimą: vaizdai surikiuojami nuo aukščiausio ir dedami iš kairės į dešinę eilėmis. Įrankis išbando daug lapo pločių ir palieka mažiausio ploto variantą, atsižvelgdamas į apvalinimą iki dvejeto laipsnio, kai ši parinktis įjungta. Geriausiai tinka skirtingų dydžių piktogramoms.
• Horizontali juosta ir Vertikali juosta deda vaizdus į vieną eilutę ar stulpelį tokia tvarka, kokia pridėjai. Taip kadrų tikisi daugelis animacijos grotuvų.

Lapas negali viršyti 16 384 px vienai kraštinei arba apie 16,7 megapikselio – tiek gali nupiešti naršyklės.

CSS naudojimas

CSS turi bazinę klasę su lapu kaip background-image ir no-repeat, tada po vieną klasę kiekvienam sprite elementui pagal jo failo pavadinimą: home.png tampa sprite-home. Pavadinimai rašomi mažosiomis raidėmis, diakritiniai ženklai pašalinami, kiti simboliai tampa brūkšneliais, o pasikartojimai gauna -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Kiekviena sprite klasė nustato width, height ir background-position su neigiamais poslinkiais. Sprite, esantis ties x = 40, y = 20, gauna background-position: -40px -20px: visas lapas elemento viduje pastumiamas 40 px į kairę ir 20 px aukštyn, todėl per elemento rėmelį matyti tik tas sprite. Tarpas neleidžia kaimyniniams sprite elementams persidengti, kai puslapis didinamas arba tekstūra filtruojama.

Didelio tankio ekranai: piešk vaizdus dvigubai didesnius už rodomą dydį, sugeneruok lapą, tada prie bazinės klasės pridėk background-size, lygų pusei lapo dydžio, ir perpus sumažink plotį, aukštį ir poslinkius. Įrankis to negeneruoja; tai rankinis pakeitimas.

Ar sprite elementai vis dar naudingi su HTTP/2?

Sprite elementai buvo išrasti HTTP užklausoms taupyti. Su HTTP/2 multipleksavimu daug mažų failų įkeliama beveik taip pat greitai kaip vienas, todėl nauda svetainėms yra kur kas mažesnė, o keičiamo mastelio piktogramoms dažnai geresnės SVG piktogramos ar piktogramų šriftai. Sprite lapai išlieka standartu 2D žaidimams ir animacijos kadrams: viena tekstūra reiškia mažiau vaizdo plokštės tekstūrų perjungimų ir vieną įkeliamą failą.