Začnimo z gumbom za pošiljanje. Trenutni CSS stanje bi moralo izgledati takole:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}Ta sintaksa vodi do naslednjega rezultata:
To je povsem običajen gumb. Trenutno ni posebej privlačno oblikovan, vendar vsekakor opravlja svoje delo. Kljub temu naj bi ga malo popestrili. Končni rezultat bo torej izgledal takole:
Poleg tega obstaja učinek lebdenja. Gumb bo torej spremenil barvo, ko se bo miška premaknila nad njega.
Če si natančneje ogledate gumb, boste opazili zaobljene vogale. To je zagotovo eden od CSS novosti, na katere so spletni oblikovalci dolgo čakali. Ker 'prej' te možnosti ni bilo. (Izjema so seveda elementi button, pri katerih smo lahko uporabljali slike.)
Zdaj se torej zaobljenih robov ne uporablja le na običajnih stranskih elementih, temveč tudi na gumbih.
V osnutku CSS3 obstaja lastnost border-radius za to. Mozillin in WebKit brskalniki ponujata alternativne zapisne oblike za eksperimentalno podporo te lastnosti.
• -moz-border-radius
• -webkit-border-radius
Vendar pa že vsi sodobni brskalniki podpirajo zaobljene robove.
Na tem znanju lahko na primer definiramo border-radius tako:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Pri natančnejšem pregledu gumba vam bo morda všeč tudi prelivanje barv, ki je bilo dodano.
Tudi to je končno mogoče z osnovnimi CSS metodami. Za to se uporabljajo različne lastnosti gradient. Te se dodelijo lastnosti background kot vrednost. Medtem ko obstaja že veliko orodij, s katerimi je mogoče ustvariti prelive barv.
Eno izmed njih najdete na primer na spletnem mestu http://www.css3factory.com/linear-gradients/. V naslednji sintaksi so določeni preliv barv in že znani zaobljeni robovi.
V aktualnem primeru je sintaksa za gumb videti takole:
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background: -linear-gradient(top, #3e779d, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 21px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
width: auto;
}
Kot sem že omenil, naj bi gumbi reagirali na lebdenje miške. Za to se uporablja znan :hover.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}Gumb bo reagiral še na en dogodek. Za to se uporablja psevdo razred :active. S tem se lahko odzovemo, ko je gumb kliknjen.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
V aktualnem primeru se ob kliku na gumb spremeni barva zgornjega roba in ozadje gumba.
Zaobljeni robovi za polja
Takšne imenovane zaobljene robove seveda lahko uporabimo ne le na gumbu, temveč tudi na poljih za vnos. Rezultat bi lahko bil naslednji:
Tukaj pa je pripadajoča sintaksa:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Potrebne lastnosti, ki jih potrebujete za določanje takšnih zaobljenih robov, že poznate.
Preverjanje obrazca s pomočjo CSS3
Trenutno lahko obiskovalci vnašajo v polja vnosov kar koli želijo. Preverjanje vnesenih vrednosti se ne izvaja. To se bo zdaj spremenilo. Polja bodo preverjena glede na naslednja merila:
• Polje Ime mora biti izpolnjeno.
• Polje Email mora vsebovati sintaktično pravilni e-poštni naslov.
• Tudi večvrstično polje za vnos mora biti izpolnjeno.
Šele če ta merila izpolnjujejo, je mogoče obrazec dejansko poslati.
Če želite polje označiti kot obvezno polje, mu dodelite atribut required. Polje, označeno s tem, mora biti izpolnjeno in ne sme biti prazno.
Ustrezen primer bi izgledal takole:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Tukaj bi brskalnik preveril, ali je polje izpolnjeno. Če je polje prazno in se vseeno poskuša poslati obrazec, bi moral brskalnik prikazati sporočilo o napaki.
Še dlje gre zadeva pri poljih za e-pošto. Ti se dodelijo type="email" in atribut required. Zdaj v polje ni treba vnesti le vrednosti, temveč resničen e-poštni naslov, sicer se bo pri pošiljanju obrazca prav tako prikazalo sporočilo o napaki.
Celoten obrazec bi lahko izgledal takole:
<ol>
<li>
<label for="name">Ime:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">E-pošta:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Komentar:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Pošlji" />
</li>
</ol>
Še posebej pri obsežnejših obrazcih je možno, da obstajajo obvezna polja, pa tudi tista, ki jih ni nujno treba izpolniti. V takšnih primerih lahko obvezna polja označite posebej. Dostop do obveznih polj je mogoč v CSS preko :required.
:required {
background-color: #ff0000;
}Z uporabo te sintakse bodo obvezna polja imela rdečo ozadje.
Druga možnost za opozorilo na obvezna polja je naslednja sintaksa:
input:required:focus {
border: 1px solid red;
outline: none;
}
Ko poskusite poslati obrazec, bo prvo polje dobilo rdeč rob in fokus, če ni bilo izpolnjeno ali če ne ustreza zahtevam za veljavnost.
Če uporabnik pravilno izpolni to polje, vendar obstaja še eno nepopolno polje, bo to po naslednjem pošiljanju ponovno fokusirano in opremljeno z rdečim robom.
