Qysh Me Dizajnu një Buton duke përdorur vetëm CSS?

butonn

Ideja e këtijë mësimi është që të infrmohesh se si ta dizajnosh një buton duke përdoruar standardet më të reja të stilizimeve CSS.

 

Butoni i përfunduar do të duket kështu.

Ana e bukur e këtij butoni është se ky nuk është buton grafik por thjeshtë i stilizuar me CSS3.

Avantazhet e përdorimit të butonit CSS3 në krahasim me atë grafik janë këto:.

  • Optimizimi – madhësi më vogël e skedarit, http kërkesë më të vogël
  • Ripërdorimi – butoni mund të përdoret në shumë raste për veprimeve të ndryshme
  • Fleksibiliteti – butoni mund të zgjatet në mënyra të ndryshme në varësi të gjatësisë së tekstit

Disavantazhet e përdorimit:

  • Shfletuesit IE – Disa nga stilizimet që do t’i përdorim në këtë mësim nuk njihen akoma nga shfletuesit e Internet Explorer, e në veçanti nga versionet 8 e më të vjetra.
  • Shfletues i avansuar – Në rast se nuk dispononi ndonjë shfeltuesit të avansuar (përveq IE) rezultati përfundimitar i këtij butoni mund të mos jetë ai i dëshiruar. Prandaj ju rekomandojmë që këtë mësim ta ndiqni nga ndonjë shfletues tjetër përveq IE.

Informim: pasi butoni që do ta krijosh është buton i standardeve më të reja të CSS, në këtë mësim do të njoftohesh edhe me disa karakterisitkat e reja të CSS, të cilat për momentin gjejnë mbështetje vetëm nga shfeltuesit më të avancuar, por që këto stilizime tashmë përdoren nga shumë web-dizajner anembanë botës.

1. Deklaro butonin në HTML

1
<button>Klikom</button>

Gjendja e butonit të pa stilizuar do të duket kështu.

2. Stilizime bazike

Për fillim apliko disa stilizime bazike.

1
2
3
4
5
6
button {
color:rgba(80,80,80, 1);
color: rgb(80, 80, 80); /* Mbështetësi */
padding:5px 20px 3px 20px;
font-size:1.5em;
}

Butoni pas këtyre stilizimeve do të duket kështu.

Pse rgba?

RGBA është një nga disa mënyrat e stilizimit për një ngjyrë në CSS e cila posedon Alpha transparencë.

Ky stilizim i RGBA lejon plotësimin e zonave me ngjyrë transparente, numrat e parë të deklarimit RGBA përfaqësojnë ngjyra në vlerat RGB (Red, Green, Blue) pra (Kuq, Gjelbër, Kaltër). Numri i katërt (A) Alpha përfaqëson një vlerë të transparencës midis 0 dhe 1 (0-ja do të thotë transparencë e plotë dhe 1-shi gjendje plotësisht me ngjyrë).

Jo të gjithë shfletuesit mbështesin stilizimin RGBA, prandaj duhet ta shtosh edhe “mbështetësin” i cili i jep ngjyrë solide zonës dhe ndihmon që zona e stilizuar me RGBA të mos mbetet pa ngjyrën e saj në qoftë se shfletuesi nuk e njeh këtë stilizim.

3. Implementimi i fontit

Në këtë mësim do të implementojmë një font nga direktoria e hapur e fonteve të Google, Google Font API.

Direktoria e hapur e Googles “Google Font API” është një web-shërbim falas që lejon zhvilluesit e faqeve të internetit të shfrytëzojnë mundësinë e implementimit të fonteve të tjera shumë lehtë, dhe duke iu mundësuar web-dizajnerëve përodrimin e shumë fonteve tjera përveq atyre fonteve të sigurtë që përdoren zakonisht në ndërtimin e web-faqeve.

Për ta përdorur Google Font API nuk duhet të jesh një web-designer profesional, mjafton që ta shtosh linkun stylesheet të cilit do font të dëshiruar nga direktoria e Google në faqen tënde dhe ta përdoësh atë në stilizimet e CSS.

