Ustvarjanje stilskega odzivnega obrazca s CSS3 in HTML5

Kodiranje s CSS3 je dramatično spremenilo pokrajino znotraj spletnega razvoja frontendov. Obstaja več možnosti za izgradnjo edinstvenih vmesnikov z gradienti, padajočimi sencami in zaobljenimi vogali. Vsi ti učinki se počasi uveljavljajo v vsakem večjem spletnem brskalniku.

V tej vadnici želim predstaviti mnoge od teh kul CSS3 učinkov. Zgradil sem preprost spletni obrazec z nekaterimi novejšimi vnosi HTML5. Postavitev tudi odzivna; prilagodi se, ker se zmanjša velikost okna. Ta situacija je idealna za izdelavo spletnih obrazcev za podporo uporabnikom pametnih telefonov.

Oglejte si izvorno kodo in preverite, ali lahko sledite v strukturi datoteke. Tudi te elemente lahko prilagodite in jih kopirate v svoje spletne strani.

Demo
Prenesite izvorno kodo

Gradnja strukture obrazca

Za začetek sem ustvaril glavno datoteko index.html skupaj z dvema ločenima slogovema. style.css vsebuje vse privzete izbirnike responsive.css ročaji različnih velikosti oken. Moj doctype je HTML5 in celoten obrazec sem zavit v vsebnik

Ta primer prikazuje samo učinke, ki jih lahko prikažete pri kodiranju v CSS3. Tako nimamo nobenega skripta za pošiljanje prispevkov ali destinacije, ki bi preusmerila uporabnika. Moja koda spodaj vsebuje začetne vhodne oznake za prvih nekaj elementov obrazca.

Prvo območje bloka je ovito v oznako odseka, tako da lahko postavimo postavitev vzporedno. Levi stolpec vsebuje vse te vnose: besedilo, e-pošto, URL in telefonsko številko. Ko preklapljate po telefonu, se mora zaslon mobilne tipkovnice prilagoditi glede na vrsto vnosa. Obstaja veliko dobrih razlogov za podporo teh funkcij za mobilne, saj vsi delajo na poti v teh dneh.

Element textarea lahko vsebuje tudi besedilo o ogradi, ki je definirano na obremenitvi pag. To je podobno oznaki, ki izgine, ko uporabnik vnese nekaj besedila v polje. Atribut, ki se ne prenese, je samodokončanje ker besedilna območja običajno ne izpolnijo povezane vsebine.

Nadzor stranske vrstice

Želel sem zgraditi ta obrazec tako, da bi se ustrezno odzval na spreminjanje velikosti oken. Ko je okno dovolj polno, oba vhodna stolpca plavata drug ob drugem. Če pa se širina nekoliko zmanjša, se desna stranska vrstica spusti pod glavno vsebino.

Tu je moj HTML za območje stranske vrstice:

   Prejemnik:
  
  Prednostna naloga:
   Nizka    Srednje    Visoka

Ta koda dejansko ni nič preveč zmedena. Samo preprosta možnost izberite meni in nekaj izbirnih gumbov. Poleg tega sem po teh predmetih nastavil gumb za ponastavitev in predložitev proti koncu odseka.

Vse to izgleda dobro in dobro, tako da se zdaj premaknemo v nekatere lastnosti CSS. Obstaja toliko prilagoditev, ki jih lahko uporabite pri delu z elementi obrazca. Poskusi, da se ne boš preveč razmišljal in se zabaval!

Animirane sence

Med posameznimi glavnimi vhodnimi elementi, ki jih animiram barvito zunanjo senco, boste opazili. Google Chrome ima lastnost orisa, ki naredi nekaj podobnega, vendar ne tako ekstravagantno. Ta majhen del vmesnika je privlačen za obiskovalce, ki prvič obiskujejo.

 / ** elementi obrazca ** / # hongkiat-oblika box-sizing: border-box;  # hongkiat-oblika .txtinput display: block; družina pisav: "Helvetica Neue", Arial, sans-serif; mejni slog: trdna; meja-širina: 1px; obrobna barva: #dedede; margin-bottom: 20px; velikost pisave: 1.55em; oblazinjenje: 11px 25px; padding-left: 55px; širina: 90%; barva: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; prehod: mejni 0,15s linearni 0s, box-shadow 0,15s linearni 0s, barvni 0,15s linearni 0s; -webkit-prehod: mejni 0.15s linearni 0s, box-shadow 0.15s linearni 0s, barvni 0.15s linearni 0s; -moz-prehod: mejni 0.15s linearni 0s, box-shadow 0.15s linearni 0s, barvni 0.15s linearni 0s; -o-prehod: mejni 0.15s linearni 0s, box-shadow 0.15s linearni 0s, barvni 0.15s linearni 0s;  # hongkiat-form .txtinput: focus barva: # 333; mejna barva: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (41, 92, 161, 0.6); oris: 0 ni;

