Kjo guidë do ju tregojë për perdorimin e një teknike në CSS që përdor Sprites [Anglisht: sprajts] për të arritur qëllimin. Lexoni më tutje për të kuptuar çfarë janë Sprites dhe ku gjejnë përdorim në web.
Çfarë janë Sprites?
Shumë prej jush mund të jenë duke pyetur veten se çfarë janë këto Sprites. Termi vjen nga industria e lojërave dhe është përdorur në mase gjatë viteve 80′ deri në mesin e viteve 90′. Për shkak se hardware-et e atyre viteve nuk kishin fuqinë proçesuese të sotshme, dizenjuesit e lojërave krijonin grafika për pozicione të ndryshme të elementëve të lojës të cilat u vendosnin në vendin e duhur, në momentin e duhur.
Fig. 1 – Sprites te Super Mario
Në Figuren 1 ilustrohen disa Sprites të karakterit Mario në lojën Super Mario. Siç e shihni, Mario paraqitet në pozicione të ndryshme të cilët në lojë ndryshohen për të krijuar lëvizjen, vrapimin, kërcimin, etj.
Me përmirësimin e teknologjisë, sot lojërat krijohen kryesisht në 3D me karaktere të cilët animohen në kohë reale. Megjithatë, shume lojera 2D, sidomos në pajisje më pak të fuqishme (celularët psh) akoma përdorin të njëjtën teknikë.
Po çlidhje kanë Sprites me CSS? A nuk përdoreshin në industrinë e lojërave?!
Edhe pse në pamje të parë duket e çuditshme, Sprites mund të përdoren edhe në CSS. Thelbi është i njëjtë si ai i industrisë së lojërave, pra të gjenerojmë disa grafika të cilat do të përdoren në momente të ndryshme. Një faqe interneti nuk është një lojë që luhet, kështu edhe mundësite për ti përdorur janë të kufizuara. Qëllimi kryesor është rollovers për menu apo elementë të tjerë të faqes që doni të jenë më interaktiv.
Si ti përdorim këto Sprites në CSS?
CSS-ja është një gjuhë formatimi e fuqishme, por edhe e thjeshtë në të njëjtën kohë. Instruksionet që do të përdorim do të jenë të gjitha të njohura për ju, thjeshtë teknika mund të ndryshojë.
Për këtë guidë do të marr si shembull një element menu-je të quajtur “feniksi.com” në 3 gjendjet që dua: Normale, Hover (mouse-i sipër) dhe Down (kur shtypet). Të treja gjendjet i kam futur në një imazh të vetëm të ilustruar më poshtë.
Fig. 2 – Elementi menusë në 3 gjendje
Figura 2 përmban të 3 gjendjet e elementit të menusë: Normale (lart), Hover (mes) dhe Down (poshtë). Këtë imazh do ta përdorim në “faqen tonë” duke i ndërruar imazhet me CSS për çdo gjendje. Tani po fillon të duket më tepër si Sprite-i i Marios, apo jo?
Para së të kaloj në kod, mata gjatësinë e një gjendje të menusë e cila është 36px. Të treja gjendjet kanë të njëjtën gjatësi dhe më duhet ta fiksoj këtë sepse është ajo që do na shërbejë.
Fillimisht ndërtojmë kodin html, që do të jetë thjeshtë një element a (anchor) me një id:
| HTML | | Kopjo Kodin | | ? |
| 1 | <a id="menu" href="#"></a> |
Krijojmë një rregull në CSS që përmban instruksione të perbashkëta për të treja gjendjet:
| CSS | | Kopjo Kodin | | ? |
| 1 | a#menu, a#menu:hover, a#menu:active{ |
| 2 | display:block; |
| 3 | width:165px; |
| 4 | height:36px; |
| 5 | } |
Çfarë bëra është e thjeshtë. Elementi a (anchor) është një element inline (rresht) dhe në këtë rast e duam që të jetë bllok, prandaj dhe kam perdorur display:block. Gjatësia (height) prej 36px do të bëjë që imazhi të prihet në vetëm 36px dhe mos të shfaqet i tëri. Klasat :hover dhe :active janë pseudo-klasa që u drejtohen gjendjeve “mouse-i siper” dhe “aktive”. Pjesën tjetër të funksionalitetit do e rregullojë background.
Para se të kalojme në kod, më duhet t’ju them që mënyra e shkurtuar që kam përdorur për background është:
background: “url e imazhit”, “zhvendosja horizontale”, “zhvendosja vertikale”, “përsëritja”;
Gjendja Normale
| CSS | | Kopjo Kodin | | ? |
| 1 | a#menu{ |
| 2 | background:url(menu.jpg) 0 0 no-repeat; |
| 3 | } |
Nuk besoj se ka gjë për të shpjeguar këtu. Thjeshtë një imazh që nuk ka as zhvendosje vertikale e as horizontale.
Gjendja Hover
| CSS | | Kopjo Kodin | | ? |
| 1 | a#menu:hover{ |
| 2 | background:url(menu.jpg) 0 -36px no-repeat; |
| 3 | } |
I vetmi ndryshim i kësaj gjendje është se zhvendosjen vertikale e kam vënë “-36px”. Vlera është negative në mënyre që imazhi të spostohet lart për të treguar gjendjen tjetër.
Gjendja Down (Active)
| CSS | | Kopjo Kodin | | ? |
| 1 | a#menu:active{ |
| 2 | background:url(menu.jpg) 0 -72px no-repeat; |
| 3 | } |
Ashtu si tek gjendja Hover, edhe këtu kam spostuar imazhin lart me një vlerë negative. Kam perdorur “-72px” që të spostohem në imazhin e fundit e ti kaloj dy imazhet e para. Pra 36+36=72.
I gjithë kodi bashkë:
| HTML | | Kopjo Kodin | | ? |
| 01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 02 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| 03 | <head> |
| 04 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| 05 | <title>Sprites ne CSS</title> |
| 06 | <style type="text/css"> |
| 07 | a#menu, a#menu:hover, a#menu:active{ |
| 08 | display:block; |
| 09 | width:165px; |
| 10 | height:36px; |
| 11 | } |
| 12 | |
| 13 | a#menu{ |
| 14 | background:url(menu.jpg) 0 0 no-repeat; |
| 15 | } |
| 16 | |
| 17 | a#menu:hover{ |
| 18 | background:url(menu.jpg) 0 -36px no-repeat; |
| 19 | } |
| 20 | |
| 21 | a#menu:active{ |
| 22 | background:url(menu.jpg) 0 -72px no-repeat; |
| 23 | } |
| 24 | </style> |
| 25 | </head> |
| 26 | <body> |
| 27 | <a id="menu" href="#"></a> |
| 28 | </body> |
| 29 | </html> |
Perfundimi
Me këtë guidë të shkurtër dhe besoj jo të komplikuar shpresoj të keni mësuar përdorimin e Sprite-ve. Shpesh herë dizenjuesit e komplikojnë veten duke përdor Javascript për një rollover të thjeshtë, kur egziston alternativa puro CSS. Nëse doni ti çoni gjërat në një nivel tjetër, mund edhe të përdorni të njëjtën teknikë së bashku me ndonjë framework për Javascript (si jQuery apo Prototype) për ta animuar efektin. Përdorni imagjinatën…
Mësim të mbarë.
Teme shume e dobishme.
Nje ane pozitive e Sprite eshte dhe zvogelimi i kerkesave (requests) ndaj serverit hostues duke zvogeluar keshtu kohen e ngarkimit te faqes. Disa dizenjues jane mesuar te krijojne 3 imazhe per secilen gjendje te butonit (Normale, Hover, Down), pra 3 kerkesa, ndersa duke perdoru Sprite kemi vetem nje kerkese pasi te tre gjendjet e butonit jane ne nje imazh te vetem.
Nje veretje te vogel tek gjendja Hover dhe Down:
Perdorimi i
diplay:block;ben qe elementi<a>te shfaqet sidiv. Koordinatat fillojne X=0; Y=0 nga qoshja majtas-lart; janepozitiveduke levizur djathtas dhe poshte; janenegativeduke levizur majtas dhe lart.Perdormi i vlerave negative tek “zhvendosja vertikale” ben qe imazhi te zhvendoset lart me
-36px. Pra gjendja Normale ngjitet lart duke bere te dukshme gjendjen Hover. E njejta llogjike ndiqet dhe per gjendjen Down.Hi Kokushta,
une personalisht jam i ri ne fushen e CSS (kam pak kohe qe kam filluar ti mesoj saktesisht). Edhe kam pare qe disa designer profesionist bejne te gjithe figurat e faqes ne 1 Sprite te vetme. Pra bejne nje dokument te madh edhe fusin te gjith figurat. Kjo si the ti nornalisht eshte nje Plus i madh per serverin qe duhet te ngarkoj vetem 1 dokument por sipas mendimit tim nje minus per perdoruesin e thjeshte qe merr dokumentin nga Webmaster. Sepse besoj shume pak veta do ishin te afte te punonim me Photoshop e te modifikonin figuren e vetme e te gjeneronin nje te re
Megjithese per faqe statike qe figurat nuk mendohet te ndryshojne eshte mire te perdoret kjo menyre
Nje arsye me shume per publikuar sa me shume tutoriale Photoshop-i.
Shume i dobishem,
Faleminderit, kemi nevoje per te tjera mesime dhe tutoriale rreth css dhe sprite’s
Hi Kokushta.
Verejtja jote eshte e drejte dhe tani po e kuptoj qe menyra si e kam shprehur eshte ngaterruese. Elementi shfaq nje imazh qe ndodhet me poshte (prandaj dhe e kam shkruar ashtu), por ne te vertete imazhi ngjitet lart. Thnx per sqarimin.
Sa i perket Sprites, jane vertete nje zgjidhje e mire per disa arsye. Ju permendet numrin e reqeusts, por me duhet te shtoj aksesueshmerine dhe mos ngarkimin e kote me JavaScript. Pa llogaritur qe koduesit pa eksperience nuk shkruajne JavaScript unobtrusive qe e ben te veshtire degradimin nese JS eshte i caktivizuar.
Kam ne plan edhe te pakten 2 guida te tjera per Sprites ku do te tregoj disa teknika shume te lezetshme me JQuery. Stay tuned
Tutorial mjaft i mire…Vazhdoni keshtu