Pirmasis bloko plotas yra suvyniotas į sekcijos žymą, kad galėtume pakelti išdėstymą šalia. Kairiajame stulpelyje yra visi šie duomenys: tekstas, el. Paštas, URL ir telefono numeris. Kai perjungiate telefoną, mobiliojo klaviatūros ekranas turi būti pritaikytas pagal įvesties tipą. Yra nemažai gerų priežasčių remti šias funkcijas mobiliesiems, nes visi šiandien dirba.
Teksto elementas taip pat gali turėti vietovės žymeklio tekstą, nurodytą pageload. Tai panaši į etiketę, kuri išnyksta, kai vartotojas įveda tam tikrą teksto lauką. Atributas, kuris nėra perkeltas, yra automatiškai užbaigti nes textareas paprastai užpildo susijusį turinį.
Šoninės juostos valdikliai Norėjau sukurti šią formą taip, kad ji tinkamai reaguotų į lango rodymo dydį. Kai langas yra pakankamai pilnas, abu įvesties stulpeliai yra plūduriuojami vienas šalia kito. Tačiau, jei plotis šiek tiek sumažinamas, dešinysis šoninė juosta nukrenta žemiau pagrindinio turinio.
Štai mano šoninės juostos srities HTML:
Gavėjas: Svetainės darbuotojai Redaktorius Technikos departamentas Ryšiai su visuomene Bendra parama Šis kodas iš tikrųjų nėra pernelyg painus. Tiesiog paprasta parinktis pasirinkite meniu ir kai kuriuos radijo mygtukus. Be to, po šių objektų įdėjau reset ir pateikimo mygtuką sekcijos pabaigoje.
Visa tai atrodo gerai ir gerai, todėl pereikime prie kai kurių CSS savybių. Dirbdami su formos elementais, galite taikyti tiek daug pritaikymų. Stenkitės neužkliūti per daug mąstymo ir smagiai!
Animuoti langelių šešėliai Jūs pastebėsite, kaip jūs skirtuką per kiekvieną pagrindinių įvesties elementų, kad aš animacinis spalvingas išorinis šešėlis. „Google Chrome“ turi kontūro savybę, kuri daro kažką panašaus, bet ne tiek ekstravagantiško. Ši nedidelė sąsajos dalis yra viliojanti pirmą kartą lankytojams.
/ ** formos elementai ** / # hongkiat-forma box-sizing: border-box; # hongkiat-form .txtinput display: block; šrifto šeima: "Helvetica Neue", Arial, sans-serif; sienos stilius: kietas; sienos plotis: 1px; sienos spalva: #dedede; paraštės apačia: 20px; šrifto dydis: 1.55EM; paminkštinimas: 11px 25px; palikimas kairėje: 55px; plotis: 90%; spalva: # 777; dėžutės šešėlis: 0 1px 3px rgba (0, 0, 0, 0,1) įdėklas; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) įdėklas; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) intarpas; perėjimas: 0,15 s linijiniai 0s, dėžutės šešėlis 0.15s linijiniai 0s, spalvos 0,15 s linijiniai 0s; -webkit-perėjimas: 0,15 s linijiniai 0s, dėžutės šešėliai 0.15s linijiniai 0s, spalvos 0,15 s linijiniai 0s; -moz-perėjimas: 0,15 s linijiniai 0s, rėmelio šešėliai 0.15s linijiniai 0s, spalvos 0,15 s linijiniai 0s; -o-perėjimas: 0,15 s linijinės linijos 0s, box-shadow 0.15s linijinės 0s, spalvos 0,15 s linijinės 0s; # hongkiat-form .txtinput: focus color: # 333; sienos spalva: rgba (41, 92, 161, 0,4); dėžutės šešėlis: 0 1px 3px rgba (0, 0, 0, 0,1) įdėklas, 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) įdėjimas, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) įdėjimas, 0 0 8px rgba (41, 92, 161, 0,6); kontūras: 0 nėra; Norint nukreipti kiekvieną teksto elementą, naudoju klasę .txtinput. Kiekviena perėjimo savybė veikia pasienyje, dėžutės šešėlyje ir spalva. aš naudoju dėžutės dydžio: rėmelis; ant formos konteinerio, kad pamušalas netrukdytų mums reaguoti į dizainą.
Turėjau nukopijuoti tuos pačius stilius ir šiek tiek redaguoti juos tekstui. Pakeitiau kai kurias paminklas ir paraštes ir pridėjau unikalią fono piktogramą.
# hongkiat-form textarea ekranas: blokas; šrifto šeima: "Helvetica Neue", Arial, sans-serif; sienos stilius: kietas; sienos plotis: 1px; sienos spalva: #dedede; paraštės apačia: 15px; šrifto dydis: 1.5em; paminkštinimas: 11px 25px; palikimas kairėje: 55px; plotis: 90%; aukštis: 180px; spalva: # 777; dėžutės šešėlis: 0 1px 3px rgba (0, 0, 0, 0,1) įdėklas; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) įdėklas; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) intarpas; perėjimas: 0,15 s linijiniai 0s, dėžutės šešėlis 0.15s linijiniai 0s, spalvos 0,15 s linijiniai 0s; -webkit-perėjimas: 0,15 s linijiniai 0s, dėžutės šešėliai 0.15s linijiniai 0s, spalvos 0,15 s linijiniai 0s; -moz-perėjimas: 0,15 s linijiniai 0s, rėmelio šešėliai 0.15s linijiniai 0s, spalvos 0,15 s linijiniai 0s; -o-perėjimas: 0,15 s linijinės linijos 0s, box-shadow 0.15s linijinės 0s, spalvos 0,15 s linijinės 0s; # hongkiat-form textarea: dėmesys color: # 333; sienos spalva: rgba (41, 92, 161, 0,4); dėžutės šešėlis: 0 1px 3px rgba (0, 0, 0, 0,1) įdėklas, 0 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) įdėklas, 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) intarpas, 0 0 8px rgba (40, 90, 160, 0,6); kontūras: 0 nėra; # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px ne kartoti; Šoninės juostos įėjimai Radijo mygtukai ir pasirinkti meniu elementai yra daug paprastesni. Šiems elementams galite taikyti išorinius švytėjimo efektus ir panašius lašinius, tačiau jis ne visada atrodo gerai. Arba dizaineriai sukurs pritaikytas vartotojo sąsajas ir prideda jas kaip fono paveikslėlius. Tačiau tam, kad parinktys būtų rodomos tinkamai, tai gali reikėti jQuery problemos sprendimo.
span.radiobadge display: block; paraštės apačioje: 8px; span.radiobadge label font-size: 1.2em; apačia: 4px; select.selmenu šrifto dydis: 17px; spalva: # 676767; paminkštinimas: 9px! siena: 1px kietas #aaa; plotis: 200px; Aš dar nepadariau daug, kad juos išstumčiau nuo pagrindinių įvesties elementų. Labai svarbu, kad jūsų naudotojai jaustųsi patogiai bendrauja su forma. Kai tekstas yra labai mažas, tai gali būti kova tik užpildyti kiekvieną dalį. Laikykite savo šriftą didelį, bet ne taip didelį, kad jis užvaldytų puslapį.
Tinkinti mygtukai Atstatymo ir pateikimo mygtukai yra sukurti savo klasėje. Sukūriau šviesos gradientų rinkinį, kad galėtumėte gerai suderinti su mėlynos spalvos akcentais mūsų formos laukuose.
Žemiau pateikiamas mano CSS kodas pateikimo mygtukui, esantį standartinėje ir judančioje būsenoje.
#buttons #submitbtn display: block; plūdė: kairė; aukštis: 3em; įdėklas: 0 1em; siena: 1px kietas; kontūras: 0; šrifto svoris: paryškintas; šrifto dydis: 1.3em; spalva: #fff; teksto šešėlis: 0px 1px 0px # 222; baltoji erdvė: krapštukas; žodžių įvyniojimas: normalus; vertikaliai lygiuoti: viduryje; žymeklis: žymeklis; -moz-border-spindulys: 2px; -webkit-border-radius: 2px; pasienio spindulys: 2px; sienų spalva: # 5e890a # 5e890a # 000; -moz-box-shadow: įterpti 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: įterpti 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: įterpti 0 1px 0 rgba (256,256,256, .35); dėžutės šešėlis: įdėjimas 0 1px 0 rgba (256,256,256, .35); fono spalva: rgb (226,238,175); fono vaizdas: -moz-linijinis gradientas (viršutinis, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fono paveikslėlis: -webkit-gradientas (linijinis, kairysis viršuje, kairysis apačioje, spalvų sustojimas (3%, rgb (226,238,175)), spalvų stabdymas (3%, rgb (188,216,77)), spalvų sustojimas (100 %, rgb (144,176,38))); fono vaizdas: -webkit-linijinis gradientas (viršutinis, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fono vaizdas: -o-tiesinis gradientas (viršutinis, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fono vaizdas: -ms-linijinis gradientas (viršutinis, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); fono vaizdas: tiesinis gradientas (viršutinis, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); # mygtukai #submitbtn: hover, #buttons #submitbtn: active border-color: # 7c9826 # 7c9826 # 000; spalva: #fff; -moz-box-shadow: įdėklas 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: įdėklas 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: įterpimas 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); dėžutės šešėlis: įdėklas 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); fonas: rgb (228,237,189); fonas: -moz-linijinis gradientas (viršutinis, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fonas: -webkit-gradientas (linijinis, kairysis viršuje, kairysis apačioje, spalvų sustojimas (2%, rgb (228,237,189)), spalvų stabdymas (3%, rgb (207,219,120)), spalvų stabdymas (100%, rgb 149,175,54))); fonas: -webkit-tiesinis gradientas (viršuje, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fonas: -o-linijinis gradientas (viršutinis, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fonas: -ms-tiesinis gradientas (viršuje, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); fonas: tiesinis gradientas (viršuje, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Tai beveik neįmanoma išlaikyti tokio tipo selektorių! Yra daug per daug savybių, kurių reikia norint išvardyti ir palaikyti daugelį senesnių naršyklių. „Internet Explorer“ netgi gali suteikti šiuos gradientus tinkamu filtru. Atkreipkite dėmesį į fono gradientus, į kuriuos taip pat įtraukiau naują sienų spalvą, apvalius kampus ir dėžutės šešėlį.
Atstatymo mygtukas atrodo panašus, tačiau spalvų schemoje buvau visiškai kitoks. Šviesiai pilka linkusi į foną, palyginti su ryškiai žaliomis spalvomis. Tikėtina, kad mūsų reset mygtukas nebus naudojamas labai daug, todėl jam nereikia viso dėmesio.
#buttons #resetbtn display: block; plūdė: kairė; spalva: # 515151; teksto šešėlis: -1px 1px 0px #fff; paraštė dešinėje: 20px; aukštis: 3em; įdėklas: 0 1em; kontūras: 0; šrifto svoris: paryškintas; šrifto dydis: 1.3em; baltoji erdvė: krapštukas; žodžių įvyniojimas: normalus; vertikaliai lygiuoti: viduryje; žymeklis: žymeklis; -moz-border-spindulys: 2px; -webkit-border-radius: 2px; pasienio spindulys: 2px; fono spalva: #fff; fono vaizdas: -moz-linijinis gradientas (viršutinis, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fono paveikslėlis: -webkit-gradientas (linijinis, kairysis viršuje, kairysis apačioje, spalvų sustojimas (2%, rgb (255,255,255)), spalvų stabdymas (2%, rgb (240,240,240)), spalvų stabdymas (100%, rgb (222,222,222))); fono vaizdas: -webkit-linijinis gradientas (viršutinis, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fono vaizdas: -o-linijinis gradientas (viršutinis, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fono vaizdas: -ms-linijinis gradientas (viršutinis, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); fono vaizdas: tiesinis gradientas (viršutinis, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); siena: 1px kietas # 969696; dėžutės šešėlis: 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); teksto šešėlis: 0 1px 1px rgba (255, 255, 255, 0,75); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); spalva: # 818181; fono spalva: #fff; fono vaizdas: -moz-linijinis gradientas (viršuje, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); fono paveikslėlis: -webkit-gradientas (linijinis, kairysis viršuje, kairysis apačioje, spalvų sustojimas (2%, rgb (255,255,255)), spalvų sustabdymas (2%, rgb (244,244,244)), spalvų stabdymas (100%, rgb (229,229,229))); fono paveikslėlis: -webkit-linijinis gradientas (viršutinis, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%), fono vaizdas: -o-linijinis gradientas (viršuje, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); fono vaizdas: -ms-linijinis gradientas (viršutinis, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); fono vaizdas: tiesinis gradientas (viršutinis, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); sienos spalva: #aeaeae; dėžutės šešėlis: įdėklas 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); Jūs netgi galite atsisakyti naujo tipo ir naudoti šią baltą / pilką spalvų schemą kaip pagrindinį pateikimo mygtuką. Aš naudoju daugelį to paties gradiento stilių ir šešėlinių efektų, taip pat teksto šešėlį vidinei etiketei. Tai neabejotinai suteikia kitokį jausmą naudotojui.
Reaguojantis išdėstymas Perkelti į kitą CSS failą galime pažvelgti į paprastas atsakingas žiniasklaidos užklausas. Bet kuris naršyklės langas virš 800px patirs visą šoninės juostos sąsają. Kai jūs pasiekiate žemiau šios ribos, kairioji skiltis plečiasi iki 100% pločio ir pamatysite žemiau esančius šoninės juostos elementus.
@media ekranas ir (max-width: 800px) body padding: 10px 15px; #container plotis: 100%; # hongkiat-form #aligned plotis: 100%; plūdės: nėra; ekranas: blokas; # hongkiat-form #aside plotis: 100%; ekranas: blokas; plūdės: nėra; # hongkiat-form .txtinput, # hongkiat-form textarea plotis: 85%; #prioritycase float: kairėje; ekranas: blokas; #recipientcase float: kairėje; ekranas: blokas; paraštė dešinėje: 55px; Kaip artėjame prie dydžio, stengiuosi pritaikyti kiekvieną įvesties formą. Pločio nuosavybė gali baigtis ilgiau nei pati svetainė ir tada mes turime įvesties formų, išlenkiančių virš krašto. Tai vyksta maždaug 550 pikselių, o tai reiškia, kad pertraukiu kitą užklausą, kartu su abiejų „iPhone“ ekrano rezoliucijomis portretui ir kraštovaizdžiui.
/ * mažesnis ekrano nukritimas ******* / @media tik ekranas ir (maks. plotis: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea plotis: 80%; / * „iPhone“ kraštovaizdis ******** / @media tik ekranas ir (maksimalus plotis: 480px) body padding: 10px 0px; select.selmenu plotis: 190px; / * „iPhone“ portretas ******* / @media tik ekranas ir (maksimalus plotis: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea plotis: 70%; # hongkiat-form #aligned overflow: paslėpta; select.selmenu plotis: 160px; #recipientcase margin-right: 30px; Horizontalus kraštovaizdžio režimas vis dar labai gerai susilieja. Aš pasirinkau išskleidžiamajame meniu tik šiek tiek plonesnį, kad paliktume vietos radijo mygtukams. Portretų rodinyje aš pakeitiau visus elementus į daug mažesnius pločius. Dabar mūsų kodas nebus sugadintas netgi pakeitus naršyklės langus. Tačiau malonu palaikyti „iOS“ / „Android“ išmaniuosius telefonus.
Demo Atsisiųsti šaltinio kodą Išvada Tikiuosi, kad ši pamoka buvo informatyvi, paaiškindama, kiek galima padaryti jūsų žiniatinklio formose. Naujosios CSS3 savybės yra pakankamai galingos, kad sukurtų visiškai veikiančias animacijas tik keliomis eilutėmis kodo. Tai tikrai įdomus laikas dirbti interneto kūrimo ir šių tendencijų.
Jei turite idėjų ar pasiūlymų dėl pamokos kodo, nedvejodami pasidalinkite jais su mumis per komentarų laukelį.