Za ciljanje vsakega elementa besedila sem uporabil razred .txtinput. Vsaka od prehodnih lastnosti deluje na obrobju, škatli in barvi. Uporabljam velikost škatle: obrobno polje; na zabojniku za obliko, tako da polnilo ne moti našega odziva.

Moral sem prekopirati te iste sloge in jih nekoliko urediti za besedilno področje. Spremenil sem nekaj oblazinjenja in robov in dodal edinstveno ikono za ozadje.

 # hongkiat-form textarea display: block; družina pisav: "Helvetica Neue", Arial, sans-serif; mejni slog: trdna; meja-širina: 1px; obrobna barva: #dedede; margin-bottom: 15px; velikost pisave: 1.5em; oblazinjenje: 11px 25px; padding-left: 55px; širina: 90%; višina: 180px; barva: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset; prehod: mejni 0,15s linearni 0s, box-shadow 0,15s linearni 0s, barvni 0,15s linearni 0s; -webkit-prehod: mejni 0.15s linearni 0s, box-shadow 0.15s linearni 0s, barvni 0.15s linearni 0s; -moz-prehod: mejni 0.15s linearni 0s, box-shadow 0.15s linearni 0s, barvni 0.15s linearni 0s; -o-prehod: mejni 0.15s linearni 0s, box-shadow 0.15s linearni 0s, barvni 0.15s linearni 0s;  # hongkiat-form textarea: focus barva: # 333; mejna barva: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) inset, 0 0 8px rgba (40, 90, 160, 0.6); oris: 0 ni;  # hongkiat-oblika textarea.txtblock ozadje: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-ponavljanje;

Vhodi stranske vrstice

Izbirni gumbi in izbrani elementi menija so preprostejši. Na te elemente lahko uporabite učinke zunanjega sijanja in podobne sence padca, vendar ne izgleda vedno dobro. Alternativno bodo oblikovalci izdelali uporabniške vmesnike po meri in jih priložili kot slike za ozadje. To pa lahko zahteva rešitev, ki je primerna za jQuery.

 span.radiobadge display: block; margin-bottom: 8px;  oznaka span.radiobadge font-size: 1.2em; padding-bottom: 4px;  select.selmenu font-size: 17px; barva: # 676767; oblazinjenje: 9px! pomembno; meja: 1px trdna #aaa; širina: 200px;

Nisem naredil veliko, da bi jih potisnil stran od glavnih vhodnih elementov. Veliko dodatnega polnila je pomembno, da se uporabniki počutijo udobno v stiku z obrazcem. Ko je besedilo zelo majhno, je to lahko samo boj za izpolnitev vsakega dela. Imejte pisavo veliko, vendar ne tako veliko, da preplavi stran.

Prilagojeni gumbi

Gumbi za ponastavitev in pošiljanje sta zasnovani v svojem razredu. Zgradil sem niz svetlobnih gradientov, ki se dobro ujemajo z modrimi poudarki v naših poljih obrazcev.

Spodaj je moja koda CSS za gumb za pošiljanje na standardnem in lebdečem stanju.

 #buttons #submitbtn display: block; plovec: levo; višina: 3em; oblazinjenje: 0 1em; meja: 1px trdna; oris: 0; font-weight: krepko; velikost pisave: 1.3em; barva: #fff; text-shadow: 0px 1px 0px # 222; beli prostor: nowrap; besedna obloga: normalno; navpično poravnava: srednja; kazalec: kazalec; -moz-border-radius: 2px; -webkit-border-radius: 2px; obrobni polmer: 2px; border-color: # 5e890a # 5e890a # 000; -moz-box-shadow: vložek 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: vložek 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: vložek 0 1px 0 rgba (256,256,256, .35); box-shadow: inset 0 1px 0 rgba (256,256,256, .35); barva ozadja: rgb (226,238,175); background-image: -moz-linearno-gradient (top, rgb (226, 238, 175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); ozadje-slika: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno-stop (3%, rgb (226,238,175)), barvno-stop (3%, rgb (188,216,77)), barvno-stop (100 %, rgb (144,176,38))); background-image: -webkit-linearni gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); ozadje-slika: -o-linearni gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -ms-linearni gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); ozadje-slika: linearni gradient (top, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0);  #buttons #submitbtn: hover, #buttons #submitbtn: active border-color: # 7c9826 # 7c9826 # 000; barva: #fff; -moz-box-shadow: vložek 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); -webkit-box-shadow: vložek 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); ozadje: rgb (228,237,189); ozadje: -moz-linearni gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); ozadje: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (2%, rgb (228,237,189)), barvno stop (3%, rgb (207,219,120)), barvno stop (100%, rgb ( 149,175,54))); ozadje: -webkit-linearni gradient (vrh, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); ozadje: -o-linearni gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); ozadje: -ms-linearni gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); ozadje: linearni gradient (top, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0);

Skoraj nemogoče je ohraniti to vrsto izbirnika čisto! Preprosto je preveč lastnosti, ki jih potrebujete za seznam in podporo za starejše starejše brskalnike. Internet Explorer lahko celo preusmeri te prelome z ustreznim filtrom. Poleg prelivov v ozadju sem vključil tudi novo barvo obrobe, zaobljene vogale in senco na hover.

