Úprava vzhledu formuláře v HTML5 pomocí CSS3

V článku Formuláře v HTML5: nové typy polí a automatická validace jste se mohli podívat na nové typy formulářových polí v HTML5, respektive na řadu nových typů políčka input. S jejich využitím můžete zjednodušit vyplňování formuláře například na dotykových zařízeních - ta jsou schopna nabídnout upravenou klávesnici pro zadávání e-mailu, čísel, telefonu a podobně.

Rovněž jsme se podívali na zadávání hodnot do formuláře pomocí posuvníku a na automatickou validaci hodnot ve formuláři. HTML5 však není jen o formulářích nebo jen o tom, co nového můžete mít přímo ve struktuře webové stránky. Jde ruku v ruce s novou verzí kaskádových stylů označovanou jako CSS3. Ta nabízí řadu nových vlastností, díky kterým si usnadníte tvorbu vzhledu webových stránek.

V tomto návodu se pokusíme výchozí vzhled formuláře upravit do vylepšené podoby s pomocí nových vlastností definovaných právě v CSS3. Jako základ použiju vytvořený HTML5 formulář z výše uvedeného článku.

Základní uspořádání prvků ve formuláři - klasické kódování CSS

V první řadě musíme vzhled formuláře a jeho prvků upravit tak, aby vůbec držel pohromadě a zobrazil se v přijatelné podobě i ve starších prohlížečích. Použijeme k tomu klasické definice CSS, na které jste určitě zvyklí.

Do formuláře z minulého článku nejprve doplníme dvě úpravy. Tlačítku pro odeslání přidejte class=submit a pod něj doplňte <span class=cleaner></span>. Tlačítko totiž zarovnáme na pravou stranu a potřebujeme, aby pod ním vše bylo zase v původním stavu, tedy aby tlačítko neuteklo z formuláře. Co by se stalo, kdybychom tento „cleaner" nepoužili, můžete vyzkoušet sami jeho odstraněním.

Nyní již samotné CSS:

