Stilīgas atbildes formas izveide ar CSS3 un HTML5

Kodēšana ar CSS3 ir krasi mainījusi priekšplāna Web izstrādes ainavu. Ir vairāk iespēju veidot unikālas saskarnes ar slīpumiem, pilieniem ēnām un noapaļotiem stūriem. Visas šīs sekas pamazām tiek pieņemtas katrā galvenajā tīmekļa pārlūkprogrammā.

Šajā apmācībā es vēlos parādīt daudzas no šīm atdzistajām CSS3 sekām. Esmu izveidojis vienkāršu tīmekļa veidlapu, izmantojot dažus jaunākos HTML5 ievades veidus. Izkārtojums ir arī atsaucīga; tas tiks pielāgots, samazinot loga izmēru. Šī situācija ir ideāla, lai veidotu tīmekļa veidlapas, lai atbalstītu viedtālruņu lietotājus.

Pārbaudiet avota kodu un pārbaudiet, vai jūs varat sekot līdzi faila struktūrai. Varat arī brīvi pielāgot šos elementus un kopēt tos savās vietnēs.

Demo
Lejupielādēt avota kodu

Veidlapas struktūras veidošana

Lai sāktu, es esmu izveidojis galveno failu index.html kopā ar divām atsevišķām stilu lapām. style.css tajā ir visi noklusējuma atlasītāji atbildes.css apstrādā dažādus logu izmērus. Mans doctype ir HTML5, un es esmu iesaiņojusi visu veidlapu konteinerā

Šis piemērs parāda tikai efektus, ko jūs varat izpaust, kodējot CSS3. Tādējādi mums nav post-iesniegšanas skripta vai galamērķa, lai novirzītu lietotāju. Tālāk redzamais kods ir atvēršanas ievades tagi mūsu pirmajiem dažiem veidlapas elementiem.

Pirmais bloka apgabals ir iesaiņots sekcijas tagā, lai mēs varētu izkustēt izkārtojumu blakus. Kreisajā slejā ir visi šie ievadi: teksts, e-pasts, URL un tālruņa numurs. Izmantojot tālruni, mobilā tastatūras displejs ir jāpielāgo, pamatojoties uz ievades veidu. Ir daudz iemeslu, lai atbalstītu šīs funkcijas mobilajām ierīcēm, jo šajās dienās visi strādā.

Textarea elementam var būt arī vietas rezervācijas teksts, kas definēts pageload. Tas ir līdzīgs etiķetei, kas pazūd, kad lietotājs ievada kādu tekstu laukā. Atribūts, kas nav pārnests, ir automātiski pabeigt jo textareas parasti neaizpilda saistīto saturu.

Sānjoslas vadīklas

Es gribēju veidot šo veidlapu tā, lai tā atbilstoši reaģētu uz loga izmēru maiņu. Kad logs ir pietiekami pilnīgs, abas ievades kolonnas peld viena otrai. Bet, ja platums ir nedaudz samazināts, labās puses sānjosla nokrīt zem galvenā satura.

Šeit ir mans sānjoslas apgabala HTML:

   Saņēmējs:
  
  Prioritāte:
   Zems    Vidējs    Augsts

Šis kods faktiski nav pārāk mulsinošs. Tikai vienkārša opciju izvēle izvēlne un dažas radio pogas. Turklāt pēc šiem objektiem ievietoju atiestatīšanas un iesniegšanas pogu sadaļas beigās.

Tas viss izskatās labi un labi, tāpēc tagad nonāksim dažās CSS īpašībās. Strādājot ar veidlapu elementiem, var izmantot tik daudz pielāgojumu. Mēģiniet neveikt sevi ar pārāk lielu domāšanu un jautri!

Animācijas kastes ēnas

