Tvoríme pohľadný formulár (HTML a CSS) - dokončenie

V tomto dieli budeme pokračovať v tvorbe nášho formulára. Dostylujeme odosielacie tlačidlo, políčko pre mail a nastavíme zvýraznenie správnosti údajov pomocou CSS a ozdobíme stránku.

Animácie tlačidlá

Aby sa tlačidlo mierne pootočilo, musíme mu pridať animáciu. Animáciu pomenujte otaceniTlacitka. Animácia bude mať kroky po 25%. V každom kroku (0%, 25%, 50%, 75%, 100%) budeme tlačidlo transformovať. V prvom ho nebudeme otáčať vôbec (0deg). V druhom ho otočíme o 20 stupňov naopak (-20deg). V treťom ho zase vrátime (0deg). V štvrtom ho otočíme o 20 stupňov (20deg) a v piatom ho zase vrátime (0deg).

Animácie bez vendor prefixes:

@keyframes otaceniTlacitka {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-20deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

Do animácie si pridajte vendor prefixes.

Implementácia animácie

Do selektora k tlačidlu musíme pridať 4 vlastnosti týkajúce sa animácií. Prvý animation-name nám stanovuje meno animácie (otaceniTlacitka), animation-duration nám hovorí, ako dlho bude animácia trvať (2s). Animation-interation-count Uvádza počet opakovaní, v našom prípade to bude nekonečno (infinite). A posledná animation-timing-function uvádza, ako bude animácie prebiehať, v našom prípade to bude lineárne, teda že animácia bude časovanie rovnomerne a ku koncu bude "náraz". Vlastnosť sa volá linear.

Implementáciu animácie pridajte opäť vendor prefixes. Kód bez nich vyzerá nasledovne.

animation-name: otaceniTlacitka;
animation-duration:2s;
animation-iteration-count:infinite;
animation-timing-function:linear;

Hover na odosielanie tlačidla

Tlačidlu ešte pridáme hover, zmeníme mu farbu písma na červenú a pozadia na ružové.

input[type=submit]:hover {
    color:red;
    background-color:pink;
}

Nadpis

Nadpis bude mať písmo veľké 40px, Sego UI Light, odsadenie (padding) 30px, margin 0 a farbu zelenú.

h1 {
    font-size:40px;
    font-family:'Segoe UI Light';
    padding:30px;
    margin:0;
    color:green;
}

Políčko pre email

Políčko pre email taky nenecháme v náhode. Selektor urobíme podobne ako u odosielajúceho tlačidlá, selektorom obmedzíme na Input typu email. Políčko bude široké 300px, písmo bude veľké 30px, odsadenie (margin) z ľava 20px a zhora 40px, zaoblenia rohov 5px a zväčšenie (padding) 5px. Ďalej nastavíme písmo, to zoženieme z galérie písiem Google. Našiel som pre vás písmo Courgett. Písmo vložíme do hlavičky v HTML linkom na súbor, ktorý je na serveroch google. Link vyzerá nasledovne:

<link href="http://fonts.googleapis.com/css?family=Courgette" rel="stylesheet" type="text/css">

Teraz môžeme emailovému políčku nastaviť písmo na Corgette. Celý selektor vyzerá nasledovne:

input[type=email] {
    width:300px;
    font-family:Courgette;
    font-size:30px;
    margin-left:20px;
    margin-top:40px;
    border-radius:5px;
    border:none;
    padding:5px;
}

Validný a nevalidný políčko

Pokiaľ bude v políčku validný email, zafarbíme text na žltozelenú nevalidný email na červenú. Docielime toho aj bez použitia javascriptu. Na selektory môžeme pridať pseudotriedy: valid a: invalid, ktoré nám umožňujú ostylovat validné a nevalidný prvok.

[type=email]:valid {
}
[type=email]:invalid {
}

Výsledné selektory v našom prípade vyzerajú nasledovne:

form#gardenerNewsletter input[type=email]:invalid {
    color:red;
}
form#gardenerNewsletter input[type=email]:valid {
    color:yellowgreen;
}

Popisok

Popisku nastavíme farbu písma na zelenú, odsadenie (margin) z ľava 20px, veľkosť písma 15px a písmo Calibri.

Odkazu vnútri popisku nastavíme farbu písma na tmavozelené.

BONUS - výber na stránke

Ako bonus si uveďme, že štýl stránky možno oživiť výberom, ktorý nebude typicky modrý, ale bude nami nadefinovaný. Výber definuje pseudotriedy :: selection, v ktorej sa nastaví štýly na užívateľom vybrané objekty. Farbu pozadia môžeme nastaviť na lawngreen.

Štýly stránky

Aby okrem formulára aj podklad (stránka) vyzeral k svetu, tak ju doplníme o štýly. Pseudoelement: root nám ukazuje na koreňový element, ktorý je ešte pod bodmi. Nastavme mu farbu pozadia na lemonchiffon, výšku a šírku na 100% a obrázok na pozadí.

Obrázku dajte nasledujúce vlastnosti:

	Obrázok (tráva)
URL	trava.gif
Pozícia	bottom left
opakovanie	Po osi X

.<>

Tento očlánek vás mal nakopnúť k zopakovanie si HTML a CSS, ak sa vám páčil tak sa skúste zapojiť do týždennej minisoutěže Machr na Webdesign. V machri sú veľmi podobná zadania a toto je zadanie z jedného minulého.