Stacked-paper Effect pieteikšanās veidlapas izveide

Šis raksts ir daļa no mūsu "HTML5 / CSS3 konsultāciju sērija" - veltīts, lai palīdzētu jums kļūt par labāku dizaineru un / vai izstrādātāju. Noklikšķiniet šeit lai redzētu vairāk rakstu no vienas sērijas.

Pieteikšanās veidlapas ir jebkuras dinamiskas tīmekļa vietnes būtiska sastāvdaļa. Tie nodrošina mehānismu, lai vietnes lietotāji varētu piekļūt ierobežotam saturam. Šajā apmācībā mēs izpētīsim daudzas CSS3 funkcijas, piemēram, teksta ēnu, kastes ēnu, lineārus gradientus un pārejas, lai izveidotu vienkāršu un elegantu pieteikšanās veidlapu ar steku papīra izskatu.

Augstāk redzamajā attēlā redzams pieteikšanās veidlapas priekšskatījums, kuru mēs būsim. Vai esat gatavs nirt? Sāksim!

1. HTML iezīmēšana

HTML marķējums, ko mēs izmantosim, ir ļoti vienkāršs, pēc HTML5 Doctype deklarācijas mums ir un </code> tagus. ES ietvaros <code><body></code> tag, mums ir a <code><section></code> atzīme ar “stacked” klasi. Tas <code><section></code> tagu izmanto, lai noteiktu satura lodziņa platumu un saskaņotu to ar lapas centru. Mēs arī izmantosim šo tagu klases nosaukumu, lai mērķētu šo tagu, izmantojot CSS. A <code><form></code> tag seko <code><section></code> tag. Veidlapas atzīmei nav derīgas vērtības “darbības” atribūtam, jo to izmanto tikai demonstrācijas nolūkos. Veidlapas laukā atrodas e-pasta un paroles uzlīmes un ievades lauks, kam seko iesniegšanas poga. Šajā sakarā ir svarīgi atzīmēt, ka mēs esam izmantojuši ievades lauku ar “e-pasta” veidu. Tas mums tiek nodrošināts ar HTML5 deklarāciju, un tas degradējas ar parasto teksta ievades lauku vecākiem pārlūkiem.</p> <p>Šeit ir visa HTML atzīme:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Vienkārša pieteikšanās forma

  Pieslēgties
   E-pasts  
   Parole

     Un šeit ir priekšskatījums par to, ko esam izveidojuši līdz šim:
  
 2. Pamata stilu pievienošana
 Izveidojiet jaunu css faila nosaukumu master.css un pievienojiet saiti uz šo failu galvenajā HTML failā. Mēs sākam CSS failu ar ātru atiestatīšanu, lai iegūtu vienveidību dažādās pārlūkprogrammās. Pievienosim arī mūsu lapai jauku fona attēlu. Attēls, ko esmu izmantojis, ir ņemts no SmalksPatterns. Jūtieties brīvi, lai pārlūkotu vietni, lai atrastu fona attēlu, kas atbilst jūsu gaumei. Mēs varam pievienot fona attēlu ar šādas deklarācijas palīdzību. Ņemiet vērā arī to, ka lietoju Atvērt Sans fonts no Google Web fonta ķermeņa tekstam.
  / * -------- bāzes stili --------- * / body, html margin: 0; polsterējums: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") kreisais augšējais atkārtojums; fonts: 16px / 1,5 "Atvērtie sāni", Helvetica, Arial, sans-serifs;  div.wrap platums: 400px; starpība: 80px auto; 
 3. Stacked-Paper efekts
 Tagad, kad mums ir pamata izkārtojums un darbojas, ļauj sākt veidot veidlapu. Lai iegūtu stacked-paper efektu, mēs izmantosim : pēc un : pirms pseidoelementi. Šie pseidoelementi galvenokārt tiek izmantoti vizuālo efektu pievienošanai jebkuram selektoram. 
 The : pirms pseidoelements tiek izmantots, lai pievienotu saturu pirms selektora satura un : pēc pseidoelements pēc atlasītāja satura. 
 Mēs sāksim, piešķirot sadaļai ar “stacked” klasi, 400px platumu un 300px augstumu. Turklāt šajā lodziņā būs fona krāsa ffffff un 1 pikseļu biezums ar krāsu #bbb. Galvenās piezīmes šeit ir robežas rādiusa deklarācija un kastes ēnu deklarācija. Šeit tiek izmantotas pārlūkprogrammas "-moz-" un "-webkit-" prefikses, lai nodrošinātu, ka tas darbojas pārlūkprogrammās, kas balstītas uz gekko un webkit.. 
 Robežu rādiusa deklarācija ir ļoti vienkārša un tiek izmantota, lai izveidotu noapaļotus stūri, ar 3px, kas attēlo izliekumu. Kastes-ēnas deklarācijas sintakse varētu izskatīties sarežģīta, bet ļaujiet mums to sadalīt mazākos gabalos, lai labāk saprastu to. 
  / * -------- Robežu rādiuss --------- * / -webkit-robežu rādiuss: 3px; -moz-border-rādiuss: 3px; robežu rādiuss: 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); kastes ēna: 0 0 3px rgba (0,0,0, .2);
 Pirmie divi nullei norāda x-nobīdes un y-nobīdes, un 3px norāda uz izplūšanu. Tālāk ir krāsu deklarācija. Es šeit izmantoju rgba vērtības; rgba apzīmē sarkano zaļo zilo un alfa (dūmainību). Tādējādi 4 vērtības iekavās norāda sarkano, zaļo, zilo un tā alfa (necaurredzamības) daudzumu..
  .stacked fons: # f6f6f6; robeža: 1px cietais #bbb; augstums: 300px; starpība: 50px auto; pozīcija: relatīvais; platums: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); kastes ēna: 0 0 3px rgba (0,0,0, .2); -webkit-robežu rādiuss: 3px; -moz-border-rādiuss: 3px; robežu rādiuss: 3px; 
 Tagad, kad mēs esam izveidojuši veidlapas pamatu, iesakām sākt ar : pēc un : pirms pseidoelementi. 
  .stacked: pēc, .stacked: pirms fons: # f6f6f6; robeža: 1px cietais #aaa; apakšā: -8px; saturs: "; augstums: 250 pikseļi; pa kreisi: 2px; pozīcija: absolūta; platums: 394px; z-indekss: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); moz-box-shadow: 0 0 3px rgba (0,0,0, .2); kastes ēna: 0 0 3px rgba (0,0,0, .2); -webkit-robežu rādiuss: 3px; - moz-border-radius: 3px; robežu rādiuss: 3px; .stacked: pirms apakšā: -14px; pa kreisi: 5px; platums: 388px; -webkit-robežu rādiuss: 3px; robežu rādiuss: 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);
 Kods: pēc un: pirms pseidoelementi ir gandrīz pilnīgi līdzīgi iepriekš aprakstītajam. Vienīgais svarīgais, kas jāatzīmē, ir tas, ka šie pseidoelementi ir novietoti absolūti attiecībā pret ierobežojošo kasti. Katrs no pseidoelementiem tiek pakāpeniski samazināts par dažiem pikseļiem, lai dotu tai izskatu.
 4. Ievades lauki
 HTML marķējumā mēs esam pievienojuši „teksta ievades” klasi gan e-pasta laukam, gan paroles laukam, lai ļautu mums viegli orientēt šos elementus ar mūsu CSS deklarācijām. Lūk, CSS deklarācija, kas tiek piemērota abiem ievades laukiem.
  forma input.text-input izklāsts: 0; displejs: bloks; platums: 330px; polsterējums: 8px 15px; robeža: 1px ciets pelēks; fonta lielums: 16px; fontu svars: 400; -webkit-robežu rādiuss: 25px; -moz-border-rādiuss: 25px; robežu rādiuss: 25px; box-shadow: ieliktnis 0 2px 8px rgba (0,0,0,0.3); 
 Šeit mēs atkal esam izmantojuši robežu rādiusa un kastes ēnu deklarācijas. Teksta lauku gadījumā robežu rādiusam tiek piešķirta lielāka vērtība, lai nodrošinātu lielāku izliekumu. Kastes ēnu deklarācijas gadījumā atslēgvārdu ieliktnis tika izmantots, lai norādītu, ka ēna būs teksta laukā. Šeit ēnas vertikālais nobīde ir 2px, un tā izplūdums ir 8px, krāsa tiek deklarēta, izmantojot rgba formātu.
 Lai ievadīšanas laukiem pievienotu kādu interaktivitāti, mēs mainīsim ievades lauka lodziņu ēnu, kas atrodas “hover” stāvoklī. Jaunajai kastes ēnu deklarācijai ir nulle x un y nobīdes, bet ir 5px izplūšana, un krāsa tiek deklarēta rgba formātā.
 5. Iesniegt pogu
 Šīs veidlapas galīgā daļa, kas mums jāaizpilda, ir iesniegšanas poga. Līdzīgi ievades laukam, mēs iesniegsim iesniegšanas pogu 25px rādiusam, izmantojot robežu rādiusa īpašumu. Ir pievienots arī kaste-ēna īpašums ar 1-px y-kompensāciju, lai dotu pogu a “iekšējā ēna” efektu.
  veidlapas ievade [type = 'Submit'] float: right; polsterējums: 10px 20px; displejs: bloks; kursors: rādītājs; fonta lielums: 16px; fontu svars: 700; krāsa: #fff; teksta ēna: 0 1px 0 # 000; fona krāsa: # 0074CC; robeža: 1px cietais # 05C; -webkit-robežu rādiuss: 25px; -moz-border-rādiuss: 25px; robežu rādiuss: 25px; fona attēls: -moz-linear-gradient (augšā, # 08C, # 05C); fona attēls: -ms-lineārs gradients (augšā, # 08C, # 05C); fona attēls: -webkit-lineārs gradients (augšā, # 08C, # 05C); fona attēls: lineārs gradients (augšā, # 08C, # 05C); -webkit-box-shadow: ielikt 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: ielikt 0 1px 0px rgba (255, 255, 255, 0,5); box-shadow: ieliktnis 0 1px 0px rgba (255, 255, 255, 0,5); 
 Svarīgi atzīmēt šeit ir deklarācija par gradienta pievienošanu šai pogai. CSS3 slīpums ir diezgan liels temats, un mēs tikai saskrāpēsim virsmu. Par šo iesniegšanas pogu mēs pievienosim lineāru gradientu no # 08C līdz # 05C. Tāpat kā ar visām citām līdz šim izmantotajām CSS3 īpašībām, mēs pievienosim "-moz", "-webkit" un "-ms" piegādātāja prefiksu, lai nodrošinātu, ka gradienta darbība darbojas dažādās pārlūkprogrammās.
 6. Demo un lejupielāde
 Mūsu pieteikšanās veidlapa tagad ir pabeigta. Apskatiet demonstrāciju, lai redzētu, kā izskatās aizpildītā veidlapa. Ja esat pazudis jebkurā brīdī vai nespēj sekot līdzi apmācībai, neuztraucieties, vienkārši lejupielādējiet failus uz darbvirsmas un apmeklējiet esošo CSS kodu, lai saprastu, kā tas darbojas.
 Ceru, ka jums patika šī apmācība. Jūtieties brīvi eksperimentēt ar šīm funkcijām un neaizmirstiet dalīties savās domās.
 Demo
 Lejupielādēt failus
 
Redaktora piezīme: Šo ziņu raksta Bharani M par Hongkiat.com. Bharani ir dizainers / attīstītājs no Ņūdeli, Indijā. Pašlaik viņš strādā pie Resumonk.com - tiešsaistes atsākšanas celtnieks, kas palīdz izveidot profesionālu un skaistu atsākšanu minūtēs. Pārbaudiet arī viņa sānu projektu - Quotescube.com - jūsu ikdienas devu.