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

HTML a CSS Profesionální webdesign 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;
Animace tlačíta

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;
}
Hover tlačítka

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;
}
Nadpis

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;
}
Políčko pro email

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.

Popisek

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.

Výběr prvků na stránce

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
Výsledný formulář
Machr na webdesign

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 . :)


 

Stáhnout

Staženo 285x (64.3 kB)
Aplikace je včetně zdrojových kódů v jazyce CSS

 

  Aktivity (1)

Článek pro vás napsal Michal Žůrek (misaz)
Avatar
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.

Jak se ti líbí článek?
Celkem (6 hlasů) :
4.54.54.54.54.5


 


Miniatura
Všechny články v sekci
Profesionální webdesign v CSS 3
Miniatura
Následující článek
Úvod do gridu960

 

 

Komentáře

Avatar
Ľuboš Čurgó
Redaktor
Avatar
Ľuboš Čurgó:

zaujmavy clanok :) toto dokonca vidim prvy krat

[type=email]:valid {}
[type=email]:invalid {}
 
Odpovědět 17.11.2013 14:19
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Naučím se nové příkazy a možná si udělám animaci. Formuláře nechám na page creatorech. Mají složitý kód.

 
Odpovědět  -3 24.6.2015 16:29
Avatar
Odpovídá na vojtanosek
Michal Žůrek (misaz):

očividně jsi ještě neviděl opravdu složitý kód...

Odpovědět 24.6.2015 16:40
Nesnáším {}, proto se jim vyhýbám.
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

No tak složitý teda není. Jen třeba neznám nějaké příkazy ;) .

 
Odpovědět  -1 24.6.2015 17:03
Avatar
Odpovědět  +1 24.6.2015 18:50
Nesnáším {}, proto se jim vyhýbám.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.