Stvaranje stilskog prilagodljivog obrasca s CSS3 i HTML5

Kodiranje s CSS3 dramatično je promijenilo krajolik unutar frontend web razvoja. Postoji više mogućnosti za izgradnju jedinstvenih sučelja s nagibima, sjenama padova i zaobljenim kutovima. Svi ovi efekti polako postaju usvojeni u svakom većem web pregledniku.

U ovom tutorialu želim pokazati mnoge od ovih cool CSS3 efekata. Izradio sam jednostavan web obrazac koristeći neke od novijih HTML5 vrsta unosa. Izgled također odgovara; prilagodit će se kako se veličina prozora smanjuje. Ta je situacija savršena za izradu web-obrazaca za podršku korisnicima pametnih telefona.

Pogledajte izvorni kod i pogledajte možete li pratiti u strukturi datoteke. Također, slobodno prilagodite ove elemente i kopirajte ih u vlastite web-lokacije.

Demo
Preuzmite izvorni kod

Izgradnja strukture obrazaca

Za početak sam stvorio glavnu datoteku index.html zajedno s dva zasebna stila. style.css sadrži sve zadane odabire dok responsive.css obrađuje različite veličine prozora. Moj doctype je HTML5, a cijeli sam obrazac zamotao u spremnik

Ovaj primjer prikazuje samo učinke koje možete manifestirati kodiranjem u CSS3. Stoga nemamo skriptu za slanje postova ili odredište za preusmjeravanje korisnika. Moj kod u nastavku sadrži uvodne oznake za prvih nekoliko elemenata obrasca.

Prvo područje bloka je omotano u oznaku odjeljka tako da možemo plutati raspored paralelno. U lijevom stupcu nalaze se svi ovi unosi: tekst, e-pošta, URL i telefonski broj. Dok pregledavate na telefonu, zaslon tipkovnice za mobilne uređaje trebao bi se prilagoditi prema vrsti unosa. Postoji mnogo dobrih razloga za podršku ovih značajki za mobitel jer svi ovih dana rade na putu.

Element textarea također može imati tekst rezerviranog mjesta definiran na pageload. To je slično oznaci koja nestaje kada korisnik unese neki tekst u polje. Atribut koji se ne prenosi jest autocomplete jer tekstualni prostori obično ne popunjavaju povezani sadržaj.

Kontrole bočne trake

Htio sam izgraditi ovaj obrazac kako bi na odgovarajući način reagirao na promjenu veličine prikaza prozora. Kada je prozor dovoljno pun, oba ulazna stupca lebde jedan do drugog. Ali ako je širina malo izrezana, desna bočna traka pada ispod glavnog sadržaja.

Evo mog HTML-a za područje bočne trake:

   primatelj:
  
  Prioritet:
   nizak    Srednji    visok

Ovaj kod zapravo nije ništa previše zbunjujuće. Jednostavno odaberite izbornik i neke gumbe. Osim toga, nakon ovih objekata postavila sam gumb za resetiranje i slanje na kraj odjeljka.

Sve ovo izgleda dobro i dobro, pa sad krenimo u neka CSS svojstva. Postoji toliko mnogo prilagodbi koje možete primijeniti kada radite na elementima obrasca. Pokušajte se ne preplaviti previše razmišljanja i zabave!

Animirane kutije sjena

