Her begynner vi med Send-knappen. Den nåværende CSS-stilen skal se slik ut her:
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;
}Denne syntaksen fører til følgende resultat:
Dette er en helt vanlig knapp. Den er nå ikke spesielt spennende designet, men oppfyller helt klart sin hensikt. Likevel skal den piffes opp litt. Sluttresultatet vil se slik ut:
I tillegg er det en hover-effekt. Knappen vil altså endre farge når musen svever over den.
Hvis du ser nærmere på knappen, vil du legge merke til de avrundede hjørnene. Dette er absolutt en av CSS-nyhetene som webdesignere har ventet på lenge. Fordi "tidligere" var det ikke mulig. (Unntaket var selvfølgelig elementene button, der man kunne jobbe med bilder.)
Nå kan du altså bruke avrundede hjørner ikke bare på vanlige sideelementer, men også på knapper.
I CSS3-draften er det egenskapen border-radius for dette. Mozilla- og WebKit-nettlesere tilbyr alternative skrivemåter for eksperimentell støtte til denne egenskapen.
• -moz-border-radius
• -webkit-border-radius
I mellomtiden støtter imidlertid alle moderne nettlesere de avrundede hjørnene.
Basert på denne kunnskapen, kan en border-radius-definisjon se slik ut:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Men noe annet faller også opp ved nærmere undersøkelser. Faktisk ble det også tilordnet en gradient til knappen.
Også slikt kan nå endelig gjøres med CSS-verktøy. De forskjellige gradient-egenskapene brukes til dette formålet. Disse tildeles background-egenskapen som verdi. I mellomtiden er det forresten en rekke verktøy der man kan generere fargegraderinger.
Et av disse finner du for eksempel på siden http://www.css3factory.com/linear-gradients/. I følgende syntaks er det altså definert en gradient og de kjente avrundede hjørnene.
I det gjeldende eksempelet ser syntaksen for knappen slik ut:
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;
}
Jeg nevnte allerede at knappene skal reagere når musen sveves over dem. For dette brukes den kjente :hover.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}Knappen vil også reagere på et annet hendelse. For dette brukes pseudo-klassen :active. Man kan reagere på dette når knappen klikkes.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
I det gjeldende eksempelet endrer fargene på toppkanten og bakgrunnsfargen til knappen når den klikkes på.
Runde hjørner for feltene
De såkalte avrundede hjørnene kan selvfølgelig ikke bare brukes på knappen, du kan også bruke dem på inndatafeltene. Resultatet kan se slik ut:
Og her er den tilhørende syntaksen:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Du kjenner allerede de nødvendige egenskapene som trengs for å definere slike avrundede hjørner.
Skjemavalidering med CSS3
Akkurat nå kan besøkende skrive inn hva de vil i inndatafeltene. En verifisering av de innskrevne verdiene finner ikke sted. Dette skal nå endres. Feltene vil bli sjekket mot følgende kriterier:
• Navn-feltet må fylles ut.
• E-postfeltet må inneholde en syntaktisk korrekt e-postadresse.
• Det flerlinjede inndatafeltet må også ha blitt fylt ut.
Først når disse kriteriene er oppfylt, kan skjemaet faktisk sendes inn.
For å markere et felt som obligatorisk, tildeles det required-attributtet. Et felt merket med dette må fylles ut, kan altså ikke være tomt.
En tilsvarende implementering ville se slik ut:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Her vil nettleseren sjekke om feltet er fylt ut. Hvis feltet er tomt og det likevel prøves å sende inn skjemaet, bør nettleseren gi en feilmelding.
Enda strengere blir det forresten med e-postfelt. Disse tildeles type="email" og attributtet required. Nå må feltet fylles ut med en faktisk e-postadresse, ellers vil det også gi en feilmelding når skjemaet sendes inn.
Samlet kan skjemaet se slik ut:
<ol>
<li>
<label for="name">Navn:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">E-postadresse:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Kommentar:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Send inn" />
</li>
</ol>
Spesielt i mer omfattende skjemaer kan det være obligatoriske felt, men også felt som ikke nødvendigvis trenger å fylles ut. I slike tilfeller kan man markere de obligatoriske feltene spesielt. Tilgangen til obligatoriske felt kan oppnås i CSS via:required.
:required {
background-color: #ff0000;
}Ved hjelp av denne syntaksen vil obligatoriske felt bli utstyrt med en rød bakgrunnsfarge.
En annen måte å markere obligatoriske felt på er følgende syntaks:
input:required:focus {
border: 1px solid red;
outline: none;
}
Hvis man prøver å sende inn skjemaet her, vil det første feltet få en rød ramme og fokus, som ikke er fylt ut eller ikke oppfyller valideringskravene.
Hvis en bruker fyller ut dette feltet riktig, men det er et annet felt som ikke er fylt ut, vil dette også få fokus og en rød ramme etter neste forsøk på å sende inn.
