Ensimmäinen lohkoalue on kääritty osamerkkiin, jotta voimme kellua ulkoasua vierekkäin. Vasemmassa sarakkeessa on kaikki nämä tulot: teksti, sähköposti, URL ja puhelinnumero. Kun siirryt puhelimeen, mobiilinäppäimistön näytön tulisi mukautua tulotyypin mukaan. On monia hyviä syitä tukea näitä ominaisuuksia mobiilille, sillä kaikki työskentelevät tällä hetkellä.
Textarea-elementillä voi myös olla paikkamerkki, joka on määritetty sivulatauksessa. Tämä on samanlainen kuin etiketti, joka katoaa, kun käyttäjä syöttää kenttään tekstin. Määrite, jota ei ole siirretty, on Automaattinen täydennys koska textareas ei yleensä täytä siihen liittyvää sisältöä.
Sivupalkin säätimet Halusin rakentaa tämän lomakkeen niin, että se vastaa asianmukaisesti ikkunan näyttöjen kokoa. Kun ikkuna on tarpeeksi täynnä, molemmat tulopylväät kelluvat vierekkäin. Mutta jos leveys leikataan hieman, oikeanpuoleinen sivupalkki putoaa pääsisällön alapuolelle.
Tässä on sivupalkin alueen HTML-koodi:
vastaanottaja: Sivuston henkilökunta Päätoimittaja Tech-osasto Julkiset suhteet Yleinen tuki Tämä koodi ei todellakaan ole liian sekava. Vain yksinkertainen vaihtoehto valitse valikko ja jotkut radiopainikkeet. Lisäksi näiden kohteiden jälkeen asetin nollaus- ja lähetyspainikkeen osan loppuun.
Tämä kaikki näyttää hyvältä, joten siirrymme joihinkin CSS-ominaisuuksiin. Muodostuselementtejä käytettäessä voit tehdä niin paljon mukautuksia. Yritä olla kaventamatta itseäsi liikaa ajattelua ja hauskaa!
Animated Box Shadows Huomaatte välilehdessäsi jokaisen tärkeimmistä syöttöelementeistä, jotka olen animoinut värikkään ulkoisen varjon. Google Chromessa on ääriviivaominaisuus, joka tekee jotain vastaavaa, mutta ei aivan yhtä ylellistä. Tämä pieni osa käyttöliittymästä houkuttelee ensimmäistä kertaa kävijöitä.
/ ** lomakkeen elementit ** / # hongkiat-muoto box-sizing: border-box; # hongkiat-form .txtinput näyttö: lohko; font-perhe: "Helvetica Neue", Arial, sans-serif; raja-tyyli: kiinteä; raja-leveys: 1px; raja-väri: #dedede; marginaalipohja: 20px; fonttikoko: 1.55em; pehmuste: 11px 25px; pehmuste-vasen: 55px; leveys: 90%; väri: # 777; laatikko-varjo: 0 1px 3px rgba (0, 0, 0, 0,1) insetti; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) insetti; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) insetti; siirtymä: raja 0.15s lineaarinen 0s, laatikko-varjo 0.15s lineaarinen 0s, väri 0.15s lineaarinen 0s; -webkit-siirtyminen: raja 0.15s lineaarinen 0s, laatikko-varjo 0.15s lineaarinen 0s, väri 0.15s lineaarinen 0s; -moz-siirtyminen: raja 0.15s lineaarinen 0s, laatikko-varjo 0.15s lineaarinen 0s, väri 0.15s lineaarinen 0s; -o-siirtyminen: raja 0.15s lineaarinen 0s, laatikko-varjo 0.15s lineaarinen 0s, väri 0.15s lineaarinen 0s; # hongkiat-form .txtinput: focus color: # 333; raja-väri: rgba (41, 92, 161, 0,4); laatikon varjo: 0 1px 3px rgba (0, 0, 0, 0,1) insetti, 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-varjo: 0 1px 3px rgba (0, 0, 0, 0,1) insetti, 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) insetti, 0 0 8px rgba (41, 92, 161, 0,6); ääriviivat: 0 ei; Jotta voit kohdistaa jokaisen tekstielementin, olen käyttänyt luokkaa .txtinput. Jokainen siirtymäominaisuus toimii rajalla, laatikkovärillä ja värillä. Käytän laatikon koko: raja-laatikko; muotoilusäiliössä niin, että pehmuste ei sotkea herkkää suunnittelua.
Minun piti kopioida näitä samoja tyylejä ja muokata niitä hieman tekstiä varten. Muutin joitakin pehmusteita ja marginaaleja ja liitin ainutlaatuisen taustakuvakkeen.
# hongkiat-form textarea näyttö: lohko; font-perhe: "Helvetica Neue", Arial, sans-serif; raja-tyyli: kiinteä; raja-leveys: 1px; raja-väri: #dedede; marginaalipohja: 15px; fontin koko: 1.5em; pehmuste: 11px 25px; pehmuste-vasen: 55px; leveys: 90%; korkeus: 180px; väri: # 777; laatikko-varjo: 0 1px 3px rgba (0, 0, 0, 0,1) insetti; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) insetti; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) insetti; siirtymä: raja 0.15s lineaarinen 0s, laatikko-varjo 0.15s lineaarinen 0s, väri 0.15s lineaarinen 0s; -webkit-siirtyminen: raja 0.15s lineaarinen 0s, laatikko-varjo 0.15s lineaarinen 0s, väri 0.15s lineaarinen 0s; -moz-siirtyminen: raja 0.15s lineaarinen 0s, laatikko-varjo 0.15s lineaarinen 0s, väri 0.15s lineaarinen 0s; -o-siirtyminen: raja 0.15s lineaarinen 0s, laatikko-varjo 0.15s lineaarinen 0s, väri 0.15s lineaarinen 0s; # hongkiat-form textarea: tarkennus väri: # 333; raja-väri: rgba (41, 92, 161, 0,4); laatikon varjo: 0 1px 3px rgba (0, 0, 0, 0,1) insetti, 0 8px rgba (40, 90, 160, 0,6); -moz-box-varjo: 0 1px 3px rgba (0, 0, 0, 0,1) insetti, 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1), 0 0 8px rgba (40, 90, 160, 0,6); ääriviivat: 0 ei; # hongkiat-form textarea.txtblock tausta: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px ei-toista; Sivupalkin tulot Radiopainikkeet ja valikkovaihtoehdot ovat tyyliltään paljon yksinkertaisempia. Näihin elementteihin voi käyttää ulkoisia hehkuvaikutuksia ja vastaavia pudotusvarjoja, mutta se ei aina näytä hyvältä. Vaihtoehtoisesti suunnittelijat luovat mukautettuja käyttöliittymiä ja liittävät ne taustakuviksi. Tämä voi kuitenkin edellyttää jQuery-ongelman ratkaisua, jotta vaihtoehdot näkyvät oikein.
span.radiobadge display: block; marginaalin pohja: 8px; span.radiobadge label font-size: 1.2em; pehmustettu pohja: 4px; select.selmenu font-size: 17px; väri: # 676767; pehmuste: 9px! raja: 1px kiinteä #aaa; leveys: 200px; En ole tehnyt paljon, jotta voisin painaa näitä pois pääsyöttöelementeistä. Paljon ylimääräisiä pehmusteita on tärkeää, jotta käyttäjät tuntevat olonsa mukavaksi vuorovaikutuksessa lomakkeen kanssa. Kun teksti on erittäin pieni, se voi olla taistelu vain jokaisen osan täyttämiseksi. Pidä fonttisi iso, mutta ei niin suuri, että se ylittää sivun.
Mukautetut painikkeet Reset- ja Submit-painikkeet on suunniteltu omaan luokkaansa. Olen rakentanut joukon valon gradientteja, jotka sopivat hyvin lomakekenttien sinisiin kohokohtiin.
Alla on CSS-koodi lähetyspainikkeelle vakio- ja hover-tilassa.
#buttons #submitbtn display: block; float: vasen; korkeus: 3em; pehmuste: 0 1em; raja: 1kpl kiinteä; ääriviivat: 0; font-paino: lihavoitu; fontin koko: 1.3em; väri: #fff; teksti-varjo: 0px 1px 0px # 222; valkoinen-avaruus: nyt; sanapäällyste: normaali; pystysuuntainen: keskellä; kohdistin: osoitin; -moz-border-säde: 2px; -webkit-border-radius: 2px; raja-säde: 2px; raja-väri: # 5e890a # 5e890a # 000; -moz-box-shadow: upotetaan 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: upotetaan 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: upotetaan 0 1px 0 rgba (256,256,256, .35); box-shadow: upotetaan 0 1px 0 rgba (256,256,256, .35); taustaväri: rgb (226,238,175); taustakuva: -moz-lineaarinen gradientti (alkuun, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); taustakuva: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (3%, rgb (226,238,175)), värin pysäytys (3%, rgb (188,216,77)), värin pysäytys (100 %, rgb (144,176,38))); taustakuva: -webkit-lineaarinen gradientti (alkuun, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); taustakuva: -o-lineaarinen gradientti (alkuun, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); taustakuva: -ms-lineaarinen gradientti (alkuun, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); taustakuva: lineaarinen gradientti (alkuun, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #submitbtn: aktiivinen border-color: # 7c9826 # 7c9826 # 000; väri: #fff; -moz-box-shadow: upotettu 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: upotettu 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: upotettu 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); laatikko-varjo: sisäosa 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); tausta: rgb (228,237,189); tausta: -moz-lineaarinen gradientti (alkuun, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); tausta: -webkit-gradientti (lineaarinen, vasen yläosa, vasen pohja, värin pysäytys (2%, rgb (228,237,189)), värin pysäytys (3%, rgb (207,219,120)), väri-stop (100%, rgb ( 149,175,54))); tausta: -webkit-lineaarinen gradientti (alkuun, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); tausta: -o-lineaarinen gradientti (alkuun, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); tausta: -ms-lineaarinen gradientti (alkuun, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); tausta: lineaarinen gradientti (alkuun, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); On lähes mahdotonta pitää tällaista valitsinta puhtaana! On yksinkertaisesti liian monia ominaisuuksia, joita tarvitset luetteloon ja tukea monille vanhemmille selaimille. Internet Explorer voi jopa tehdä nämä kaltevuudet asianmukaisella suodattimella. Huomaa lisäksi, että taustamäreillä on myös uusi rajaväri, pyöristetyt kulmat ja ruudun varjo.
Reset-painike näyttää samalta, mutta olen mennyt aivan eri reitillä värimalliin. Vaaleanharmaa pyrkii laskemaan taustaan kirkkaan vihreisiin väreihin verrattuna. Reset-painiketta ei todennäköisesti käytetä kovinkaan paljon, joten se ei tarvitse koko huomiota.
#buttons #resetbtn display: block; float: vasen; väri: # 515151; teksti-varjo: -1px 1px 0px #fff; marginaali-oikea: 20px; korkeus: 3em; pehmuste: 0 1em; ääriviivat: 0; font-paino: lihavoitu; fontin koko: 1.3em; valkoinen-avaruus: nyt; sanapäällyste: normaali; pystysuuntainen: keskellä; kohdistin: osoitin; -moz-border-säde: 2px; -webkit-border-radius: 2px; raja-säde: 2px; taustaväri: #fff; taustakuva: -moz-lineaarinen gradientti (alkuun, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); taustakuva: -webkit-gradientti (lineaarinen, vasen yläosa, vasen alaosa, värin pysäytys (2%, rgb (255,255,255)), värin pysäytys (2%, rgb (240,240,240)), väri-stop (100%, rgb (222222222))); taustakuva: -webkit-lineaarinen gradientti (alkuun, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); taustakuva: -o-lineaarinen gradientti (alkuun, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); taustakuva: -ms-lineaarinen gradientti (alkuun, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); taustakuva: lineaarinen gradientti (alkuun, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); raja: 1kpl kiinteä # 969696; laatikon varjo: 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); teksti-varjo: 0 1px 1px rgba (255, 255, 255, 0,75); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); väri: # 818181; taustaväri: #fff; taustakuva: -moz-lineaarinen gradientti (alkuun, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); taustakuva: -webkit-kaltevuus (lineaarinen, vasen yläosa, vasen alaosa, värin pysäytys (2%, rgb (255,255,255)), värin pysäytys (2%, rgb (244,244,244)), väri-stop (100%, rgb (229229229))); taustakuva: -webkit-lineaarinen gradientti (alkuun, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%), taustakuva: -o-lineaarinen gradientti (alkuun, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); taustakuva: -ms-lineaarinen gradientti (alkuun, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); taustakuva: lineaarinen gradientti (alkuun, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); suodatin: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); raja-väri: #aeaeae; laatikko-varjo: sisäosa 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Voit jopa pudottaa palautustyypin ja käyttää tätä valkoista / harmaata värijärjestelmää päälähetyksenä. Olen käyttänyt monia samoja gradienttityylejä ja pudottanut varjoefektejä sekä sisäisen tarran tekstivarjon. Se tarjoaa varmasti erilaisen tunteen käyttäjäkokemukseen.
Reagoivat ulkoasun muutokset Siirtyminen toiseen CSS-tiedostoon voimme tarkastella yksinkertaisia vastaavia media-kyselyjä, jotka olen asettanut. Kaikki 800px: n yläpuolella olevat selainikkunat kokevat koko sivupalkin käyttöliittymän. Kun saavutat tämän kynnyksen, vasemmanpuoleinen sarake laajenee 100%: n leveydeksi ja näet sivupalkin elementit alaspäin.
@media-näyttö ja (max-width: 800px) body padding: 10px 15px; #container leveys: 100%; # hongkiat-form #aligned leveys: 100%; float: ei; näyttö: lohko; # hongkiat-form #aside leveys: 100%; näyttö: lohko; float: ei; # hongkiat-form .txtinput, # hongkiat-form textarea leveys: 85%; #prioritycase float: vasen; näyttö: lohko; #recipientcase float: vasen; näyttö: lohko; marginaali-oikea: 55px; Kun lähestymme lähemmäs kokoa, yritän mukauttaa kutakin syöttölomaketta. Leveysominaisuus voi päätyä pidempään kuin itse verkkosivu, ja sitten meillä on tulolomakkeet, jotka jäävät reunan yli. Tämä tapahtuu noin 550px: n tarkkuudella, jolloin katkoon seuraavan kyselyn, sekä iPhonen näytön resoluutiot muotokuva- ja maisemakuvauksille.
/ * pienempi näytön pudotus ******* / @media vain näyttö ja (max-leveys: 550px) # hongkiat-muoto .txtinput, # hongkiat-form textarea leveys: 80%; / * iPhone Landscape ******** / @media vain näyttö ja (max-width: 480px) body padding: 10px 0px; select.selmenu leveys: 190px; / * iPhonen muotokuva ******* / @media vain näyttö ja (max-leveys: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea leveys: 70%; # hongkiat-form #aligned ylivuoto: piilotettu; select.selmenu leveys: 160px; #recipientcase margin-right: 30px; Horisontaalinen maisema-tila pitää kaiken hyvin yhdessä hyvin. Olen valinnut pudotusvalikosta vain vähän ohuemman, jotta radion painikkeille olisi tilaa. Muotokuva-näkymässä olen muuttanut kaikkia elementtejä paljon pienemmiksi. Nyt koodi ei katkea edes muuttuneissa selainikkunoissa. Mutta on mukavaa tukea myös iOS / Android-älypuhelimia.
esittely Lataa lähdekoodia johtopäätös Toivon, että tämä opetusohjelma on ollut informatiivinen selittämällä, kuinka paljon web-lomakkeissa voi tehdä. Uudet CSS3-ominaisuudet ovat riittävän tehokkaita rakentamaan täysin toimivia animaatioita vain muutamalla rivillä koodia. On todella jännittävä aika työskennellä web-kehityksessä ja seurata näitä suuntauksia.
Jos sinulla on ideoita tai ehdotuksia opetusohjelman koodista, voit jakaa ne meille kanssamme alla olevan kommentointiruudun kautta.