Primijetit ćete kako kartete kroz svaki od glavnih ulaznih elemenata koje sam animirao šarenu vanjsku sjenu. Google Chrome ima svojstvo strukture koje čini nešto slično, ali ne baš ekstravagantno. Ovaj mali dio sučelja privlači posjetitelje koji prvi put dolaze u posjet.

 / ** elementi forme ** / # hongkiat-form box-sizing: border-box;  # hongkiat-obrazac .txtinput display: block; obitelj fontova: "Helvetica Neue", Arial, sans-serif; granični stil: čvrst; granica-širina: 1px; border-color: #dedede; margin-bottom: 20px; veličina fonta: 1.55em; obloga: 11px 25px; padding-left: 55px; širina: 90%; boja: # 777; kutija-sjena: 0 1px 3px rgba (0, 0, 0, 0.1) umetnuta; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) umetnut; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) umetnut; prijelaz: granična 0.15s linearna 0s, kutija-sjena 0.15s linearna 0s, boja 0.15s linearna 0s; -webkit-prijelaz: granična 0.15s linearna 0s, kutija-sjena 0.15s linearna 0s, boja 0.15s linearna 0s; -moz-prijelaz: granični 0.15s linearni 0s, kutija-sjena 0.15s linearnih 0s, boja 0.15s linearnih 0s; -o-prijelaz: granična 0.15s linearna 0s, kutija-sjena 0.15s linearna 0s, boja 0.15s linearna 0s;  # hongkiat-obrazac .txtinput: fokus boja: # 333; border-color: rgba (41, 92, 161, 0.4); kutija-sjena: 0 1px 3px rgba (0, 0, 0, 0.1) umetnuta, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) umetnut, 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) umetnut, 0 0 8px rgba (41, 92, 161, 0.6); pregled: 0 nema;

Kako bi ciljali svaki element teksta koristio sam klasu .txtinput. Svaka od prijelaznih svojstava radi na granici, kutiji-sjenci i boji. koristim dimenzioniranje kutije: granični okvir; na spremniku obrasca tako da padding ne upropasti naš odgovarajući dizajn.

Morao sam kopirati preko tih istih stilova i malo ih urediti za tekstualnu površinu. Promijenio sam neke obloge i margine i dodao jedinstvenu pozadinsku ikonu.

 # hongkiat-oblik textarea display: block; obitelj fontova: "Helvetica Neue", Arial, sans-serif; granični stil: čvrst; granica-širina: 1px; border-color: #dedede; margin-bottom: 15px; veličina fonta: 1.5em; obloga: 11px 25px; padding-left: 55px; širina: 90%; visina: 180px; boja: # 777; kutija-sjena: 0 1px 3px rgba (0, 0, 0, 0.1) umetnuta; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) umetnut; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) umetnut; prijelaz: granična 0.15s linearna 0s, kutija-sjena 0.15s linearna 0s, boja 0.15s linearna 0s; -webkit-prijelaz: granična 0.15s linearna 0s, kutija-sjena 0.15s linearna 0s, boja 0.15s linearna 0s; -moz-prijelaz: granični 0.15s linearni 0s, kutija-sjena 0.15s linearnih 0s, boja 0.15s linearnih 0s; -o-prijelaz: granična 0.15s linearna 0s, kutija-sjena 0.15s linearna 0s, boja 0.15s linearna 0s;  # hongkiat-form textarea: fokus boja: # 333; border-color: rgba (41, 92, 161, 0.4); kutija-sjena: 0 1px 3px rgba (0, 0, 0, 0.1) umetnuta, 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) umetnut, 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.1) umetnut, 0 0 8px rgba (40, 90, 160, 0.6); pregled: 0 nema;  # hongkiat-oblik textarea.txtblock pozadina: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px bez ponavljanja;

Ulazi bočne trake

Radio gumbi i odabrane stavke izbornika su jednostavniji. Na te elemente možete primijeniti efekte vanjskog sjaja i slične sjene pada, ali to ne izgleda uvijek dobro. Alternativno, dizajneri će izraditi prilagođena korisnička sučelja i priložiti ih kao pozadinske slike. No, to može zahtijevati zaobilazno rješenje jQuery kako bi se opcije ispravno prikazivale.

 span.radiobadge display: block; margin-bottom: 8px;  oznaka span.radiobadge font-size: 1.2em; padding-bottom: 4px;  select.selmenu font-size: 17px; boja: # 676767; padding: 9px! važno; granica: 1px solid #aaa; širina: 200px;

