Egy halmozott papírhatás bejelentkezési űrlap létrehozása

Ez a cikk a mi része "HTML5 / CSS3 oktatóanyagok sorozat" - szentelt, hogy segítsen neked egy jobb tervező és / vagy fejlesztő. Kattints ide több cikket láthat ugyanazon sorozatból.

A bejelentkezési űrlapok minden dinamikus weboldal alapvető részét képezik. Olyan mechanizmust biztosítanak a weboldal felhasználóinak, hogy hozzáférjenek a korlátozott tartalomhoz. Ebben a bemutatóban egy csomó CSS3 funkciót fogunk felfedezni, mint a szöveg-árnyék, a doboz árnyék, a lineáris gradiensek és az átmenetek, hogy egyszerű és elegáns bejelentkezési űrlapot hozzon létre egy halmozott papír megjelenéssel.

A fenti képen a bejelentkezési űrlap előnézete látható. Kész merülni? Kezdjük el!

1. Alapvető HTML jelölés

A HTML-jelölés, amelyet használni fogunk, nagyon egyszerű, a HTML5 Doctype-deklaráció után a és </code> címkéket. Belül <code><body></code> tag, van egy <code><section></code> címke egy halmozott osztályba. Ez <code><section></code> a címke a tartalom mező szélességének meghatározásához és az oldal közepéhez igazításához használható. Ezt a címke osztálynevét is használjuk a címke CSS használatával való célzásához. A <code><form></code> a címke következik <code><section></code> címke. Az űrlapcímke nem rendelkezik érvényes értékkel a 'action' attribútumhoz, mivel csak demonstrációs célokra használják. Az űrlapmezőn belül az e-mail és a jelszó címkék és a beviteli mező nyilatkozatai, majd a benyújtási gomb látható. Itt fontos megjegyezni, hogy egy „e-mail” típusú beviteli mezőt használtunk. Ezt a HTML5-nyilatkozat biztosítja, és kíméletesen romlik a régebbi böngészők rendszeres szövegbeviteli mezőjére.</p> <p>Itt van a teljes HTML-jelölés:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Egyszerű bejelentkezési űrlap

  Belépés
   Email  
   Jelszó

     És itt van egy előnézet, amit eddig létrehoztunk:
  
 2. Az alapvető stílusok hozzáadása
 Hozzon létre egy új css fájlt master.css és adjon hozzá egy linket ehhez a fájlhoz a fő HTML-fájljában. CSS-fájlunkat egy gyors visszaállítással indítjuk, hogy a különböző böngészőkben egységességet érjünk el. Adjunk hozzá egy szép háttérképet is az oldalunkhoz. Az általam használt képet vettem SubtlePatterns. Nyugodtan böngészhet az oldalon, hogy megtalálja az ízlésének megfelelő háttérképet. A háttérképet a következő nyilatkozat segítségével adhatjuk hozzá. Ne feledje, hogy a Nyissa meg a Sans-t betűtípust a Google Web Fontról a test szövegéhez.
  / * -------- Base Styles --------- * / body, html margin: 0; párnázás: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") bal felső ismétlés; betűkészlet: 16px / 1,5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap szélesség: 400px; margin: 80px auto; 
 3. Halmozott papírhatás
 Most, hogy megvan az alapelrendezés és futás, elkezdhetjük az űrlap tervezését. A halmozott papírhatás megszerzéséhez a :után és :előtt pszeudo-elemek. Ezeket a pszeudoelemeket leginkább vizuális effektusok hozzáadására használják bármely választóhoz. 
 A :előtt pszeudo-elemet használ a tartalom kiválasztásához a választó tartalma és a :után pszeudo-elem a választó tartalma után. 
 Kezdjük azzal, hogy megadjuk a szekciót, egy „halmozott” osztályt, 400px szélességet és 300px magasságot. Ezen túlmenően a # f6f6f6 háttérszínt és egy 1 pixel vastag szegélyt adjuk meg a #bbb színnel. A kulcsfontosságú dolgok itt a határ-sugár-nyilatkozat és a doboz-árnyék-nyilatkozat. Itt a "-moz-" és a "-webkit-" böngésző előtagokat használták annak biztosítására, hogy ez a gekkó és a webkit alapú böngészőkben működik. 
 A határ-sugár-deklaráció nagyon egyszerű, és lekerekített sarkok létrehozására használják, a 3-szoros a görbülettel. A doboz-árnyék-deklaráció szintaxisa bonyolultnak tűnhet, de kisebb darabokra vágjuk, hogy jobban megértsük. 
  / * -------- Border Radius --------- * / -webkit-border-radius: 3px; -moz-határ-sugár: 3px; határ-sugár: 3px; / * -------- Box árnyék --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2);
 Az első két nulla az x-offsetet és az y-offsetet, a 3px pedig az elmosódást jelzi. Ezután a színes nyilatkozat. Itt rgba értékeket használtam; Az rgba a piros zöld kék és az alfa (opacitás). Így a zárójelben lévő 4 érték a piros, zöld, kék és az alfa (opacitás) mennyiségét jelzi..
  .halmozott háttér: # f6f6f6; határ: 1px szilárd #bbb; magasság: 300px; margin: 50px auto; pozíció: relatív; szélesség: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-határ-sugár: 3px; határ-sugár: 3px; 
 Most, hogy létrehoztuk az űrlap alapkötegelő dobozát, kezdjük el a :után és :előtt pszeudo-elemek. 
  .halmozott: után, .stacked: előtt háttér: # f6f6f6; határ: 1px szilárd #aaa; alsó: -8px; tartalom: "; magasság: 250 képpont; bal: 2px; pozíció: abszolút; szélesség: 394px; z-index: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); moz-box-shadow: 0 0 3px rgba (0,0,0, .2); doboz-árnyék: 0 0 3px rgba (0,0,0, .2); -webkit-határ-sugár: 3px; - moz-border-radius: 3px; határ-sugár: 3px; .rakott: alsó: -14px; bal: 5px; szélesség: 388px; -webkit-határ-sugár: 3px; -moz-határ-sugár: 3px ; border-sugar: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0,5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0,5); -shadow: 0 0 15px rgba (0,0,0,0,5);
 A kódot: után és: mielőtt a pszeudoelemek majdnem pontosan hasonlítanak a fentiekben tárgyalt határoló dobozhoz. Az egyetlen fontos dolog, hogy megjegyezzük, hogy ezek a pszeudo-elemek teljesen a határoló dobozhoz képest helyezkednek el. A pszeudoelemek mindegyikét fokozatosan csökkenti néhány pixel, hogy egy halmozott papír megjelenésű legyen.
 4. Beviteli mezők
 A HTML-jelölésben a „szövegbeviteli” osztályt mind az e-mail mezőbe, mind a jelszómezőbe adtuk hozzá, hogy lehetővé tegyük, hogy ezeket az elemeket egyszerűen CSS-nyilatkozatainkkal célozzuk meg. Itt van a CSS-nyilatkozat, amely mindkét beviteli mezőre vonatkozik.
  form input.text-input vázlat: 0; kijelző: blokk; szélesség: 330px; párnázás: 8px 15px; határ: 1px szürke; betűméret: 16px; font-súly: 400; -webkit-border-radius: 25px; -moz-határ-sugár: 25px; határ-sugár: 25px; box-shadow: betét 0 2px 8px rgba (0,0,0,0,3); 
 Itt újra felhasználtuk a határ-sugár és a doboz-árnyék nyilatkozatokat. Szövegmezők esetén a határ-sugár nagyobb értéket kap a görbület biztosítása érdekében. A doboz-árnyék-nyilatkozat esetében a kulcsszó beillesztését arra használták, hogy meghatározza, hogy az árnyék a szövegmezőn belül legyen. Itt az árnyék függőleges eltolódása 2x, és 8x-os elmosódottságú, a színt az rgba formátumban deklarálják.
 Ha valamilyen interaktivitást szeretne hozzáadni a beviteli mezőkhöz, megváltoztatjuk a 'hover' állapotban lévő beviteli mező doboz-árnyék tulajdonságát. Az új doboz-árnyék-deklaráció nulla x és y eltolással rendelkezik, de 5px-es elmosódása van, és a színt rgba formátumban deklarálják.
 5. Küldés gomb
 Ennek az űrlapnak a végső része, amelyet ki kell töltenünk, az elküldés gomb. A beviteli mezőhöz hasonlóan a határoló sugarú tulajdonság segítségével 25px sugárral adjuk meg a benyújtó gombot. Egy gombnyomás-tulajdonságot is adtunk hozzá egy 1px y-eltolással, hogy megadhassuk a gombot “Belső árnyék” hatás.
  űrlapbevitel [type = 'Submit'] float: right; párnázás: 10px 20px; kijelző: blokk; kurzor: mutató; betűméret: 16px; font-súly: 700; szín: #fff; szöveg-árnyék: 0 1px 0 # 000; háttérszín: # 0074CC; határ: 1px szilárd # 05C; -webkit-border-radius: 25px; -moz-határ-sugár: 25px; határ-sugár: 25px; háttérkép: -moz-lineáris gradiens (felső, # 08C, # 05C); háttérkép: -ms-lineáris gradiens (felső, # 08C, # 05C); háttérkép: -webkit-lineáris gradiens (felső, # 08C, # 05C); háttérkép: lineáris gradiens (felső, # 08C, # 05C); -webkit-box-shadow: beillesztés 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: beillesztés 0 1px 0px rgba (255, 255, 255, 0,5); box-shadow: betét 0 1px 0px rgba (255, 255, 255, 0,5); 
 Itt fontos megjegyezni a gradiens hozzáadását a gombhoz. A CSS3 színátmenete meglehetősen nagy téma, és csak a felületet kapjuk. Ehhez a beküldési gombhoz egy lineáris gradienst fogunk hozzáadni a # 08C-tól # 05C-ig. Az összes eddig használt CSS3 tulajdonsághoz hasonlóan hozzáadjuk a "-moz", "-webkit" és "-ms" szállítói előtagokat annak biztosítása érdekében, hogy a színátmenet különböző böngészőkben működjön.
 6. Demó és letöltés
 A bejelentkezési űrlapunk már elkészült. Nézze meg a bemutatót, hogy lássa, hogyan néz ki a kitöltött űrlap. Ha bármelyik ponton elveszett vagy nem tudod követni a bemutatót, ne aggódj, csak töltsd le a fájlokat az asztalodra, és vigyázz a meglévő CSS kóddal, hogy megértsd, hogyan működik.
 Remélem, élvezted ezt a bemutatót. Nyugodtan kísérelje meg ezeket a funkciókat, és ne felejtse el megosztani a gondolatait.
 Demó
 Fájlok letöltése
 
A szerkesztő megjegyzése: Ezt a bejegyzést írta Bharani M Hongkiat.com részére. Bharani tervező / fejlesztő New Delhi, India. Jelenleg a Resumonk.com-on dolgozik - egy online önéletrajz-készítő, amely segít egy professzionális és szép folytatásban néhány perc alatt. Szintén nézd meg az oldalsó projektjét - Quotescube.com - az idézetek napi adagját.