Ukukhawulezisa indawo yakho nge-CSS Sprites

I-web spritemaster

Ndibhala ngesantya sephepha kancinci kule ndawo kwaye yinxalenye ebalulekileyo yohlalutyo kunye nokuphucula esikwenzayo kwiindawo zabaxumi bethu. Ngaphandle kokufudukela kwiiseva ezinamandla kunye nokusebenzisa izixhobo ezinje Unxibelelwano lweeNethiwekhi, kukho inani lezinye iindlela zokwenza ubuchule umphuhlisi wewebhu onokuzisebenzisa.

Umgangatho wephepha lokuqala lesitayile seCascading ungaphezulu kweminyaka eli-15 ngoku. I-CSS ibiyindalo ebalulekileyo kuphuhliso lwewebhu kuba yahlula umxholo kuyilo. Jonga le bhlog kunye nayiphi na enye kwaye uninzi lomahluko wesitayile ulula nje kwisitayile esincanyathiselweyo. Iifayile zesitayile zikwabalulekile kuba zigcinwa kwalapha ngaphakathi kwindawo yokugcina ngaphakathi kwisikhangeli sakho. Ngenxa yoko, njengoko abantu beqhubeka nokutyelela indawo yakho, abayikhupheli iphepha lesitayile ngalo lonke ixesha… umxholo wephepha kuphela.

Inqaku elinye leCSS elihlala lisetyenziswa gwenxa zezi Iimpawu zeCSS. Xa umsebenzisi etyelele iwebhusayithi yakho, ngekhe uqaphele ukuba abenzi nje isicelo esinye sephepha. Bona yenza izicelo ezininzi… Isicelo sephepha, nangawo nawaphi na amashiti esitayile, nakweyiphi na iifayile eziqhotyoshelweyo zeJavaScript, kunye nomfanekiso ngamnye. Ukuba unomxholo onoluhlu lwemifanekiso yemida, imivalo yokuhamba, imvelaphi, amaqhosha, njl njl. Phinda-phinda oko ngamawaka abatyeleli kwaye angangamashumi amashumi ezicelo ezenziwe kwiserver yakho!

Oku kuthi, kucothise indawo yakho. A Indawo ecothayo inokuba nefuthe elibonakalayo kuthethathethwano kunye nokuguqulwa ukuba abaphulaphuli bakho benza. Isicwangciso esisetyenziswa ngabaphuhlisi abakhulu bewebhu sibeka yonke imifanekiso kwifayile enye… ebizwa ngokuba yi sprite. Endaweni yokwenza isicelo kwifayile nganye yemifanekiso yakho, ngoku kufuneka kuphela isicelo esinye somfanekiso wesprite omnye!

Unokufunda malunga isebenza njani i-CSS Sprites kwi-CSS-Tricks or Iphephancwadi eliCimayo leCSS Sprite iposi. Inqaku lam ayikokubonisa ukuba uzisebenzisa njani, ukukucebisa nje ukuba uqinisekise ukuba iqela lakho lophuhliso liyabafaka kule ndawo. Umzekelo obonelelwa yiCSS Tricks bonisa imifanekiso eli-10 ezizicelo ezili-10 kwaye yongeza ukuya kuthi ga kwi-20.5Kb. Xa uqokelelwe kwisprite enye, kunjalo Isicelo esinye esiyi-1kb! Isicelo sokujikeleza nokubuya kunye namaxesha okuphendula kwimifanekiso eli-9 asisekho kwaye isixa sedatha sincitshisiwe ngaphezulu kwe-30%. Phinda-phinda loo nto ngenani labakhenkethi kwindawo yakho kwaye uza kucheba ezinye zezixhobo!

GlobalnavThe iapile ibha yokuhambisa ngumzekelo omkhulu. Iqhosha ngalinye linamacala ambalwa… nokuba usephepheni, alikho ephepheni, okanye ulikroba phezu kweqhosha. I-CSS ichaza uququzelelo lweqhosha kwaye iveza ummandla wombuso ochanekileyo kwisikhangeli sabasebenzisi. Onke la mazwe athe wawa kunye kwigrafiki enye- kodwa ibonakalisiwe ingingqi ngommandla njengoko kuchaziwe kwiphepha lesitayile.

Ukuba abaphuhlisi bakho bayazithanda izixhobo, kukho itoni phaya enokubanceda, kubandakanya Isakhelo seCompass CSS, Isicelo Nciphisa ye-ASP.NET, I-CSS-Ispritha yeRuby, Isicatshulwa esibhaliweyo se-CSSS yeFotohop, ISpritePad, Ilungelo, I-SpriteCow, ZeroSprites, Iprojekhtha ye-CSS Sprite Generator yeProjekthi, I-Sprite Master Web, kwaye i I-SpriteMe Incwadana yokubhaliweyo.

Umfanekiso weskrini I-Sprite Master Web:
I-web spritemaster

Martech Zone ayisebenzisi imifanekiso yangemva kuwo wonke umxholo wayo, ke akufuneki sisebenzise obu buchule ngeli xesha.

2 Comments

  1. 1

    Linda… ayiyiyo yonke ingqokelela i "umfanekiso" (okanye "inqwelo moya"), kunye nomfanekiso ngamnye (okanye iqela eliphantsi lemifanekiso kwimeko yoopopayi okanye abatshintshayo) "yi-sprite"?

    Mhlawumbi izinto ziye zathiywa igama okoko ndigqibele ukuphatha into enjalo kodwa ndingafunga ukuba iSprite yeyona nto iphele iboniswa, hayi itafile yedatha enkulu etsalwe kuyo.

    (“Itafile yeSprite”… ibingeyiyo?)

    • 2

      Sisenokuba sithetha izinto ezimbini ezahlukeneyo, uMarko. Nge-CSS, unokucacisa ukuba yeyiphi 'isahlulo' sefayile yomfanekiso ukubonisa ukusebenzisa ulungelelwaniso. Oku kukuvumela ukuba ubeke yonke imifanekiso yakho kwi 'sprite' enye kwaye walathe nje kwindawo onqwenela ukuyibonisa ngeCSS.

Ingaba ucinga ntoni?

Le sayithi isebenzisa i-Akismet ukunciphisa ugaxekile. Funda indlela idatha yakho yokubhaliweyo isetyenziswe ngayo.