Nisam učinio mnogo da ih odgurnem od glavnih ulaznih elemenata. Puno dodatnih dodataka je važno kako bi se korisnici osjećali ugodno u interakciji s obrascem. Kada je tekst super malen, to može biti borba samo za ispunjavanje svakog dijela. Neka vam font bude velik, ali ne toliko velik da preplavljuje stranicu.

Prilagođene tipke

Gumbi reset i submit su dizajnirani u vlastitom razredu. Napravio sam skup svjetlosnih gradijenta koji se dobro podudaraju s plavom bojom u našim poljima obrasca.

U nastavku je moj CSS kod za gumb "pošalji" na standardnom i lebdećem stanju.

 #button #submitbtn display: block; plutajući: lijevo; visina: 3em; padding: 0 1em; rub: 1px čvrsto; obris: 0; font-weight: bold; veličina fonta: 1.3em; boja: #fff; tekst-sjena: 0px 1px 0px # 222; bijeli prostor: nowrap; prelamanje riječi: normalno; okomito poravnavanje: sredina; pokazivač: pokazivač; -moz-border-radius: 2px; -webkit-border-radius: 2px; granični radijus: 2px; border-color: # 5e890a # 5e890a # 000; -moz-box-shadow: umetak 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: umetak 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: umetak 0 1px 0 rgba (256,256,256, .35); kutija-sjena: umetak 0 1px 0 rgba (256,256,256, .35); pozadinska boja: rgb (226,238,175); background-image: -moz-linearno-gradijent (vrh, rgb (226, 238, 183) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, boja-stop (3%, rgb (226,238,175)), boja-stop (3%, rgb (188,216,77)), boja-stop (100 % rGB (144,176,38))); background-image: -webkit-linearno-gradijent (vrh, rgb (226, 238, 183) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -o-linearnog gradijenta (top, rgb (226, 238, 183) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: -ms-linearno-gradijent (vrh, rgb (226, 238, 183) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); background-image: linearni gradijent (vrh, 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);  #button #submitbtn: hover, #butons #submitbtn: active border-color: # 7c9826 # 7c9826 # 000; boja: #fff; -moz-box-shadow: umetak 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: umetak 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: umetak 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); kutija-sjena: umetak 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5); pozadina: rgb (228,237,189); pozadina: -moz-linearni gradijent (vrh, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadina: -webkit-gradijent (linearno, lijevo gore, lijevo dno, boja-stop (2%, rgb (228,237,189)), zaustavljanje boje (3%, rgb (207,219,120)), boja-stop (100%, rgb ( 149,175,54))); pozadina: -webkit-linearnog gradijenta (vrh, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadina: -o-linearni gradijent (vrh, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadina: -ms-linearnog gradijenta (vrh, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); pozadina: linearni gradijent (vrh, 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);

Gotovo je nemoguće održati ovu vrstu selektora čistom! Postoji jednostavno previše svojstava koja su vam potrebna za popis i podršku za mnoge starije naslijeđene preglednike. Internet Explorer može čak i prikazati ove gradijente odgovarajućim filtrom. Primijetite, osim pozadinskih prijelaza, i novu boju obruba, zaobljene kutove i kutiju sjenki na lebdenju.

