Tvoříme pohledný formulář (HTML a CSS) - dokončení

V tomto dílu budeme pokračovat v tvorbě našeho formuláře. Dostylujeme odesílací tlačítko, políčko pro email a nastavíme zvýraznění správnosti údajů pomocí CSS a ozdobíme stránku.

Animace tlačítka

Aby se tlačítko mírně pootočilo, musíme mu přidat animaci. Animaci pojmenujte otaceniTlacitka. Animace bude mít kroky po 25%. V každém kroku (0%, 25%, 50%, 75%, 100%) budeme tlačítko transformovat. V prvním ho nebudeme otáčet vůbec (0deg). V druhém ho otočíme o 20 stupňů naopak (-20deg). V třetím ho zase vrátíme (0deg). V čtvrtém ho otočíme o 20 stupňů (20deg) a v pátém ho zase vrátíme (0deg).

Animace 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 animace si přidejte vendor prefixes.

Implementace animace

Do selektoru k tlačítku musíme přidat 4 vlastnosti týkající se animací. První animation-name nám stanovuje jméno animace (otaceniTlacitka), animation-duration nám říká, jak dlouho bude animace trvat (2s). Animation-interation-count uvadí počet opakování, v našem případě to bude nekonečno (infinite). A poslední animation-timing-function uvádí, jak bude animace probíhat, v našem případě to bude lineárně, tedy že animace bude časována rovnoměrně a ke konci bude „náraz“. Vlastnost se jmenuje linear.

Implementaci animace přidejte opět vendor prefixes. Kód bez nich vypadá následovně.

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

Hover odesílacího tlačítka

Tlačítku ještě přidáme hover, změníme mu barvu písma na červenou a pozadí na růžové.

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

Nadpis

Nadpis bude mít písmo velké 40px, Segoe UI Light, odsazení (padding) 30px, margin 0 a barvu zelenou.

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

Políčko pro email

Políčko pro email taky nenecháme v náhodě. Selektor uděláme podobně jako u odesílacího tlačítka, selektorem omezíme na inputy typu email. Políčko bude široké 300px, písmo bude velké 30px, odsazení (margin) z leva 20px a shora 40px, zakulacení rohů 5px a zvětšení (padding) 5px. Dále nastavíme písmo, to seženeme z galerie písem Google. Našel jsem pro vás písmo Courgett. Písmo vložíme do hlavičky v HTML linkem na soubor, který je na serverech google. Link vypadá následovně:

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

Nyní můžeme emailovému políčku nastavit písmo na Corgette. Celý selektor vypadá následovně:

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

Pokud bude v políčku validní email, obarvíme text na žlutozelenou nevalidní email na červenou. Docílíme toho i bez použití javascriptu. Na selektory můžeme přidat pseudotřídy :valid a :invalid, které nám umožňují ostylovat validní a nevalidní prvek.

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

Výsledné selektory v našem případě vypadají následovně:

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

Popisek

Popisku nastavíme barvu písma na zelenou, odsazení (margin) z leva 20px, velikost písma 15px a písmo Calibri.

Odkazu uvnitř popisku nastavíme barvu písma na tmavězelenou.

BONUS – výběr na stránce

Jako bonus si uveďme, že styl stránky lze oživit výběrem, který nebude typicky modrý, ale bude námi nadefinovaný. Výběr definuje pseudotřídou ::selection, ve které se nastaví styly na uživatelem vybrané objekty. Barvu pozadí můžeme nastavit na lawngreen.

Styly stránky

Aby krom formuláře i podklad (stránka) vypadal k světu, tak ji doplníme o styly. Pseudoelement :root nám ukazuje na kořenový element, který je ještě pod body. Nastavme mu barvu pozadí na lemonchiffon, výšku a šířku na 100% a obrázek na pozadí.

Obrázku dejte následující vlastnosti:

	Obrázek (tráva)
URL	trava.gif
Pozice	bottom left
Opakování	Po ose X

Tento očlánek vás měl nakopnout k zopakování si HTML a CSS, pokud se vám líbil tak se zkuste zapojit do týdenní minisoutěže Machr na Webdesign. V machrovi jsou velmi podobná zadání a toto je zadání z jednoho minulého .