Kërko në koleksionin e fonteve të Google fontin ‘Ubuntu’ të cilin do ta përdorim në këtë mësim, kopjo linkun styleshet të fontit pas klikimit në butonin e navigimit Use this font dhe implemetoje atë në faqen e Html.

1
<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,500&v1' rel='stylesheet' type='text/css'>

Stilizo tekstin e butonit duke implementuar fontin e marrë nga direktoria e fonteve të Google.

1
font-family: 'Ubuntu', Arial, Helvetica, sans-serif;

Butoni pas implementimit të fontit do të duket kështu.

4. Shto hijëzim në tekst

1
text-shadow: 0px 1px 0 rgba(255,255,255,0.6);

Butoni pas shtimit të hijëzimit në tekst do të duket si në vijim.

Text-shadow pra hijëzimi i tekstit në disa raste i jep një formë më të bukur tektsit dhe e bënë atë të duket më modernë.

Numri i parë (0px) tregon kahjen horizontale të hijëzimit, i dytë (1px) kahjen vertikale, ndërsa deklarimi i tretë (0px) i jep një trajtë të mjegulluar hijëzimit të tekstit.

RGBA ndihmon stilizimin e hijëzimit duke e deklaruar ngjyën e tij, në këtë rast numrat (255, 255, 255) janë numrat e ngjyrës së bardhë, deri sa (0.6) është transparenca Alpha e ngjyrës.

5. Plotësimi i butonit me ngjyrë

Kjo do të jetë pjesa më e këndshme e këtij mësimi. Për ta plotësuar butonin me ngjyrë, në këtë mësim do ta përdorim pjerrtësinë e ngjyrosjes, e njohur në zhargonin e grafikës si gradient. Në rastin tonë nuk do të përdorim Photoshop por thjesht do ta deklarojmë këtë gradient me vetëm stilizime të CSS.

Për ta lehtësuar edhe më tepër plotësimin e butonit më ngjyrë të pjerrët, do ta përdorim një gjenerator të gradientit i cili quhet Colorzilla.

Pasi të jesh në faqen e këtij gjeneratori zgjedhi ngjyrat e gradientit sikurse te fotoja në vijim.

Në anën e djathtë kodi i stilizimit për këtë gradient do të gjenerohet automatikisht. Kopjo këtë kod dhe shtoje në stilizimet e CSS të butonit siq duket në foton e më poshtme.

1
2
3
4
5
6
7
8
background: #fff534; /* Old browsers */
background: -moz-linear-gradient(top, #fff534 0%, #edb723 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff534), color-stop(100%,#edb723)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff534 0%,#edb723 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff534 0%,#edb723 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fff534 0%,#edb723 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff534', endColorstr='#edb723',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #fff534 0%,#edb723 100%); /* W3C */

Pas plotësimit me ngjyrë gradient me anë të kodit, butoni do të duket kështu.

7. Kufijtë e butonit

Tani, lirohu nga kufiri i shëmtuar i butonit duke e stilizuar atë me kufi 1 pixel-ësh dhe të soliduar.

1
border: 1px solid rgba(237, 183, 35, 1);

Butoni tani duket pak më i hijeshëm apo jo?

8. Lakimi i këndeve

Një ndër stilizimet më aktualë në web-dizajnë janë edhe këndet e lakuara, të cilat në stilizimet e CSS njihen si border radius.

Për ta stilizuar butonin me kënde të lakuara duhet që ta deklrarojmë atë në tri verzione të ndryshme për arsye se secili shfletues i njeh në mënyrën e tyre të veçantë këto stilizime të këndeve.

Stilizimet e standareve më të reja të CSS3 për shfletuesit e Mozilla Firefox deklarohen me parashtesën -moz-, shfletuesit si Safari e Chrome kanë si parashtesë -webkit deri sa Opera dhe IE9 e njohin këtë deklarim edhe pa ndonjë parashtesë.

Për versionet më të vjetra të IE nga 8 e më poshtë, nevojiten deklarime shtesë për të cilat do të flasim në mësimet e ardhshme.

1
2
3
border-radius:1.5em;
-moz-border-radius:1.5em;
-webkit-border-radius:1.5em;

Butoni pas lakimit të këndeve do të duket kështu.

9. Zbukurimi me nuanca relievi

Jepi butonit një dukje më të bukur duke shtuar 1 pixel nuancë të hijëzimit të mbrendshëm në të.

1
2
3
box-shadow:inset 1px 1px 0 rgba(255,255,255, 1);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255, 1);
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255, 1);