Gumb za ponastavitev je podoben, toda z barvno shemo sem šel popolnoma drugačno. Svetlo siva je v primerjavi z svetlo zelenimi barvami v ozadju. Naš gumb za ponastavitev verjetno ne bo uporabljen veliko, zato ne potrebuje vse pozornosti.

 #buttoni #resetbtn display: block; plovec: levo; barva: # 515151; text-shadow: -1px 1px 0px #fff; margin-right: 20px; višina: 3em; oblazinjenje: 0 1em; oris: 0; font-weight: krepko; velikost pisave: 1.3em; beli prostor: nowrap; besedna obloga: normalno; navpično poravnava: srednja; kazalec: kazalec; -moz-border-radius: 2px; -webkit-border-radius: 2px; obrobni polmer: 2px; barva ozadja: #fff; background-image: -moz-linearni gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (2%, rgb (255,255,255)), barvno stop (2%, rgb (240,240,240)), barvno stop (100%, rgb (222, 222, 222))); background-image: -webkit-linearni gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -o-linearni gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -ms-linearni gradient (top, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: linearni gradient (top, 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); meja: 1px trdna # 969696; box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75);  #buttoni #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); barva: # 818181; barva ozadja: #fff; background-image: -moz-linearni gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -webkit-gradient (linearno, levo zgoraj, levo spodaj, barvno stop (2%, rgb (255,255,255)), barvno stop (2%, rgb (244,244,244)), barvno stop (100% rgb (229,229,229))); background-image: -webkit-linear-gradient (vrh, 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%); background-image: -ms-linearni gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: linearni gradient (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); obrobna barva: #aeaeae; box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5);

Lahko celo spustite tipko za ponastavitev in uporabite to belo / sivo barvno shemo kot glavni gumb za pošiljanje. Uporabil sem veliko enakih stilov gradientov in učinke senčnih kapljic, skupaj z besedilno senco za notranjo nalepko. Zagotovo zagotavlja drugačen občutek uporabniški izkušnji.

Odzivne spremembe postavitve

Če se pomaknemo v drugo datoteko CSS, si lahko ogledamo preproste odzivne poizvedbe, ki sem jih nastavil. Vsako okno brskalnika nad 800px bo doživelo celoten vmesnik stranske vrstice. Ko pridete pod ta prag, se levi stolpec razširi na 100% širine in vidite elemente stranske vrstice, ki se spustijo spodaj.

 @media zaslon in (max-width: 800px) body padding: 10px 15px;  #container širina: 100%;  # hongkiat-oblika #aligned širina: 100%; float: nič; prikaz: blok;  # hongkiat-oblika #aside širina: 100%; prikaz: blok; float: nič;  # hongkiat-oblika .txtinput, # hongkiat-form textarea širina: 85%;  #prioritycase float: levo; prikaz: blok;  #recipientcase float: levo; prikaz: blok; margin-right: 55px;

Ko se približamo velikosti, poskušam prilagoditi vsako od vhodnih oblik. Lastnost širine se lahko konča dlje kot sama spletna stran, potem pa imamo vhodne obrazce, ki se zatisnejo čez rob. To se zgodi okoli 550px, ki je, kjer sem prekinil naslednjo poizvedbo, skupaj z obema zaslon zaslon ločljivosti za portret in pokrajino.

 / * manjši zaslon dropoff ******* / @media samo zaslon in (max-width: 550px) # hongkiat-oblika .txtinput, # hongkiat-oblika textarea širina: 80%;  / * iPhone Landscape ******** / @media samo zaslon in (max-width: 480px) body padding: 10px 0px;  select.selmenu width: 190px;  / * iPhone portret ******* / @media samo in zaslon (max-width: 320px) body padding: 10px 0px;  # hongkiat-oblika .txtinput, # hongkiat-form textarea širina: 70%;  # hongkiat-oblika #aligned overflow: hidden;  select.selmenu width: 160px;  #recipientcase margin-right: 30px;

Horizontalni način pokrajine zelo dobro drži vse skupaj. Izbral je samo izbirni meni rahlo tanjši, da bi naredil prostor za izbirne gumbe. V pokončnem pogledu smo vse elemente spremenili na veliko manjše širine. Sedaj naša koda ne bo prekinila niti v preoblikovanih oknih brskalnika. Vendar je lepo imeti tudi podporo za pametne telefone iOS / Android.

Demo
Prenesite izvorno kodo

Zaključek

Upam, da je bila ta vadnica informativna in pojasnjuje, koliko je mogoče storiti na vaših spletnih obrazcih. Nove lastnosti CSS3 so dovolj močne, da zgradijo popolnoma delujoče animacije s samo nekaj vrsticami kode. To je resnično razburljiv čas za delo v razvoju spletnih strani in sledenje tem trendom.

Če imate ideje ali predloge v zvezi s kodo vadnice, jih prosimo, da jih delite z nami preko polja s komentarji spodaj.