Ustvarjanje obrazca za prijavo učinkov zloženih papirjev

Ta članek je del našega "Serija vadnic HTML5 / CSS3" - namenjen vam je za boljšega oblikovalca in / ali razvijalca. Klikni tukaj da si ogledate več člankov iz iste serije.

Prijavni obrazci so bistveni del vsake dinamične spletne strani. Uporabnikom omogočajo dostop do omejene vsebine. V tej vadnici bomo raziskovali veliko funkcij CSS3, kot so text-shadow, box-shadow, linearni gradienti in prehodi, da ustvarimo preprost in eleganten obrazec za prijavo z videzom zloženih papirjev..

Zgornja slika prikazuje predogled obrazca za prijavo, ki ga bomo gradili. Ste pripravljeni na potapljanje? Začnimo!

1. Osnovna oznaka HTML

Oznaka HTML, ki jo bomo uporabljali, je zelo preprosta, po deklaraciji Doctype HTML5 imamo in </code> oznake. Znotraj <code><body></code> tag, imamo a <code><section></code> z oznako "zložen". To <code><section></code> Oznaka se uporablja za določanje širine polja vsebine in za poravnavo s središčem strani. Ime razreda te oznake bomo uporabili tudi za ciljanje te oznake s pomočjo CSS. A <code><form></code> sledi oznaka <code><section></code> oznaka. Oznaka obrazca nima veljavne vrednosti za atribut »dejanje«, ker se uporablja samo za namen predstavitve. V polju obrazca so deklaracije za oznake e-pošte in gesla ter vnosno polje, ki mu sledi gumb za pošiljanje. Pomembno je omeniti, da smo uporabili vnosno polje z vrsto "e-pošte". To nam posreduje deklaracija HTML5 in se elegantno razgradi na običajno polje za vnos besedila v starejših brskalnikih.</p> <p>Tukaj je celotna oznaka HTML:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Preprost obrazec za prijavo

  Vpiši se
   E-naslov  
   Geslo

     In tukaj je predogled tistega, kar smo do sedaj ustvarili:
  
 2. Dodajanje osnovnih slogov
 Ustvarite novo datoteko css master.css in dodajte povezavo do te datoteke v glavno datoteko HTML. Datoteko CSS bomo zagnali s hitro ponastavitvijo, da bi dosegli enotnost v različnih brskalnikih. Dodamo tudi lepo ozadje na našo stran. Slika, ki sem jo uporabil, je bila vzeta iz Subtilne črte. Prosto si oglejte spletno stran in poiščite sliko za ozadje, ki ustreza vašemu okusu. Lahko dodamo sliko ozadja s pomočjo naslednje deklaracije. Upoštevajte tudi, da uporabljam Odpri Sans pisave iz Google Spletne pisave za osnovno besedilo.
  / * -------- Osnovni slogi --------- * / body, html margin: 0; oblazinjenje: 0;  telo ozadje: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") levo zgornjo ponovitev; pisava: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; margin: 80px auto; 
 3. Učinek zloženega papirja
 Zdaj, ko imamo osnovno postavitev in delovanje, lahko začnemo z oblikovanjem obrazca. Za pridobitev učinka zloženega papirja bomo uporabili : after in : prej psevdoelementi. Ti psevdoelementi se večinoma uporabljajo za dodajanje vizualnih učinkov kateremu koli izbirniku. 
 The : prej pseudo-element se uporablja za dodajanje vsebine pred izbirno vsebino in : after psevdoelement za vsebino po izbirniku. 
 Začeli bomo z odsekom, z razredom 'zloženih', širino 400px in višino 300px. Poleg tega bomo tej škatli dali barvo ozadja # f6f6f6 in mejo debeline ene piksle z barvo #bbb. Najpomembnejše stvari, ki jih je treba upoštevati, so izjava o mejnem polmeru in deklaracija box-shadow. Tukaj so bile uporabljene predpone brskalnika "-moz-" in "-webkit-" za zagotovitev, da to deluje v brskalnikih, ki temeljijo na gecko in webkit. 
 Deklaracija o mejnem polmeru je zelo preprosta in se uporablja za ustvarjanje zaobljenih vogalov s 3px, ki predstavlja ukrivljenost. Sintaksa deklaracije box-shadow lahko izgleda zapletena, vendar jo razčlenimo na manjše kose, da bi jih bolje razumeli. 
  / * -------- Radij obroba --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; obrobni polmer: 3px; / * -------- Box Shadow --------- * / -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);
 Prva dva ničla označujeta x-offset in y-offset in 3px označuje zamegljenost. Naprej je deklaracija barv. Tu sem uporabil vrednosti rgba; rgba pomeni rdeča zelena modra in alfa (motnost). Tako 4 vrednosti v oklepaju označujejo količino rdeče, zelene, modre in njene alfa (motnosti)..
  .zložen ozadje: # f6f6f6; obroba: 1px trdna #bbb; višina: 300px; margin: 50px auto; položaj: relativna; širina: 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-border-radius: 3px; obrobni polmer: 3px; 
 Zdaj, ko smo ustvarili osnovno omejevalno polje za obrazec, začnimo z : after in : prej psevdoelementi. 
  .zloženi: po, .stacked: pred background: # f6f6f6; meja: 1px trdna #aaa; spodaj: -8px; vsebina: "; višina: 250px; levo: 2px; položaj: absolutna; širina: 394px; z-indeks: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); - moz-box-shadow: 0 0 3px rgba (0,0,0, .2), polje-senca: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; obrobni polmer: 3px; .stacked: pred bottom: -14px; levo: 5px; širina: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; -mejni polmer: 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);
 Koda za: po in: pred psevdoelementi je skoraj popolnoma podobna tisti v zgornjem razmejitvenem polju. Pomembno je omeniti, da so ti psevdoelementi postavljeni popolnoma glede na omejevalno polje. Vsak psevdoelement se postopoma znižuje za nekaj slikovnih pik, tako da mu daje videz zloženega papirja.
 4. Vnosna polja
 V označevalniku HTML smo dodali razred vnosa besedila v polje za e-pošto in polje z geslom, da lahko preprosto ciljamo na te elemente z našimi deklaracijami CSS. Tu je deklaracija CSS, ki se uporablja za obe vnosni polji.
  obrazec input.text-input outline: 0; prikaz: blok; širina: 330px; oblazinjenje: 8px 15px; obroba: 1px polno siva; velikost pisave: 16px; teža pisave: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; obrobni polmer: 25px; box-shadow: vložek 0 2px 8px rgba (0,0,0,0.3); 
 Tudi tukaj smo ponovno uporabili deklaracije o mejnem polmeru in box-shadow. V primeru besedilnih polj je meji radija dobila višjo vrednost, da se zagotovi več ukrivljenosti. V primeru deklaracije box-shadow je bila ključna beseda inset uporabljena za določitev, da bo senca znotraj besedilnega polja. Tu je navpični odmik za senco 2px in ima zamegljenost 8 px, pri čemer je barva deklarirana v formatu rgba.
 Če želite vnosnim poljem dodati nekaj interaktivnosti, bomo spremenili lastnosti box-shadow za vnosno polje v stanju 'hover'. Nova deklaracija box-shadow ima ničelne x in y odmake, vendar ima 5px zamegljenost, pri čemer je barva deklarirana v formatu rgba.
 5. Pošlji gumb
 Končni del tega obrazca, ki ga moramo izpolniti, je gumb za pošiljanje. Podobno kot vnosno polje bomo gumbu za pošiljanje podali polmer 25px, ki uporablja lastnost border-radius. Dodana je tudi lastnost box-shadow z y-offsetom 1px, ki daje gumb a “notranja senca” učinka.
  input input [type = 'submit'] float: desno; oblazinjenje: 10px 20px; prikaz: blok; kazalec: kazalec; velikost pisave: 16px; teža pisave: 700; barva: #fff; besedilna senca: 0 1px 0 # 000; barva ozadja: # 0074CC; meja: 1px trdna # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; obrobni polmer: 25px; background-image: -moz-linearni gradient (top, # 08C, # 05C); background-image: -ms-linearni gradient (vrh, # 08C, # 05C); background-image: -webkit-linearni gradient (vrh, # 08C, # 05C); background-image: linearni gradient (top, # 08C, # 05C); -webkit-box-shadow: vložek 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: vložek 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow: vložek 0 1px 0px rgba (255, 255, 255, 0.5); 
 Pomembno je omeniti deklaracijo za dodajanje gradienta v ta gumb. CSS3 gradient je precej velika tema in bomo samo praskali površino. Za ta gumb za pošiljanje bomo dodali linearni gradient od # 08C do # 05C. Kot pri vseh ostalih lastnostih CSS3, ki smo jih do sedaj uporabljali, bomo dodali predpone prodajalca "-moz", "-webkit" in "-ms", da zagotovimo, da gradient deluje v različnih brskalnikih.
 6. Predstavitev in prenos
 Naš obrazec za prijavo je zdaj končan. Oglejte si predstavitev in si oglejte, kako izgleda izpolnjen obrazec. Če ste na kateri koli točki izgubljeni ali ne morete nadaljevati z vadnico, ne skrbite, preprosto prenesite datoteke na namizje in pospravite z obstoječo kodo CSS, da boste razumeli, kako deluje.
 Upam, da ste uživali v tej vadnici. Lahko eksperimentirate s temi funkcijami in ne pozabite deliti svojih misli.
 Demo
 Prenos datotek
 
Opomba urednika: To objavo je napisal Bharani M za Hongkiat.com. Bharani je oblikovalec / razvijalec iz New Delhija v Indiji. Trenutno dela na Resumonk.com - spletnem izdelovalcu življenjepisov, ki vam pomaga ustvariti profesionalno in lepo življenje v nekaj minutah. Oglejte si tudi njegov stranski projekt - Quotescube.com - vaš dnevni odmerek citatov.