Jūs pamanīsiet kā cilni, izmantojot katru no galvenajiem ievades elementiem, kurus esmu animējis ar krāsainu ārējo ēnu. Google Chrome ir iezīmēts īpašums, kas dara kaut ko līdzīgu, bet ne gluži kā ekstravagants. Šī nelielā saskarnes daļa ir pievilcīga pirmo reizi apmeklētājiem.

 / ** veidlapas elementi ** / # hongkiat-form box-sizing: border-box;  # hongkiat-form .txtinput display: block; font-family: "Helvetica Neue", Arial, sans-serifs; robežu stils: ciets; robežu platums: 1px; rāmja krāsa: #dedede; margas apakšā: 20px; fonta lielums: 1.55em; polsterējums: 11px 25px; polsterējums pa kreisi: 55px; platums: 90%; krāsa: # 777; kastes ēna: 0 1px 3px rgba (0, 0, 0, 0,1) ieliktnis; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) ieliktnis; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) ieliktnis; pāreja: robeža 0.15s lineāra 0s, kastes ēna 0.15s lineāra 0s, krāsa 0.15s lineāra 0s; -webkit pāreja: robeža 0.15s lineāra 0s, kastes ēna 0.15s lineāra 0s, krāsa 0.15s lineāra 0s; -moz-pāreja: robeža 0.15s lineāra 0s, kastes ēna 0.15s lineāra 0s, krāsa 0.15s lineāra 0s; -o-pāreja: robeža 0.15s lineāra 0s, kastes ēna 0.15s lineāra 0s, krāsa 0.15s lineāra 0s;  # hongkiat-form .txtinput: focus color: # 333; robežu krāsa: rgba (41, 92, 161, 0,4); kastes ēna: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) ieliktnis, 0 0 8px rgba (41, 92, 161, 0,6); kontūra: 0 nav;

Lai atlasītu katru teksta elementu, esmu izmantojis šo klasi .txtinput. Katrs pārejas rekvizīts darbojas uz robežas, kastes ēnas un krāsas. Es izmantoju kastes izmēri: robežkaste; uz formas konteinera tā, lai polsterējums netiktu izjauktu mūsu atsaucīgo dizainu.

Man vajadzēja kopēt šos pašus stilus un nedaudz rediģēt tos tekstam. Es mainīju dažus polsterējumus un margas un pievienoju unikālu fona ikonu.

 # hongkiat-form textarea displejs: bloks; font-family: "Helvetica Neue", Arial, sans-serifs; robežu stils: ciets; robežu platums: 1px; rāmja krāsa: #dedede; margas apakšējā daļa: 15px; fonta lielums: 1.5em; polsterējums: 11px 25px; polsterējums pa kreisi: 55px; platums: 90%; augstums: 180px; krāsa: # 777; kastes ēna: 0 1px 3px rgba (0, 0, 0, 0,1) ieliktnis; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) ieliktnis; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) ieliktnis; pāreja: robeža 0.15s lineāra 0s, kastes ēna 0.15s lineāra 0s, krāsa 0.15s lineāra 0s; -webkit pāreja: robeža 0.15s lineāra 0s, kastes ēna 0.15s lineāra 0s, krāsa 0.15s lineāra 0s; -moz-pāreja: robeža 0.15s lineāra 0s, kastes ēna 0.15s lineāra 0s, krāsa 0.15s lineāra 0s; -o-pāreja: robeža 0.15s lineāra 0s, kastes ēna 0.15s lineāra 0s, krāsa 0.15s lineāra 0s;  # hongkiat-form textarea: fokuss krāsa: # 333; robežu krāsa: rgba (41, 92, 161, 0,4); kastes ēna: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) ieliktnis, 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) ieliktnis, 0 8px rgba (40, 90, 160, 0,6); kontūra: 0 nav;  # hongkiat-form textarea.txtblock fons: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px bez atkārtota;

Sānjoslas ieejas

Radio pogas un izvēlnes elementi ir veidoti daudz vienkāršāk. Uz šiem elementiem jūs varat pielietot ārējās spīduma efektus un līdzīgas nokrišņu ēnas, bet tas ne vienmēr izskatās labi. Alternatīvi dizaineri izveidos pielāgotas lietotāja saskarnes un pievienos tās kā fona attēlus. Taču, lai saglabātu opciju pareizu rādīšanu, var rasties jQuery risinājums.

 span.radiobadge display: block; margas apakšā: 8px;  span.radiobadge label font-size: 1.2em; polsterējums-apakšā: 4px;  select.selmenu font-size: 17px; krāsa: # 676767; polsterējums: 9px! robeža: 1px cietais #aaa; platums: 200px;

Es neesmu darījis daudz, lai šos prom no galvenajiem ievades elementiem. Ir svarīgi, lai lietotāji varētu justies ērti sadarbojoties ar veidlapu. Ja teksts ir ļoti mazs, tas var būt cīņa tikai, lai aizpildītu katru daļu. Saglabājiet savu fontu lielā, bet ne tik lielā, ka tas pārspēj lapu.