{syntaxhighlighter brush: css; } body{ font-family: Arial; font-size: 12px; color: #333; } form{ border: 1px solid #333; background: #F8F8F8; margin: 10px; padding: 10px; width: 300px; } label{ font-weight: bold; width: 150px; display: inline-block; } input{ width: 140px; } input.submit{ border: #fff; color: #fff; cursor: pointer; font-weight: bold; background: #0066CC; text-transform: uppercase; float: right; width: 70px; padding: 5px; } .cleaner{ clear: both; display: block; } {/syntaxhighlighter}

V první řadě je zde definice vzhledu písma pro celé tělo stránky. Následuje definice vzhledu formuláře jako takového, kdy nastavujeme 1 px širokou nepřerušovanou téměř černou linku, šedé pozadí, vnější a vnitřní odsazení na 10 px a pevnou šířku 300 px.

Všem popiskům políček nastavíme tučné písmo, šířku 150 px a zobrazení inline-block. To se nevidí moc často, takže připomínám, že jde o kombinaci zobrazení inline (na řádku) a bloku. Docílíme tím, že prvek bude respektovat nastavenou šířku a zároveň bude na řádku s vedlejším prvkem. Není třeba mu doplňovat float: left. Díky pevné šířce popisků budou všechna políčka stejně daleko od popisného textu.

Všem vstupním políčkům formuláře nastavíme šířku na 140 px, tak abychom vyplnili spolu s popisky celou šířku formuláře. Odesílacímu tlačítku, které má doplněnu třídu submit nastavíme bílý okraj a bílé písmo. Při potlačení výchozího okraje je vhodné nastavit ukazatel myši na známou ručku. Dále nastavíme tučné písmo, modré pozadí, převod všech písmen na velká,  pozici na pravou stranu, pevnou šířku a vnitřní odsazení.

Zbývá už jen nastavení čističe, kterým vyresetujeme pravé zarovnání nastavené u odesílacího tlačítka. Formulář by nyní měl vypadat nějak takto:

Vytvoření přechodové výplně

Nyní se již pustíme do CSS3, konkrétně do nastavení přechodových výplní. V CSS3 ji můžete realizovat do definice background-image, tedy obrázku na pozadí. Místo uvedení URL obrázku však můžete použít definici linear-gradient(), která přebírá parametry s označením typu přechodové výplně (linear nebo radial), nastavením výchozí a koncové pozice gradientu (vždy v souřadnicích x a y, tedy čtyři hodnoty), nastavením výchozí a koncové barvy přechodové výplně a případně s nastavením kroků barev.

Všimněte si, že v definici CSS3 jsou u definice linear-gradient použity prefixy. Je to proto, že není jisté, zda se definice bude zapisovat v daném formátu. Prohlížeče tedy na ni reagují, ale vyžadují právě onen prefix. Ten odpovídá jednotlivým vykreslovacím jádrům.

Všimněte si, že každý z prohlížečů vyžaduje trošku jinou syntaxi. CSS3 gradienty si můžete nechat vygenerovat zde nebo zde. Po doplnění do definice vzhledu formuláře může výsledek vypadat nějak takto:

Zaoblení rohů

Zakulacení rohů se dříve s oblibou dělalo pomocí JavaScriptu (viz zmínka na Maxiorlovi z roku 2006), případně se používala složitá technika s vyřezáváním částí obrázků z grafického návrhu a pak jejich pozicováním do DIVů okolo původní hranaté oblasti. Fuj!

S využitím CSS3 je zakulacení rohů hračka, navíc potřebná syntaxe je velmi jednoduchá. Stačí použít nastavení border-radius, případně doplněné o prefixy. Pokud uvedete jednu hodnotu, zaoblí se jí všechny čtyři rohy zvoleného prvku, případně můžete uvést čtyři hodnoty, pokud byste chtěli odlišně zaoblit horní levý a pravý a spodní pravý a levý roh.

V našem příkladu doplníme větší zaoblení k formuláři a malé k vstupním políčkům a odesílacímu tlačítku. Všimněte si, že zaoblení respektuje přechodovou výplň nebo obrázek na pozadí.

Stínování

V poslední dávce úprav formuláře pomocí CSS3 si vyzkoušíme práci se stínováním. Ke stínování elementů nám slouží definice box-shadow. Té předáváte údaje o vodorovné a svislé délce stínu (záporné hodnoty vytvářejí vnitřní stín), délku rozmazání a šířku stínu. Následuje definice barvy stínu, a to buď v klasickém hexa vyjádření nebo ve formě rgba (čtyři číselné hodnoty, tři pro barvy a jedna pro průhlednost).

V našem CSS doplníme stín k formuláři, kterému jsme odebrali černé orámování. Nenápadný stín doplníme také k vstupním prvkům formuláře. Pro doplnění stínu k textům popisků použijeme podobnou vlastnost, a to text-shadow. Té uvádíte vodorovnou a svislou délku stínu, rozmazání a jeho barvu.

Výsledek by měl vypadat nějak takto:

Zde jsou pak kaskádové styly po úpravě:

{syntaxhighlighter brush: css; } body{ font-family: Arial; font-size: 12px; color: #333; } form{ background: #F8F8F8; margin: 10px; padding: 10px; width: 300px; background-image: linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%); background-image: -o-linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%); background-image: -moz-linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%); background-image: -webkit-linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%); background-image: -ms-linear-gradient(bottom, rgb(153,153,153) 44%, rgb(204,204,204) 72%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44, rgb(153,153,153)),color-stop(0.72, rgb(204,204,204))); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 2px 2px #cccccc; -moz-box-shadow: 2px 2px 2px 2px #cccccc; box-shadow: 2px 2px 2px 2px #cccccc; } label{ font-weight: bold; width: 150px; display: inline-block; text-shadow: 1px 1px 1px #999999; } input{ width: 140px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 1px 1px 1px 1px #cccccc; -moz-box-shadow: 1px 1px 1px 1px #cccccc; box-shadow: 1px 1px 1px 1px #cccccc; border: none; } input.submit{ border: #fff; color: #fff; cursor: pointer; font-weight: bold; background: #0066CC; text-transform: uppercase; float: right; width: 70px; padding: 5px; background-image: linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%); background-image: -o-linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%); background-image: -moz-linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%); background-image: -webkit-linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%); background-image: -ms-linear-gradient(bottom, rgb(0,102,204) 44%, rgb(87,171,255) 72%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44, rgb(0,102,204)),color-stop(0.72, rgb(87,171,255))); } .cleaner{ clear: both; display: block; } {/syntaxhighlighter}

Kromě výše uvedených dvou generátorů přechodových výplní pro CSS3 můžete vyzkoušet i generátor pro ostatní CSS3 definice. Vřele doporučuji navštívit nástroj na adrese css3generator.com. Další informace o CSS3 najdete přímo na webu W3C. V příloze najdete zdrojový kód ukázky.