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:

<a id="menu" href="#"></a>

Krijojmë një rregull në CSS që permban instruksione të perbashkëta për të treja gjendjet:

a#menu, a#menu:hover, a#menu:active{
     display:block;
     width:165px;
     height:36px;
}

Ç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

a#menu{
     background:url(menu.jpg) 0 0 no-repeat;
}

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

a#menu:hover{
     background:url(menu.jpg) 0 -36px no-repeat;
}

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)

a#menu:active{
     background:url(menu.jpg) 0 -72px no-repeat;
}

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ë:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sprites ne CSS</title>
<style type="text/css">
a#menu, a#menu:hover, a#menu:active{
     display:block;
     width:165px;
     height:36px;
}

a#menu{
     background:url(menu.jpg) 0 0 no-repeat;
}

a#menu:hover{
     background:url(menu.jpg) 0 -36px no-repeat;
}

a#menu:active{
     background:url(menu.jpg) 0 -72px no-repeat;
}
</style>
</head>
<body>
     <a id="menu" href="#"></a>
</body>
</html>

Perfundimi

Me këtë guidë paksa të gjatë, por 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 coni 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ë.