Saada nupuga alustame. Praegune CSS-i standard peaks välja nägema järgmiselt:
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;
}See süntaks viib järgmise tulemuseni:
See on täiesti tavaline nupp. See pole praegu eriti põnev, kuid täidab kindlasti oma eesmärki. Seda tuleks siiski veidi paremaks muuta. Lõpptulemus näeb välja järgmine:
Lisaks on olemas hõljumiseffekt. Nupp muudab oma värvi, kui selle peale hiirt viiakse.
Kui vaatate nuppu täpsemalt, märkate, et see on ümardatud nurkadega. See on kindlasti üks CSS-i uuendustest, mida veebidisainerid on kaua oodanud. Sest "vana" aja CSS-iga seda võimalust polnud. (Erandiks olid muidugi button elemendid, kus sai töötada piltidega.)
Nüüd saab ümardatud nurki rakendada mitte ainult tavalistele lehelementidele, vaid ka nuppudele.
CSS3 kavandis on selleks omaduseks border-radius. Mozilla- ja WebKit-brauserid pakuvad selle omaduse eksperimentaalseks toetamiseks alternatiivseid kirjutamisviise.
• -moz-border-radius
• -webkit-border-radius
Kuid nüüd toetavad kõik kaasaegsed brauserid ümaraid nurki.
Sellele teadmisele toetudes võiks border-radius määratlus välja näha järgmiselt:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Kuid täpsemalt uurides võib märgata veel üht asja. Tegelikult on nupule antud ka värvikäik.
Võimalik on kasutada CSS-i abil ka sellist asja. Selleks kasutatakse erinevaid gradient omadusi. Need omistatakse background omadusele väärtusena. Vahepeal on mitmeid tööriistu, millega värviskeeme genereerida.
Ühe neist leiate näiteks saidilt http://www.css3factory.com/linear-gradients/. Järgmises süntaksis on seega määratud värvikäik ja tuntud ümarad nurgad.
Antud näites oleks süntaks järgmine:
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;
}
Nagu mainisin, peaksid nupud reageerima hiirega ülese sõitmisele. Selleks kasutatakse tuntud :hover sündmust.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}Nupp reageerib veel ühele sündmusele. Selleks kasutatakse pseudovõtme :active. Sellega saab reageerida, kui nupule vajutatakse.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
Antud näites muutuvad nupu ülemise serva ja nupu tausta värvid vajutamisel.
Ümarad nurgad väljadele
Niinimetatud ümardatud nurgad saab loomulikult mitte ainult nuppudele rakendada, vaid ka sisendväjad nendega varustada. Tulemus võiks välja näha järgmise:
Ja siin on vastav süntaks:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Vajalike omaduste määratlemiseks selliste ümarate nurkade jaoks on teile juba teada.
Vormi valideerimine CSS3 abil
Praegu saavad külastajad sisestada vormiväljadesse kõike, mida nad soovivad. Sisestatud väärtuste kontrollimist ei toimu. See peaks nüüd muutuma. Väljad kontrollitakse järgmiste kriteeriumide alusel:
• Väli Name peab olema täidetud.
• Väli E-Mail peab sisaldama süntaktiliselt korrektset e-posti aadressi.
• Mitmerealine sisestusväli peab samuti olema täidetud.
Ainult kui need kriteeriumid on täidetud, saab tegelikult vormi edastada.
Väljale kohustuslikuks märkimiseks antakse talle nõutud atribuut. Selle atribuudiga märgistatud väli peab olema täidetud, see ei tohi olla tühi.
Vastav rakendus oleks järgmine:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Selles kohas kontrolliks brauser, kas väli on täidetud. Kui väli on tühi ja ikkagi proovitakse vormi saata, peaks brauser väljastama veateate.
Vielgi kaugemale jõutakse e-posti väljadel. Nende jaoks määratakse type="email" ja atribuut required. Nüüd peab väljale sisestama mitte ainult väärtuse, vaid tõelise e-posti aadressi, vastasel juhul saadetakse vormi esitamisel samuti veateade.
Kokkuvõttes võiks vorm välja näha järgmiselt:
<ol>
<li>
<label for="name">Nimi:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">E-posti aadress:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Kommentaar:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Saada" />
</li>
</ol>
Eriti mahukamate vormide puhul võivad olla kohustuslikud väljad, aga ka sellised väljad, mida pole tingimata vaja täita. Sellistel juhtudel saate kohustuslikud väljad eraldi märkida. Juurdepääs kohustuslikule väljale toimub CSS-is järgmiselt: required.
:required {
background-color: #ff0000;
}Selle süntaksi abil saavad kohustuslikud väljad punase taustavärvi.
Teine võimalus tähelepanu juhtimiseks kohustuslikele väljadele on järgmine süntaks:
input:required:focus {
border: 1px solid red;
outline: none;
}
Kui proovite siin saata vormi, saab esimene väli punase raami ja fookuse, mida ei täidetud või mis ei vasta valideerimisnõuetele.
Kui kasutaja täidab seejärel selle välja õigesti, kuid on endiselt üks täitmata väli, suunatakse see järgmisel esitamiskorral samuti fookusesse ja saab punase raami.
