První oblast bloku je zabalena do tagu sekce, takže můžeme rozložit rozložení vedle sebe. Levý sloupec obsahuje všechny tyto vstupy: text, e-mail, URL a telefonní číslo. Jak je vidět na vašem telefonu, displej mobilní klávesnice by se měl přizpůsobit typu vstupu. Existuje spousta dobrých důvodů pro podporu těchto funkcí pro mobilní telefony, protože všichni pracují v těchto dnech.
Element textarea může také obsahovat zástupný text definovaný na stránce loadload. To je podobné štítku, který zmizí, jakmile uživatel zadá text do pole. Atribut, který není přenesen, je autocomplete protože textareas obvykle nevyplňují související obsah.
Ovládací prvky postranního panelu Chtěl jsem tento formulář postavit tak, aby odpovídal odpovídajícím způsobem změnám velikosti okna. Když je okno dostatečně plné, oba vstupní sloupce jsou plovoucí vedle sebe. Pokud je však šířka mírně oříznuta, pravý boční panel klesne pod hlavní obsah.
Zde je můj kód HTML pro oblast postranního panelu:
Příjemce: Pracovníci webu Šéfredaktor Technické oddělení Vztahy s veřejností Obecná podpora Tento kód ve skutečnosti není nic tak matoucího. Stačí jednoduchá volba, vyberte nabídku a některé přepínače. Kromě toho, po těchto objektech jsem umístil reset a odeslat tlačítko směrem ke konci sekce.
To vše vypadá dobře a dobře, takže se nyní přesuneme do některých vlastností CSS. Existuje mnoho úprav, které můžete použít při práci s prvky formuláře. Snažte se bog sami se příliš mnoho myšlení a bavte se!
Animované Box Stíny Všimnete si, jak jste kartu přes každý z hlavních vstupních prvků, které jsem animoval barevný vnější stín. Google Chrome má vlastnost osnovy, která dělá něco podobného, ale ne tak extravagantní. Tato malá část rozhraní je lákavá pro první návštěvníky.
/ ** formulářové prvky ** / # hongkiat-form box-sizing: border-box; # hongkiat-form .txtinput zobrazit: blok; font-family: "Helvetica Neue", Arial, sans-serif; hraniční styl: pevná; border-width: 1px; border-color: #dedede; margin-bottom: 20px; velikost písma: 1.55em; polstrování: 11px 25px; polstrování vlevo: 55px; šířka: 90%; barva: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; -webk-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; přechod: ohraničení 0.15s lineární 0s, box-shadow 0.15s lineární 0s, barva 0.15s lineární 0s; -webk-přechod: okraj 0.15s lineární 0s, box-shadow 0.15s lineární 0s, barva 0.15s lineární 0s; -moz-přechod: hraniční 0,15s lineární 0s, box-shadow 0,15s lineární 0s, barva 0,15s lineární 0s; -o-přechod: okraj 0.15s lineární 0s, box-shadow 0.15s lineární 0s, barva 0.15s lineární 0s; # hongkiat-form .txtinput: focus barva: # 333; hraniční barva: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0, 8px rgba (41, 92, 161, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0,08px rgba (41, 92, 161, 0,6); -webk-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 8px rgba (41, 92, 161, 0,6); obrys: 0 žádné; Aby bylo možné zacílit každý textový prvek, použil jsem třídu .txtinput. Každá z vlastností přechodu pracuje na hranici, boxu a barvě. Používám velikost krabice: rámeček; na formuláři kontejneru tak polstrování nezasahuje náš citlivý design.
Musel jsem kopírovat tyto styly a upravovat je mírně pro textarea. Změnil jsem některé z polstrování a okrajů a připojil jsem jedinečnou ikonu na pozadí.
# hongkiat-form textarea zobrazit: blok; font-family: "Helvetica Neue", Arial, sans-serif; hraniční styl: pevná; border-width: 1px; border-color: #dedede; spodní okraj: 15px; velikost písma: 1.5em; polstrování: 11px 25px; polstrování vlevo: 55px; šířka: 90%; výška: 180px; barva: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; -webk-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka; přechod: ohraničení 0.15s lineární 0s, box-shadow 0.15s lineární 0s, barva 0.15s lineární 0s; -webk-přechod: okraj 0.15s lineární 0s, box-shadow 0.15s lineární 0s, barva 0.15s lineární 0s; -moz-přechod: hraniční 0,15s lineární 0s, box-shadow 0,15s lineární 0s, barva 0,15s lineární 0s; -o-přechod: okraj 0.15s lineární 0s, box-shadow 0.15s lineární 0s, barva 0.15s lineární 0s; # hongkiat-form textarea: focus barva: # 333; hraniční barva: rgba (41, 92, 161, 0,4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 0 8px rgba (40, 90, 160, 0,6); -webk-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) vložka, 0 8px rgba (40, 90, 160, 0,6); obrys: 0 žádné; # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png'] 5px 4px bez opakování; Vstupy postranního panelu Tlačítka rádia a položky nabídky jsou mnohem jednodušší. Na tyto prvky můžete aplikovat efekty vnější záře a podobné stíny, ale ne vždy to vypadá dobře. Alternativně návrháři vytvoří vlastní uživatelské rozhraní a připojí je jako obrázky na pozadí. To však může vyžadovat řešení jQuery, aby se možnosti zobrazovaly správně.
span.radiobadge display: block; margin-bottom: 8px; span.radiobadge label velikost písma: 1.2em; vypínací dno: 4px; select.selmenu font-size: 17px; barva: # 676767; polstrování: 9px! hranice: 1px pevná #aaa; šířka: 200px; Neudělala jsem mnoho, abych je od hlavních vstupních prvků vytlačila. Spousta extra polstrování je důležitá, takže se vaši uživatelé cítí pohodlně v kontaktu s formulářem. Když je text super maličký, může to být boj jen o vyplnění každé části. Mějte své písmo velké, ale ne tak velké, že to přemůže stránku.
Přizpůsobená tlačítka Tlačítka resetu a odeslání jsou navržena ve vlastní třídě. Vytvořil jsem sadu světelných gradientů, aby se dobře hodil k modrým vrcholům v našich polích formuláře.
Níže je můj kód CSS pro tlačítko Odeslat ve standardním stavu.
#buttons #submitbtn display: block; plavat vlevo; výška: 3em; výplň: 0 1em; okraj: 1px pevná látka; obrys: 0; font-weight: tučné; velikost písma: 1.3em; barva: #ff; text-shadow: 0px 1px 0px # 222; white-space: nowrap; zalamování slov: normální; svislé zarovnání: uprostřed; kurzor: ukazatel; -moz-border-radius: 2px; -webk-border-radius: 2px; hraniční rádius: 2px; border-color: # 5e890a # 5e890a # 000; -moz-box-shadow: inset 0 1px 0 rgba (256,256,256,35); -ms-box-shadow: inset 0 1px 0 rgba (256,256,256,35); -webk-box-shadow: inset 0 1px 0 rgba (256,256,256,35); box-shadow: inset 0 1px 0 rgba (256,256,256,35); barva pozadí: rgb (226,238,175); pozadí-obraz: -moz-lineární gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); pozadí-obraz: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (3%, rgb (226,238,175)), barva-stop (3%, rgb (188,216,77)), barva-stop (100 %, rgb (144,176,38)))); pozadí-obraz: -webk-lineární gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); pozadí-obraz: -o-lineární gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); pozadí-obraz: -ms-lineární gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); pozadí: lineární gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #submitbtn: active border-color: # 7c9826 # 7c9826 # 000; barva: #ff; -moz-box-shadow: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webk-box-shadow: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); box-shadow: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); pozadí: rgb (228,237,189); pozadí: -moz-lineární gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadí: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (2%, rgb (228,237,189)), barevné zastavení (3%, rgb (207,219,120)), barevné zastavení (100%, rgb ( 149,175,54)))); pozadí: -webk-lineární gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadí: -o-lineární gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadí: -ms-lineární gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadí: lineární gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Je téměř nemožné udržet tento typ voliče čistý! Existuje prostě příliš mnoho vlastností, které potřebujete k výčtu a podpoře mnoha starších starších prohlížečů. Aplikace Internet Explorer může tyto přechody dokonce vykreslit správným filtrem. Všimněte si kromě přechodu pozadí také novou barvu ohraničení, zaoblené rohy a stín rámečku na přechodu.
Tlačítko reset vypadá podobně, ale s barevným schématem jsem prošel úplně jinou cestou. Světle šedá má tendenci padat do pozadí ve srovnání s jasně zelenými barvami. Naše tlačítko reset pravděpodobně nebude moc používáno, takže nepotřebuje veškerou pozornost.
#buttons #resetbtn display: block; plavat vlevo; barva: # 515151; text-shadow: -1px 1px 0px #fff; pravý okraj: 20px; výška: 3em; výplň: 0 1em; obrys: 0; font-weight: tučné; velikost písma: 1.3em; white-space: nowrap; zalamování slov: normální; svislé zarovnání: uprostřed; kurzor: ukazatel; -moz-border-radius: 2px; -webk-border-radius: 2px; hraniční rádius: 2px; barva pozadí: #fff; pozadí-obraz: -moz-lineární gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); pozadí-obraz: -webk-gradient (lineární, levý horní, levý dolní, barevný doraz (2%, rgb (255,255,255)), barevné zastavení (2%, rgb (240,240,240)), barevné zastavení (100%, rgb (222, 222, 222)))); pozadí-obraz: -webk-lineární gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); pozadí-obraz: -o-lineární gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); pozadí-obraz: -ms-lineární gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); pozadí: lineární gradient (horní, rgb (255, 255, 255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); ohraničení: 1px pevná # 969696; box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); -webk-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); barva: # 818181; barva pozadí: #fff; pozadí-obraz: -moz-lineární gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); pozadí-obraz: -webit-gradient (lineární, levý horní, levý dolní, barevný doraz (2%, rgb (255,255,255)), barevné zastavení (2%, rgb (244,244,244)), barevné zastavení (100%, rgb (229,229,229)))); pozadí-obraz: -webk-lineární gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); pozadí-obraz: -ms-lineární gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); pozadí: lineární gradient (horní, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); border-color: #aeaeae; box-shadow: inset 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Můžete dokonce zrušit typ resetování a použít toto bílé / šedé barevné schéma jako hlavní tlačítko pro odeslání. Použil jsem mnoho stejných stylů přechodu a efekty stínu, spolu s textovým stínem pro vnitřní štítek. To určitě poskytuje odlišný pocit pro uživatele.
Změny rozvržení rozvržení Pohybem do jiného souboru CSS se můžeme podívat na jednoduché citlivé mediální dotazy, které jsem nastavil. Jakékoli okno prohlížeče nad 800px zažije plné postranní rozhraní. Když se dostanete pod tento práh, levý sloupec se rozbalí na 100% šířku a níže uvidíte prvky postranního panelu.
@media screen a (max-width: 800px) body padding: 10px 15px; #container width: 100%; # hongkiat-form #aligned šířka: 100%; float: none; zobrazení: blok; # hongkiat-form #aside šířka: 100%; zobrazení: blok; float: none; # hongkiat-form .txtinput, # hongkiat-form textarea šířka: 85%; #prioritycase float: vlevo; zobrazení: blok; #recipientcase float: vlevo; zobrazení: blok; pravý okraj: 55px; Když se dostáváme blíže k velikosti, snažím se přizpůsobit každou ze vstupních forem. Vlastnost Šířka může skončit déle než samotná webová stránka a pak máme přes hrany vyčnívající vstupní formuláře. To se děje kolem 550px, což je místo, kde jsem rozbít další dotaz, spolu s oběma obrazovky displeje iPhone rozlišení pro portrét a krajinu.
/ * menší obrazovka droppoff ******* / @media pouze obrazovka a (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea width: 80%; / * iPhone Krajina ******** / @media pouze obrazovka a (max-width: 480px) tělo padding: 10px 0px; select.selmenu width: 190px; / * iPhone portrét ******* / @media pouze obrazovka a (max-width: 320px) tělo padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea šířka: 70%; # hongkiat-form #aligned přetečení: skryté; select.selmenu width: 160px; #recipientcase margin-right: 30px; Horizontální režim krajiny stále drží vše dohromady velmi dobře. Jediné, co jsem udělal rozbalovací nabídku, je trochu tenčí, aby se vytvořil prostor pro přepínače. V zobrazení na výšku jsem změnil velikost všech prvků na mnohem menší šířky. Nyní se náš kód nezlomí ani v oknech prohlížeče. Je ale hezké mít podporu i pro iOS / Android smartphony.
Demo Stáhněte si zdrojový kód Závěr Doufám, že tento návod byl informativní, když vysvětlil, jak moc se dá na vašich webových stránkách udělat. Nové vlastnosti CSS3 jsou dostatečně výkonné, aby vytvořily plně funkční animace s několika řádky kódu. Je to opravdu vzrušující doba pracovat ve vývoji webu a sledovat tyto trendy.
Máte-li nápady nebo návrhy na výukový kód, neváhejte se s námi podělit prostřednictvím pole pro komentář níže.
