Početna

   Video tutorijali

   HTML

   CSS

   JavaScript

   SMIL

   Windows XP

   Mreže

   XML i XSL

   Ostalo



Zapamti me
  Lozinka       Registracija
   O Svemu

Apartmani Djurovic

MrdniSe

MrdniSe

Stiliziranje dugmeta kod web formi


Da li su vam dosadile standardne web forme na vašoj web stranici? Zašto ih ne stilizirate u skladu sa ostalim elementima stranice upotrebom CSS-a? Zašto dugmad na formama mora biti siva kad možete staviti bilo koju boju? Isto vrijedi za sve elemente forme pa krenimo sa primjerima. Standardni kod za dugme Submit je:


<input type="submit" value="Submit">



Uz dodani CSS dugme može izgledati i ovako:


<input type="submit" value="Submit" style="background-color: #ffaaaa;">



Ni ova crna boja teksta nam ne paše uz crvenu boju pozadine pa ćemo i nju izmijeniti.


<input type="submit" value="Submit" style="background-color: #ffaaaa; color: #ff5555;font-weight: bold;">



Sada imamo stilizirano dugme koje nas vraća u vrijeme IE 5 kada su izgledali kao cigle na papiru. Idemo dalje da ispravimo nedostatke (starost) ovoga stila. Osim jednostavne izmjene boje pozadine možemo napraviti puno više. Možemo obići oko dugmeta i izmijeniti sve boje rubova kao i postaviti gradijent preko dugmeta da dobije moderan izgled koji odgovara našoj stranici.


<input type="submit" value="Submit" style="background-color: #ffaaaa; color: #ff5555;font-weight: bold;border:1px solid;border-top- color:#ff0000; border-left- color:#ff0000;border-right-color:#aa0000;border-bottom-color:#aa0000; filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');">



Ovo je sada puno bolje, ali postoji jedan problem. Ovaj gradijent će raditi samo za korisnike IE 5 i novije. GradientType određuje smjer gradijenta pa tako 0 znači od dna do vrha, a 1 znači od lijeva na desno. Atributi StarColorStr i End colorStr su zapisani u oktetima s tim da prva dva označavaju prozirnost. Korisnici ostalih preglednika neće vidjeti ovako definiran gradijent nego će vidjeti samo boju pozadine.


Sada ćemo još malo proširiti naš rad tako što ćemo definirati klase za dugme. Klase će nam pomoći da dobijemo i efekt hover, tj. efekt koji æe se pokazati kada se miš nalazi iznad dugmeta. U head dijelu zapišimo sljedeće:


<style type="text/css"> input.dugme{ color:#ff5555; font-weight:bold; background-color:#ffaaaa; border:1px solid; border-top-color:#ff0000; border-left-color:#ff00006; border-right-color:#aa0000; border-bottom-color:#aa0000; filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa'); } input.dugmehov{ border-top-color:#ff5555; border-left-color:#ff5555; border-right-color:#ff5555; border-bottom-color:#ff5555; } </style>



Gore smo definirali dva stila. Jedan koji se primjenjuje u stanju normal, a drugi koji se primjenjuje kada se miš nalazi iznad dugmeta. Sada samo trebamo napraviti dugme i uključiti definirane klase.





Puno jednostavniji način dobivanja stila dugmeta je da posebno napravimo gradijent sliku u jednom grafičkom programu i stavimo je kao pozadinu. Na ovaj način dobili smo dugme koje radi na svim preglednicima. Da bi to napravili dodamo samo jedan atribut:


background:url(media/slika_pozadine.gif) repeat-x left top;



Ako ste naučili nešto novo napišite jedan komentar podrške.
Hvala!
Autor: VedranDatum objave: 21.01.2008

KOMENTARI:

Nema još ni jednog komentara.

Samo registrirani korisnici mogu komentirati.

copyright (c) 2008/09 osvemu.com | besplatnitutorijali.com  |   Webmaster   |   Podrška  |   Pravila korištenja