Gineadóir bileoige spríte CSS

Conas bileog spríte a dhéanamh

1. Scaoil d’íomhánna sa limistéar scaoilte, nó cliceáil air chun iad a roghnú. Glactar le PNG, SVG, WebP, JPG agus na formáidí eile ar féidir le do bhrabhsálaí iad a léamh, suas le 500 íomhá. Taispeántar gach comhad sa liosta Íomhánna lena mhéid; baineann an cnaipe × íomhá amháin, agus glanann Bain na híomhánna go léir an liosta.
2. Roghnaigh Leagan amach: Greille, Pacáilte (an bhileog is lú), Stiall chothrománach nó Stiall ingearach. Le Greille, socraíonn Colúin (0 = uathoibríoch) líon na gcolún.
3. Socraigh Stuáil (px) idir spríteanna (2 de réir réamhshocraithe) agus tic Méid cumhachta de dhó (256, 512, 1024…) má theastaíonn sé ó d’inneall nó do GPU.
4. Roghnaigh an Comhad sonraí: CSS (ranganna background-position), JSON (léarscáil fráma) nó CSS agus JSON. Coigeartaigh an Ainm comhaid agus an Réimír ranga CSS (“sprite” an dá cheann de réir réamhshocraithe).
5. Seiceáil an réamhamharc, Méid na bileoige agus Spás in úsáid, ansin cliceáil Íoslódáil ZIP (PNG + sonraí) nó Íoslódáil PNG amháin. Is féidir an Cód ginte a chóipeáil go díreach freisin.

Déantar íomhánna a dhíchódú i do bhrabhsálaí agus ní uaslódáiltear tada. Rastraítear SVG gan leithead agus airde dá chuid féin lena thaobh is faide ag 256 px.

Leagan amach a roghnú

• Tugann Greille cill do gach íomhá de mhéid na híomhá is mó. Le colúin uathoibríocha, bíonn an ghreille thart ar chearnach. Tá sé simplí agus intuartha, agus idéalach nuair a bhíonn gach sprít den mhéid céanna, mar thacar tíleanna.
• Úsáideann Pacáilte (an bhileog is lú) pacáil seilfe: sórtáiltear íomhánna an ceann is airde ar dtús agus cuirtear ó chlé go deas i sraitheanna iad. Triaileann an uirlis go leor leithead bileoige agus coinníonn sí an ceann leis an limistéar is lú, agus cruinniú aníos go cumhacht de dhó san áireamh nuair atá an rogha sin cumasaithe. Is fearr é do dheilbhíní de mhéideanna measctha.
• Cuireann Stiall chothrománach agus Stiall ingearach na híomhánna i sraith nó i gcolún amháin san ord inar chuir tú leis iad. Sin a bhfuil súil ag go leor seinnteoirí beochana leis do fhrámaí.

Ní féidir leis an mbileog 16,384 px an taobh nó thart ar 16.7 megapicteilín a shárú, an teorainn is féidir le brabhsálaithe a tharraingt.

An CSS a úsáid

Tá aicme bhonn sa CSS leis an mbileog mar background-image agus no-repeat, ansin aicme amháin do gach sprít a ainmnítear óna chomhad: éiríonn home.png ina sprite-home. Déantar ainmneacha a chur i gcás íseal, bainfear comharthaí diacriticiúla, éiríonn carachtair eile ina fleiscíní, agus faigheann dúblaigh -2, -3.

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

Socraíonn gach aicme sprít width, height agus background-position le fritháireamh diúltacha. Faigheann sprít ag x = 40, y = 20 background-position: -40px -20px: aistrítear an bhileog iomlán 40 px ar chlé agus 20 px suas taobh istigh den eilimint, mar sin ní thaispeántar ach an sprít sin tríd an mbosca. Coinníonn stuáil spríteanna comharsanacha ó bhrúchtadh isteach nuair a zúmáiltear an leathanach nó nuair a scagtar uigeacht.

Scáileáin ard-DPI: tarraing d’íomhánna ag dhá oiread a méid taispeána, gin an bhileog, ansin cuir background-size socraithe go leath de mhéid na bileoige leis an aicme bhonn, agus laghdaigh na leithid, na hairde agus na fritháirimh go leath. Ní ghineann an uirlis é seo; is mionchoigeartú láimhe é.

An bhfuil spríteanna úsáideach fós le HTTP/2?

Cumadh spríteanna chun iarratais HTTP a shábháil. Le multiplexing HTTP/2, luchtaíonn go leor comhad beag beagnach chomh tapa le ceann amháin, mar sin tá an tairbhe do shuíomhanna gréasáin i bhfad níos lú, agus is minic a bhíonn deilbhíní SVG nó clónna deilbhín níos fearr do dheilbhíní inscálaithe. Is é an bhileog spríte an caighdeán fós do chluichí 2D agus do fhrámaí beochana: ciallaíonn uigeacht amháin níos lú malartuithe uigeachta GPU agus comhad amháin le luchtú.