Az indításhoz kattints a Küldés gombra. A jelenlegi CSS állapot így kell kinézzen:
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;
}Ez a szintaxis az alábbi eredményhez vezet:
Ez egy teljesen normál gomb. Jelenleg nem túl izgalmas a megjelenése, de abszolút betölti a célját. Ennek ellenére kissé feldobnánk. A végeredmény így fog kinézni:
Emellett van egy Hover-hatás is. Tehát a gomb színe megváltozik, amikor a kurzorral ráhúzol.
Ha jobban megnézed a gombot, észre fogod venni a lekerekített sarkokat. Ez kétségtelenül az egyik CSS újítás, amire a webdizájnerek hosszú ideje vártak. Korábban ez a lehetőség nem állt rendelkezésre. (A kivétel az volt persze, amikor a képeket használták button elemeknél.)
Tehát mostantól a lekerekített sarkok nemcsak az átlagos lap elemekre alkalmazhatók, hanem a gombokra is.
A CSS3-as tervezet szerint erre az border-radius tulajdonságot használjuk. Mozilla és WebKit böngészők alternatív írásmódot kínálnak az e tulajdonság kísérleti támogatására.
• -moz-border-radius
• -webkit-border-radius
Közben azonban az összes modern böngésző támogatja a lekerekített sarkokat.
Ez alapján a border-radius definíciója így nézhet ki:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Azonban egy más dolog is feltűnhet, ha alaposabban megnézed. Valójában átmenetet is hozzárendeltünk a gombhoz.
Ezt végre lehet hajtani CSS eszközökkel is. Ehhez a gradient tulajdonságokat használjuk. Ezeket értékként a background tulajdonsághoz rendeljük. Közben már rengeteg eszköz létezik, amely segít a színhelyek generálásában.
Ezek egyike például megtalálható a következő oldalon: http://www.css3factory.com/linear-gradients/. A következő szintaxisban egy színátmenetet és a már ismert lekerekített sarkokat értelmeztük.
Az aktuális példában a gomb szintaxisa így alakul:
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;
}
Már jeleztem, hogy a gombokra reagálni kell az egérrel történő ráviharáskor. Ehhez használjuk a jól ismert :hover-t.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}A gomb egy másik eseményre is reagálni fog. Erre a Pseudo-osztályt használjuk: :active. Ezáltal reagálunk, amikor a gombra kattintanak.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
Az aktuális példában a gomb felső szegélyének színe és a háttérszín megváltozik a gombra kattintáskor.
Kerek sarkok az űrlapmezőkhöz
Az úgynevezett kerek sarkokat természetesen nem csak a gombokra alkalmazhatjuk, hanem az űrlapmezők is felruházhatók velük. Az eredmény így nézhet ki:
És íme a hozzá tartozó szintaxis:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Azokat a tulajdonságokat, amelyekre az ilyen kerek sarkok meghatározásához szükség van, már ismered.
Űrlapellenőrzés CSS3 segítségével
Jelenleg a látogatók bármilyen adatot megadhatnak az űrlapmezőkben. Az adatok érvényességét nem ellenőrizzük. Ez most megváltozik. Az űrlapmezőket az alábbi szempontok szerint fogjuk ellenőrizni:
• A Név-mezőt meg kell adni.
• Az E-mail-mező tartalmaznia kell egy szintaktikailag helyes e-mail címet.
• A többsoros mező is ki kell legyen töltve.
Csak akkor lehet valóban elküldeni az űrlapot, ha ezek a szempontok teljesülnek.
Egy mezőt kötelező értékként jelölni a required attribútum hozzárendelésével lehet. Egy ilyen attribútummal ellátott mezőt ki kell tölteni, tehát nem lehet üres.
Amelyikre vonatkozik ez az alkalmazás, így néz ki:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Itt a böngésző ellenőrizné, hogy a mezőt kitöltötték-e. Ha a mező üres, és mégis megpróbálják elküldeni az űrlapot, a böngészőnek hibaüzenetet kellene kiadnia.
Egy kicsit tovább megy a dolog az e-mail mezőknél. Ezekhez type="email" és az required attribútumot rendeljük. Most már nem csak értéknek kell megfelelően kitölteni a mezőt, hanem ténylegesen helyes e-mail-címet kell beírni, különben szintén hibaüzenetet kapunk az űrlap elküldésekor.
Összességében az űrlap így nézhet ki:
<ol>
<li>
<label for="name">Név:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">E-mail cím:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Megjegyzés:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Küldés" />
</li>
</ol>
Kifejezetten bonyolultabb űrlapok esetén előfordulhat, hogy vannak kötelezően kitöltendő mezők, de olyanok is, amelyeket nem feltétlenül kell kitölteni. Ilyen esetekben külön megjelölhetitek a kötelező mezőket. A kötelező mezőkhöz CSS segítségével a :required hozzáfére.
:required {
background-color: #ff0000;
}Ez a szintaxis piros háttérszínt ad a kötelező mezőknek.
Egy másik módszer arra, hogy felhívjuk a figyelmet a kötelező mezőkre, a következő szintaxis:
input:required:focus {
border: 1px solid red;
outline: none;
}
Ha megpróbálnak elküldeni az űrlapot, az első mező piros keretet kap és fókuszba kerül, ha az nincs kitöltve vagy nem felel meg az érvényesítési követelményeknek.
Ha valaki aztán helyesen kitölti ezt a mezőt, de van még egy kitöltetlen mező, akkor annak a következő elküldési látogatás során szintén fókuszba kell kerülnie és piros kerettel kell rendelkeznie.
