Az első blokkterület egy szekciócímkére van csomagolva, így az elrendezést egymás mellett tudjuk lebegni. A bal oldali oszlop minden ilyen bemenetet tartalmaz: szöveget, e-mailt, URL-t és telefonszámot. Ahogy a telefonon keresztül léptünk át, a mobil billentyűzet kijelzőjének a bemeneti típus alapján kell igazodnia. Rengeteg jó ok van arra, hogy támogassuk ezeket a szolgáltatásokat a mobil számára, mivel mindenki a mai napon dolgozik.
A textarea elem tartalmazhat helyőrző szöveget is, amely a pageload-on van definiálva. Ez hasonló a címkéhez, amely eltűnik, miután a felhasználó bevitt néhány szöveget a mezőbe. Az az attribútum, amelyet nem vitt át, az autocomplete mert a textarea általában nem tölti ki a kapcsolódó tartalmat.
Oldalsáv vezérlők Ezt az űrlapot szeretném építeni úgy, hogy megfelelően reagáljon az ablakok átméretezésére. Ha az ablak elég teljes, akkor mindkét bemeneti oszlop úszik egymás mellett. De ha a szélességet kissé csökkentjük, a jobb oldali sáv a fő tartalom alá esik.
Íme az oldalsávom HTML-je:
Befogadó: Webhely személyzet Főszerkesztő Technikai osztály Közkapcsolatok Általános támogatás Ez a kód valójában nem túl zavaró. Csak egy egyszerű opció kiválasztása menü és néhány rádiógomb. Ezen túlmenően, ezek után az objektumok után elhelyeztem egy visszaállítási és elküldési gombot a szakasz vége felé.
Ez minden jól néz ki, így most lépjünk be néhány CSS tulajdonságba. Olyan sok testreszabás létezik, amikor az űrlapelemeknél dolgozik. Ne próbálj túl sokat gondolkodni és szórakozni!
Animált doboz árnyékai A fő bemeneti elemek mindegyikénél észreveszed, hogy egy színes külső árnyékot animáltam. A Google Chrome egy olyan szerkezeti tulajdonsággal rendelkezik, amely hasonló, de nem olyan extravagáns. Az interfész kis része csábítja az első látogatókat.
/ ** az űrlapelemek ** / # hongkiat-form box-sizing: border-box; # hongkiat-form .txtinput display: block; font-család: "Helvetica Neue", Arial, sans-serif; határstílus: szilárd; határszélesség: 1px; szegélyszín: #dedede; margin-bottom: 20px; betűméret: 1.55em; párnázás: 11px 25px; párnázott bal: 55px; szélesség: 90%; szín: # 777; doboz-árnyék: 0 1px 3px rgba (0, 0, 0, 0,1) betét; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) betét; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) betét; átmenet: 0,15 s-es határvonal lineáris 0s, box-shadow 0.15s lineáris 0s, szín 0.15s lineáris 0s; -webkit-átmenet: határ 0.15s lineáris 0s, box-shadow 0.15s lineáris 0s, szín 0.15s lineáris 0s; -moz-átmenet: határ 0.15s lineáris 0s, box-shadow 0.15s lineáris 0s, szín 0.15s lineáris 0s; -o-átmenet: határ 0.15s lineáris 0s, box-shadow 0.15s lineáris 0s, szín 0.15s lineáris 0s; # hongkiat-form .txtinput: focus color: # 333; határszín: rgba (41, 92, 161, 0,4); doboz-árnyék: 0 1px 3px rgba (0, 0, 0, 0,1) betét, 0 0 8px rgba (41, 92, 161, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) betét, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) betét, 0 0 8px rgba (41, 92, 161, 0,6); vázlat: 0 nincs; Annak érdekében, hogy minden szövegelemet megcéloztam, az osztályt használtam .txtinput. Az átmeneti tulajdonságok mindegyike határon, doboz árnyékon és színen működik. használom doboz-méretezés: szegélydoboz; az űrlaptartóban, hogy a párnázás ne zavarja meg az érzékeny kialakítást.
Ugyanazokat a stílusokat kellett átmásolnom, és kissé módosítani kellett a textarea számára. Megváltoztattam néhány betétet és margót, és hozzáadtam egy egyedi háttérképet.
# hongkiat-form textarea kijelző: blokk; font-család: "Helvetica Neue", Arial, sans-serif; határstílus: szilárd; határszélesség: 1px; szegélyszín: #dedede; margin-bottom: 15px; betűméret: 1.5em; párnázás: 11px 25px; párnázott bal: 55px; szélesség: 90%; magasság: 180px; szín: # 777; doboz-árnyék: 0 1px 3px rgba (0, 0, 0, 0,1) betét; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) betét; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) betét; átmenet: 0,15 s-es határvonal lineáris 0s, box-shadow 0.15s lineáris 0s, szín 0.15s lineáris 0s; -webkit-átmenet: határ 0.15s lineáris 0s, box-shadow 0.15s lineáris 0s, szín 0.15s lineáris 0s; -moz-átmenet: határ 0.15s lineáris 0s, box-shadow 0.15s lineáris 0s, szín 0.15s lineáris 0s; -o-átmenet: határ 0.15s lineáris 0s, box-shadow 0.15s lineáris 0s, szín 0.15s lineáris 0s; # hongkiat-form textarea: fókusz color: # 333; határszín: rgba (41, 92, 161, 0,4); doboz-árnyék: 0 1px 3px rgba (0, 0, 0, 0,1) betét, 0 8px rgba (40, 90, 160, 0,6); -moz-box-árnyék: 0 1px 3px rgba (0, 0, 0, 0,1) betét, 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) betét, 0 0 8px rgba (40, 90, 160, 0,6); vázlat: 0 nincs; # hongkiat-form textarea.txtblock háttér: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px nem ismételhető; Oldalsávbemenetek A rádió gombok és a kiválasztott menüelemek sokkal egyszerűbbek. Ezekre az elemekre külső fényhatásokat és hasonló csepp árnyékokat alkalmazhat, de ez nem mindig jól néz ki. A tervezők egyéni felhasználói felületeket is létrehozhatnak, és ezeket háttérképként csatolják. Ez azonban szükségessé teheti a jQuery megoldást, hogy a beállításokat megfelelően jelenítse meg.
span.radiobadge display: block; margin-bottom: 8px; span.radiobadge címke font-size: 1.2em; alátét: 4px; select.selmenu font-size: 17px; szín: # 676767; padding: 9px! fontos; határ: 1px szilárd #aaa; szélesség: 200px; Nem sokat tettem, hogy ezeket a fő bemeneti elemektől távol lehessem. Rengeteg extra párnázás fontos, hogy a felhasználók kényelmesen kommunikáljanak az űrlappal. Ha a szöveg szuper apró, akkor az csak egy rész csak az egyes részek kitöltése lehet harc. Tartsa nagy betűkészletét, de nem olyan nagy, hogy túlterhelje az oldalt.
Testreszabott gombok A visszaállítási és elküldési gombok saját osztályukban vannak kialakítva. Készítettem egy sor színátmenetet, hogy jól illeszkedjenek az űrlapmezőink kék kiemeléseihez.
Az alábbiakban a CSS kódot adom meg a beküldéshez a normál és lebegő állapotban.
#buttons #submitbtn display: block; balra lebeg; magasság: 3em; párnázás: 0 1em; határ: 1px szilárd; vázlat: 0; font-súly: félkövér; betűméret: 1.3em; szín: #fff; szöveg-árnyék: 0px 1px 0px # 222; fehér tér: mostcsak; word-wrap: normál; függőleges igazítás: középső; kurzor: mutató; -moz-border-sugár: 2px; -webkit-border-radius: 2px; határ-sugár: 2px; határszín: # 5e890a # 5e890a # 000; -moz-box-shadow: beillesztés 0 1px 0 rgba (256,256,256, .35); -ms-box-shadow: beillesztés 0 1px 0 rgba (256,256,256, .35); -webkit-box-shadow: beillesztés 0 1px 0 rgba (256,256,256, .35); box-shadow: betét 0 1px 0 rgba (256, 256, 256, .35); háttérszín: rgb (226,238,175); háttérkép: -moz-lineáris gradiens (felső, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (3%, rgb (226,238,175)), szín-stop (3%, rgb (188,216,77)), szín-stop (100 %, RGB (144,176,38))); háttérkép: -webkit-lineáris gradiens (felső, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); háttérkép: -o-lineáris gradiens (felső, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); háttérkép: -ms-lineáris gradiens (felső, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); háttérkép: lineáris gradiens (felső, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #submitbtn: aktív border-color: # 7c9826 # 7c9826 # 000; szín: #fff; -moz-box-shadow: betét 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-shadow: betét 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-shadow: beillesztés 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); box-shadow: betét 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); háttér: rgb (228,237,189); háttér: -moz-lineáris gradiens (felső, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); háttér: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (2%, rgb (228,237,189)), szín-stop (3%, rgb (207,219,120)), szín-stop (100%, rgb ( 149,175,54))); háttér: -webkit-lineáris gradiens (felső, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); háttér: -o-lineáris gradiens (felső, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); háttér: -ms-lineáris gradiens (felső, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); háttér: lineáris gradiens (felső, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Ez a szelektor szinte lehetetlen tisztán tartani! Egyszerűen túl sok tulajdonság van, amire szükség van a régebbi böngészők listázásához és támogatásához. Az Internet Explorer ezeket a színátmeneteket a megfelelő szűrővel is elvégezheti. Figyelje meg a háttér színátmenetek mellett az új szegélyszínt, lekerekített sarkokat és egy doboz árnyékot a lebegőn.
A reset gomb hasonlónak tűnik, de egy teljesen más útvonalat mentem a színsémával. A világosszürke hajlamos a háttérbe esni az élénkzöld színekhez képest. A visszaállítási gomb valószínűleg nem lesz nagyon sok, ezért nem kell minden figyelmet.
#buttons #resetbtn display: block; balra lebeg; szín: # 515151; szöveg-árnyék: -1px 1px 0px #fff; margin-right: 20px; magasság: 3em; párnázás: 0 1em; vázlat: 0; font-súly: félkövér; betűméret: 1.3em; fehér tér: mostcsak; word-wrap: normál; függőleges igazítás: középső; kurzor: mutató; -moz-border-sugár: 2px; -webkit-border-radius: 2px; határ-sugár: 2px; háttérszín: #fff; háttérkép: -moz-lineáris gradiens (felső, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (2%, rgb (255,255,255)), szín-stop (2%, rgb (240,240,240)), szín-stop (100%, RGB (222.222.222))); háttérkép: -webkit-lineáris gradiens (felső, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); háttérkép: -o-lineáris gradiens (felső, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); háttérkép: -ms-lineáris gradiens (felső, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); háttérkép: lineáris gradiens (felső, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); határ: 1px szilárd # 969696; doboz-árnyék: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-árnyék: 0 1px 2px rgba (144, 144, 144, 0,4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0,4); szöveg-árnyék: 0 1px 1px rgba (255, 255, 255, 0,75); #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0,75); szín: # 818181; háttérszín: #fff; háttérkép: -moz-lineáris gradiens (felső, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); háttérkép: -webkit-gradiens (lineáris, bal felső, bal alsó, szín-stop (2%, rgb (255,255,255)), szín-stop (2%, rgb (244,244,244)), szín-stop (100%, RGB (229.229.229))); háttérkép: -webkit-lineáris gradiens (felső, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%), háttérkép: -o-lineáris gradiens (felső, rgb ( 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); háttérkép: -ms-lineáris gradiens (felső, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); háttérkép: lineáris gradiens (felső, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); határszín: #aeaeae; box-shadow: betét 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); A visszaállítási típust akár el is dobhatja, és ezt a fehér / szürke színsémát használhatja a fő benyújtási gombként. Sok azonos színátmenetet és árnyékhatást használtam, valamint a belső címke szöveges árnyékát. Ez határozottan más érzést ad a felhasználói élménynek.
Választható elrendezési változások A másik CSS-fájlba költözve megnézhetjük az általam beállított egyszerű válaszadó média lekérdezéseket. A 800px fölötti böngészőablak a teljes oldalsáv felületét fogja tapasztalni. Ahogy ez a küszöbérték alatt van, a bal oldali oszlop 100% -os szélességre nő, és az oldalsáv elemei az alábbiakban látszanak.
@media képernyő és (max-width: 800px) body padding: 10px 15px; #container szélesség: 100%; # hongkiat-form #aligned szélesség: 100%; úszó: nincs; kijelző: blokk; # hongkiat-form #aside szélesség: 100%; kijelző: blokk; úszó: nincs; # hongkiat-form .txtinput, # hongkiat-form textarea szélesség: 85%; #prioritycase float: balra; kijelző: blokk; #recipientcase float: balra; kijelző: blokk; margin-right: 55px; Ahogy közelebb kerülünk a mérethez, igyekszem az egyes beviteli űrlapokat adaptálni. A szélesség tulajdonsága hosszabb lehet, mint maga a weblap, majd bemeneti űrlapok vannak a szélén. Ez 550px körül történik, ami a következő lekérdezés megszakítását jelenti, valamint mindkét iPhone képernyős felbontással a portré és a táj számára.
/ * kisebb képernyős dropoff ******* / @media csak képernyő és (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea szélesség: 80%; / * iPhone Landscape ******** / @media csak képernyő és (max-width: 480px) body padding: 10px 0px; select.selmenu szélesség: 190px; / * iPhone-portré ******* / @media csak képernyő és (max-width: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea szélesség: 70%; # hongkiat-form #aligned overflow: rejtett; select.selmenu szélesség: 160px; #recipientcase margin-right: 30px; A vízszintes tájmód még mindig nagyon jól tartja mindent. Csak egy kicsit vékonyabb választógombot tettem a rádió gombok számára. A portré nézetben átméreteztem az összes elemet sokkal kisebb szélességekre. Most már a kódja nem törik átméretezett böngészőablakokban. De jó az iOS / Android okostelefonok támogatása is.
Következtetés Remélem, hogy ez a bemutató tájékoztató jellegű volt, hogy elmagyarázza, hogy mennyit lehet tenni a weblapjain. Az új CSS3 tulajdonságok elég erőteljesek ahhoz, hogy teljesen működőképes animációkat építsenek csak néhány sornyi kóddal. Ez tényleg izgalmas idő a webfejlesztésben és a trendek követésében.
Ha ötletei vagy javaslata van a bemutató kóddal, ne habozzon megosztani velünk velünk az alábbi megjegyzések mezőben.
