Naučte se vylepšit vzhled vašeho webu
Učení, jak stylovat formuláře pomocí CSS, je skvělý způsob, jak zlepšit vzhled vašeho webu. Formuláře HTML jsou pravděpodobně mezi nejhorší věci na většině webových stránek. Jsou často nudné a utilitářské a nenabízejí mnoho stylů.
S CSS se to může změnit. Kombinace CSS s pokročilejšími značkami formuláře může poskytnout některé hezky vypadající formy.
Změňte barvy
Stejně jako u textu můžete změnit barvy popředí a pozadí elementů formátu.
Jednoduchý způsob, jak změnit barvu pozadí téměř každého prvku formuláře, je použít vlastnost barvy pozadí na vstupní značce. Například tento kód používá na všech prvcích modrou barvu pozadí (# 9cf).
vstup {
barva pozadí: # 9cf;
barva: # 000;
}}
Chcete-li změnit barvu pozadí pouze určitých prvků formuláře, stačí přidat textarea a zvolit styl. Například:
vstup, textarea, vyberte {
barva pozadí: # 9cf;
barva: # 000;
}}
Nezapomeňte změnit barvu textu, pokud barvu pozadí ztmavíte. Kontrastní barvy pomáhají zvýšit čitelnost tvarových prvků. Například text na tmavě červeném pozadí je mnohem snadněji čitelný, pokud je barva textu bílá. Například tento kód umístí bílý text na červené pozadí.
vstup, textarea, vyberte {
barva pozadí: # c00;
barva: #fff;
}}
Můžete dokonce umístit barvu pozadí na samotnou značku formuláře. Nezapomeňte, že značka formuláře je blokový prvek , takže barva vyplňuje celý obdélník, nikoliv pouze umístění prvků.
Můžete přidat žluté pozadí k prvku bloku, abyste oblast vynikli, například:
forma {
barva pozadí: #ffc;
}}
Přidat okraje
Stejně jako u barvy můžete změnit hranice různých prvků formuláře. Můžete přidat jeden okraj kolem celého formuláře. Ujistěte se, že jste přidali polstrování, nebo se vaše prvky formuláře uvízly hned vedle hranice.
Zde je příklad kódu pro 1-pixelový černý okraj s 5 pixely výplně:
forma {
hranice: 1px solid # 000;
polstrování: 5px;
}}
Můžete umístit hranice kolem více než samotná forma. Změňte okraj vstupních položek tak, aby vypadli:
vstup {
hranice: 2px dashed # c00;
}}
Buďte opatrní, když umístíte hranice na vstupní krabice, protože vypadají méně jako vstupní krabice a někteří lidé si možná neuvědomují, že mohou vyplnit formulář.
Kombinovat funkce stylů
Sestavením prvků formuláře pomocí myšlenek a některých CSS můžete nastavit hezky vypadající formulář, který doplňuje návrh a uspořádání vašeho webu.