Gumb za resetiranje izgleda slično, ali sam krenuo s potpuno drugom rutom s shemom boja. Svijetlo siva ima tendenciju pada u pozadinu u odnosu na svijetlo zelene boje. Naš gumb za ponovno postavljanje vjerojatno se neće mnogo koristiti, tako da ne treba svu pažnju.

 #buttoni #resetbtn display: block; plutajući: lijevo; boja: # 515151; tekst-sjena: -1px 1px 0px #fff; margin-right: 20px; visina: 3em; padding: 0 1em; obris: 0; font-weight: bold; veličina fonta: 1.3em; bijeli prostor: nowrap; prelamanje riječi: normalno; okomito poravnavanje: sredina; pokazivač: pokazivač; -moz-border-radius: 2px; -webkit-border-radius: 2px; granični radijus: 2px; boja pozadine: #fff; background-image: -moz-linearni gradijent (vrh, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, boja-stop (2%, rgb (255,255,255)), boja-stop (2%, rgb (240,240,240)), boja-stop (100%, rGB (222.222.222))); background-image: -webkit-linearni gradijent (vrh, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -o-linearni gradijent (vrh, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: -ms-linearni gradijent (vrh, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); background-image: linearno-gradijent (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); granica: 1px solid # 969696; kutija-sjena: 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); tekst-sjena: 0 1px 1px rgba (255, 255, 255, 0,75);  #buttoni #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); boja: # 818181; boja pozadine: #fff; background-image: -moz-linearni gradijent (vrh, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -webkit-gradijent (linearni, lijevi vrh, lijevo dno, boja-stop (2%, rgb (255,255,255)), boja-stop (2%, rgb (244,244,244)), boja-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%), background-image: -o-linearni gradijent (top, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -ms-linearni gradijent (top, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: linearno-gradijent (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); border-color: #aeaeae; kutija-sjena: umetak 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5);

Možete čak i ispustiti tip za resetiranje i koristiti ovu shemu bijele / sive boje kao glavni gumb za slanje. Koristio sam mnoge od istih stilova gradijenta i učinke sjene u sjeni, kao i tekstualnu sjenku za unutarnju oznaku. To definitivno pruža drugačiji osjećaj za korisničko iskustvo.

Odgovarajuće izmjene izgleda

Premještanjem u moj drugi CSS fajl možemo pogledati jednostavne odgovorne medijske upite koje sam postavio. Svaki prozor preglednika iznad 800px doživjet će cijelo sučelje na bočnoj traci. Kako se spuštate ispod tog praga, lijevi stupac se proširuje na 100% širine i vidite elemente bočne trake koje padaju ispod.

 @ media zaslon i (max-width: 800px) body padding: 10px 15px;  #container širina: 100%;  # hongkiat-oblik #aligned širina: 100%; plutaju: nema; prikaz: blok;  # hongkiat-oblik #aside širina: 100%; prikaz: blok; plutaju: nema;  # hongkiat-oblik .txtinput, # hongkiat-oblik textarea širina: 85%;  #prioritycase float: lijevo; prikaz: blok;  #recipientcase float: lijevo; prikaz: blok; margin-right: 55px;

Kako se približavamo veličini, pokušavam prilagoditi svaki od ulaznih oblika. Svojstvo širine može završiti dulje od same web-stranice, a zatim imamo obrasce za unos koji strše preko ruba. To se događa oko 550px, što je gdje sam razbiti sljedeći upit, zajedno s obje iPhone zaslon zaslon razlučivosti za portret i krajolik.

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

Horizontalni pejzažni način još uvijek dobro drži sve zajedno. Padajući izbornik sam napravio samo malo tanji da bi napravili mjesta za radio gumbe. U portretnom prikazu promjenio sam sve elemente na mnogo manje širine. Sada naš kôd neće se pokvariti ni u prozorima preglednika koji se mijenjaju. No, lijepo je imati i podršku za iOS / Android pametne telefone.

Demo
Preuzmite izvorni kod

Zaključak

Nadam se da je ovaj vodič bio informativan u objašnjavanju koliko se može učiniti na vašim web-obrascima. Nova svojstva CSS3 dovoljno su snažna za izgradnju potpuno funkcionalnih animacija sa samo nekoliko redaka koda. To je zaista uzbudljivo vrijeme za rad u razvoju weba i praćenje tih trendova.

Ako imate ideje ili prijedloge u vezi s tutorskim kodom, slobodno ih podijelite s nama putem okvira za komentare u nastavku.