Sprite-blað fyrir CSS

Hvernig býrð þú til sprite-blað

1. Slepptu myndunum þínum á svæðið eða smelltu á það til að velja þær. PNG, SVG, WebP, JPG og önnur snið sem vafrinn þinn getur lesið eru tekin, allt að 500 myndir. Hver skrá birtist á listanum Myndir með stærð sinni; hnappurinn × fjarlægir eina mynd og Fjarlægja allar myndir tæmir listann.
2. Veldu Uppsetning: Rist, Þétt pakkað (minnsta blaðið), Lárétt ræma eða Lóðrétt ræma. Með Rist ákveður Dálkar (0 = sjálfvirkt) fjölda dálka.
3. Stilltu Fylling (px) milli sprite-mynda (2 sjálfgefið) og hakaðu við Veldisstærð tveggja (256, 512, 1024…) ef leikjavélin þín eða skjákortið þarf þess.
4. Veldu Gagnaskrá: CSS (bekkir með background-position), JSON (rammakort) eða CSS og JSON. Stilltu Skráarnafn og Forskeyti CSS-bekkja (hvort tveggja „sprite“ sjálfgefið).
5. Skoðaðu forskoðunina, Stærð blaðs og Nýtt rými, og smelltu síðan á Sækja ZIP (PNG + gögn) eða Sækja aðeins PNG. Myndaður kóði er líka hægt að afrita beint.

Myndir eru afkóðaðar í vafranum þínum og engu er hlaðið upp. SVG án eigin breiddar og hæðar er rastað þannig að lengri hliðin verði 256 px.

Að velja uppsetningu

• Rist gefur hverri mynd reit í stærð stærstu myndarinnar. Með sjálfvirkum dálkum er ristin um það bil ferningslaga. Hún er einföld og fyrirsjáanleg, og tilvalin þegar allar sprite-myndir eru jafn stórar, eins og í flísasetti.
• Þétt pakkað (minnsta blaðið) notar hillupökkun: myndir eru raðaðar með þá hæstu fyrst og settar frá vinstri til hægri í raðir. Verkfærið prófar margar breiddir blaðsins og heldur þeirri sem hefur minnsta flatarmálið, með námundun upp í veldisstærð tveggja þegar sá valkostur er virkur. Best fyrir táknmyndir í blönduðum stærðum.
• Lárétt ræma og Lóðrétt ræma setja myndirnar í eina röð eða einn dálk í þeirri röð sem þú bættir þeim við. Það er það sem margir hreyfimyndaspilarar búast við fyrir ramma.

Blaðið getur ekki farið yfir 16 384 px á hverja hlið eða um 16,7 megadepla, sem eru mörkin sem vafrar geta teiknað.

Notkun CSS-kóðans

CSS-ið inniheldur grunnbekk með blaðinu sem background-image og no-repeat, síðan einn bekk fyrir hverja sprite-mynd sem dregur nafn sitt af skránni: home.png verður sprite-home. Nöfn eru gerð með lágstöfum, broddar fjarlægðir, aðrir stafir verða bandstrik og tvítekningar fá -2, -3.

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

Hver sprite-bekkur setur width, height og background-position með neikvæðum færslum. Sprite-mynd við x = 40, y = 20 fær background-position: -40px -20px: allt blaðið er fært 40 px til vinstri og 20 px upp inni í þættinum, þannig að aðeins sú sprite-mynd sést í gegnum ramma þáttarins. Fylling kemur í veg fyrir að nágrannamyndir blæði inn þegar síðan er stækkuð eða áferð er síuð.

Skjáir með háa deplaþéttni: teiknaðu myndirnar þínar í tvöfaldri birtingarstærð, búðu til blaðið, bættu síðan background-size stilltu á helming af stærð blaðsins við grunnbekkinn og helmingaðu breidd, hæð og færslur. Verkfærið býr þetta ekki til; þetta er handvirk lagfæring.

Eru sprite-blöð enn gagnleg með HTTP/2?

Sprite-blöð voru fundin upp til að spara HTTP-beiðnir. Með fjölföldun HTTP/2 hlaðast margar litlar skrár nánast jafn hratt og ein, þannig að ávinningurinn fyrir vefsíður er mun minni, og SVG-táknmyndir eða táknmyndaletur eru oft betri fyrir skalanlegar táknmyndir. Sprite-blöð eru enn staðallinn fyrir 2D-leiki og hreyfimyndaramma: ein áferð þýðir færri áferðarskipti á skjákortinu og eina skrá til að hlaða.