Pielāgotas pogas

Atiestatīšanas un iesniegšanas pogas ir veidotas savā klasē. Esmu izveidojis gaismas gradientu komplektu, lai labi atbilstu zilajiem izcelumiem mūsu veidlapu laukos.

Zemāk ir mans CSS kods iesniegšanas pogai standarta un lidojuma stāvoklī.

 #buttons #submitbtn display: block; peldēt: pa kreisi; augstums: 3em; polsterējums: 0 1em; robeža: 1px ciets; kontūra: 0; font-weight: bold; fonta lielums: 1.3em; krāsa: #fff; teksta ēna: 0px 1px 0px # 222; balta telpa; vārdiskais apvalks: normāls; vertikāli izlīdzināt: vidū; kursors: rādītājs; -moz-border-rādiuss: 2px; -webkit-robežu rādiuss: 2px; robežu rādiuss: 2px; rāmja krāsa: # 5e890a # 5e890a # 000; -moz-box-shadow: ielikt 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: ielikt 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: ielikt 0 1px 0 rgba (256,256,256, .35); box-shadow: ielikt 0 1px 0 rgba (256,256,256, .35); fona krāsa: rgb (226,238,175); fona attēls: -moz-lineārs gradients (augšā, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (3%, rgb (226,238,175)), krāsu apstāšanās (3%, rgb (188,216,77)), krāsu apstāšanās (100 %, rgb (144,176,38))); fona attēls: -webkit-lineārs gradients (augšā, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fona attēls: -o-lineārais gradients (augšā, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fona attēls: -ms-lineārais gradients (augšā, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fona attēls: lineārais gradients (augšā, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0);  #buttons #submitbtn: hover, #buttons #submitbtn: aktīvs border-color: # 7c9826 # 7c9826 # 000; krāsa: #fff; -moz-box-shadow: ielikt 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: ieliktnis 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: ielikt 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); box-shadow: ieliktnis 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); fons: rgb (228,237,189); fons: -moz-lineārais gradients (augšā, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fons: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (2%, rgb (228,237,189)), krāsu apstāšanās (3%, rgb (207,219,120)), krāsu apstāšanās (100%, rgb ( 149,175,54))); fons: -webkit-lineārs gradients (augšā, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fons: -o-lineārs gradients (augšā, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fons: -ms-lineārais gradients (augšā, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fons: lineārais gradients (augšā, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0);

Tas ir gandrīz neiespējami saglabāt šāda veida selektoru! Ir vienkārši pārāk daudz rekvizītu, kas nepieciešamas, lai uzskaitītu un atbalstītu daudzus vecākus vecākos pārlūkus. Internet Explorer var pat padarīt šos gradientus ar atbilstošu filtru. Neskatoties uz fona gradientiem, es esmu iekļāvis arī jaunu robežu krāsu, noapaļotus stūri un kastes ēnu.

Atiestatīšanas poga izskatās līdzīga, bet ar krāsu shēmu esmu izgājis pavisam citu maršrutu. Gaiši pelēkā krāsā mēdz iekrist fonā, salīdzinot ar spilgti zaļajām krāsām. Iespējams, mūsu atiestatīšanas poga netiks izmantota ļoti daudz, tāpēc tai nav nepieciešama visa uzmanība.

 #buttons #resetbtn display: block; peldēt: pa kreisi; krāsa: # 515151; teksta ēna: -1px 1px 0px #fff; labās malas: 20px; augstums: 3em; polsterējums: 0 1em; kontūra: 0; font-weight: bold; fonta lielums: 1.3em; balta telpa; vārdiskais apvalks: normāls; vertikāli izlīdzināt: vidū; kursors: rādītājs; -moz-border-rādiuss: 2px; -webkit-robežu rādiuss: 2px; robežu rādiuss: 2px; fona krāsa: #fff; fona attēls: -moz-lineārs gradients (augšējais, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (2%, rgb (255,255,255)), krāsu apstāšanās (2%, rgb (240,240,240)), krāsu apstāšanās (100%, rgb (222,222,222))); fona attēls: -webkit-lineārs gradients (augšā, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fona attēls: -o-lineārais gradients (augšā, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fona attēls: -ms-lineārais gradients (augšā, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fona attēls: lineārais gradients (augšā, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); robeža: 1px cietais # 969696; kastes ēna: 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); teksta ēna: 0 1px 1px rgba (255, 255, 255, 0,75);  #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); krāsa: # 818181; fona krāsa: #fff; fona attēls: -moz-lineārs gradients (augšā, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); fona attēls: -webkit-gradients (lineārs, kreisais augšējais, kreisais apakšējais, krāsu apstāšanās (2%, rgb (255,255,255)), krāsu apstāšanās (2%, rgb (244,244,244)), krāsu apstāšanās (100%, rgb (229,229,229))); fona attēls: -webkit-lineārs gradients (augšā, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%), fona attēls: -o-lineārs gradients (augšā, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); fona attēls: -ms-lineārs gradients (augšā, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); fona attēls: lineārais gradients (augšā, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); rāmja krāsa: #aeaeae; box-shadow: ieliktnis 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5);