Ajo qfarë mund të vërejmë këtu është se të trija ngjyrat RGB janë në kuotën 255, të cilat na japin ngjyrën e bardhë.

Transparenca Alpha në këtë rastë do të jetë 1, pra ngjyrë e plotë.

Butoni me nuancë të bardhë relievi do të duket si në vijim.

10. Bëje të klikueshëm

E dijmë që është buton dhe që mund të klikohet por përdoruesit mund ta mos e dinë këtë, prandaj ndrysho kursorin në pointer që përdoruesit ta vërejnë se butoni është i klikueshëm.

1
cursor:pointer;

11. Gjendja e butonit kur mousi është sipër dhe kur klikohet

Tani ke krijuar një buton të lezetshëm për të cilin kanë mbetur të deklarohen vetëm edhe gjendjet e ndryshme të butonit kur mousi është sipër sikurse që janë: hover dhe active. Hover quhet gjendja kur mousi është sipër në këtë rast butonit, dhe Active është gjendja kur butoni klikohet.

Për të mos menduar gjatë për ngjyra se si te duket butoni kur mousi është sipër, në këtë rast vie në shprehje transparenca e cila funksionon mjaft mirë në shfletuesit e avansuar, deri sa në IE kërkon trajtim të veqant me deklarime të ndryshme filterësh.

Sidoqoftë, për mendimin tim mendoj se është shumë afër dita kur të gjithë shfletuesit e vjetër të IE-së do të rifreskohen me versionet e tyre të reja dhe të aplikojnë standardet më të reja të webit, e që pastaj besoj se nuk do të ketë më probleme për web-designer të ndryshëm anembanë botës të cilët po mundohen gjatë gjithë kohës të shpikin filtere të ndryshëm me qëllim që t’i bëjnë standardet e pa aplikuara nga këta shfeltues të aplikohen.

I kthehemi mësimit, ku mbetëm? se na plasi ky IE mo. Për ta ndryshuar gjendjen e butonit kur mousi është sipër (hover) shto kodin e më poshtëm në stilet CSS të butonit.

1
button:hover {opacity:0.5;}

Për gjendjen kur mousi klikohet (active) shto këtë kodë në stilet CSS të butonit.

1
button:active {position:relative; top:2px;}

Bashkoje gjithë kodin.

Kodi final i butonit duhet të duket si në vijim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* Gjendja normale e butonit */
button {
color:rgba(80,80,80, 1);
color: rgb(80, 80, 80); /* Mbështetësi */
padding:5px 30px 3px 30px;
font-size:1.5em;
font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
text-shadow: 0px 1px 0 rgba(255,255,255,1);
background: #fff534; /* Old browsers */
background: -moz-linear-gradient(top, #fff534 0%, #edb723 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff534), color-stop(100%,#edb723)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff534 0%,#edb723 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff534 0%,#edb723 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #fff534 0%,#edb723 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff534', endColorstr='#edb723',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #fff534 0%,#edb723 100%); /* W3C */
border: 1px solid rgba(237, 183, 35, 1);
border-radius:1.5em;
-moz-border-radius:1.5em;
-webkit-border-radius:1.5em;
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.9);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.9);
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.9);
cursor:pointer;
position:relative;
left:260px;
}
/* Gjendja kur mousi është sipër butonit */
button:hover {opacity:0.8;}
/* Gjendja kur mousi klikohet */
button:active {position:relative; top:2px;}

Ti sapo mësove se si ta dizajnosh një buton modern me vetëm stilizime të CSS.

 

Ky arikull eshte shkruar nga Agon Gërmizaj per www.katrology.com

Qysh me i krahasu dokumentet e bashkangjitura në email?

Qysh me dëgju radio shqip në telefon?