Jūs pat varat nomest atiestatīšanas veidu un izmantot šo balto / pelēko krāsu shēmu kā galveno iesniegšanas pogu. Esmu izmantojis daudzus no tiem pašiem gradienta stiliem un nokritusi ēnu efektus kopā ar teksta ēnu iekšējai etiķetei. Tas noteikti sniedz atšķirīgu sajūtu lietotāja pieredzei.

Reaģējošas izkārtojuma izmaiņas

Pārceļoties uz citu CSS failu, mēs varam apskatīt vienkāršos atbildīgos mediju vaicājumus, kurus esmu iestatījis. Jebkurš pārlūka logs virs 800px piedzīvos pilnu sānjoslas interfeisu. Tā kā jūs nokļūsiet zem šīs sliekšņa, kreisā sleja izvēršas līdz 100% platumam, un zemāk ir redzami sānjoslas elementi.

 @media ekrāns un (max-width: 800px) body padding: 10px 15px;  #container platums: 100%;  # hongkiat-form #aligned platums: 100%; peldēt: nav; displejs: bloks;  # hongkiat-form #aside platums: 100%; displejs: bloks; peldēt: nav;  # hongkiat-form .txtinput, # hongkiat-form textarea platums: 85%;  #prioritycase float: pa kreisi; displejs: bloks;  #recipientcase float: pa kreisi; displejs: bloks; labās malas: 55px;

Tā kā mēs tuvojamies lielumam, es cenšos pielāgot katru ievades formu. Platuma īpašums var beigties ilgāk nekā pati tīmekļa vietne, un tad mums ir ievades formas, kas uzlīmētas virs malas. Tas notiek ap 550px, kas ir, ja es pārtraukumu nākamo vaicājumu, kā arī gan iPhone ekrāna displeja izšķirtspējas portreta un ainavu.

 / * mazāka ekrāna nolaišanās ******* / @media tikai ekrāns un (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea platums: 80%;  / * iPhone ainava ******** / @media tikai ekrāns un (max-width: 480px) body polsterējums: 10px 0px;  select.selmenu platums: 190px;  / * iPhone portrets ******* / @media tikai ekrāns un (max-width: 320px) body polsterējums: 10px 0px;  # hongkiat-form .txtinput, # hongkiat-form textarea platums: 70%;  # hongkiat-form #aligned overflow: paslēpta;  select.selmenu platums: 160px;  #recipientcase margin-right: 30px;

Horizontālais ainavas režīms joprojām viss ir ļoti labi. Nolaižamajā izvēlnē esmu izvēlējies tikai nedaudz plānāku, lai padarītu vietu radio pogām. Portreta skatījumā es esmu mainījis visus elementus līdz daudz mazākiem platumiem. Tagad mūsu kods netiks izjaukts arī mainītajos pārlūkprogrammas logos. Bet ir patīkami atbalstīt arī iOS / Android viedtālruņus.

Demo
Lejupielādēt avota kodu

Secinājums

Es ceru, ka šī apmācība ir informatīva, izskaidrojot, cik daudz var izdarīt jūsu tīmekļa veidlapās. Jaunās CSS3 īpašības ir pietiekami spēcīgas, lai izveidotu pilnībā funkcionējošas animācijas ar tikai dažām koda rindām. Tas ir patiešām aizraujošs laiks strādāt tīmekļa izstrādē un sekot šīm tendencēm.

Ja jums ir idejas vai ieteikumi par apmācības kodu, lūdzu, dalieties tajos ar mums, izmantojot tālāk redzamo komentāru lodziņu.