Stacked-paper Effect sisselogimisvormi loomine

See artikkel on osa meie "HTML5 / CSS3 juhendite seeria" - pühendatud selleks, et aidata teil paremini disainer ja / või arendaja. Kliki siia et näha sama seeria rohkem artikleid.

Sisselogimisvormid on iga dünaamilise veebisaidi oluline osa. Need pakuvad veebisaitide kasutajatele juurdepääsu piiratud sisule. Selles juhendis uurime palju CSS3 funktsioone, nagu teksti-vari, kasti vari, lineaarsed gradientid ja üleminekud, et luua lihtne ja elegantne sisselogimisvorm, millel on virnastatud paber..

Ülaltoodud pilt näitab sisselogimisvormi eelvaadet, mida me ehitame. Kas olete valmis sukelduma? Alustame!

1. HTML-märgistus

Kasutatav HTML-märgistus on väga lihtne, pärast HTML5 Doctype'i deklaratsiooni on meil ja </code> sildid. . \ T <code><body></code> tag, meil on a <code><section></code> silt, millel on "virnastatud" klass. See <code><section></code> sildi abil saab määrata sisu kasti laiuse ja joondada see lehe keskele. Kasutame ka selle sildi klassi nime selle sildi sihtimiseks CSS-iga. A <code><form></code> silt järgneb <code><section></code> silt. Vormi märgisel ei ole atribuuti „tegevus” kehtivat väärtust, sest seda kasutatakse ainult demonstratsiooni eesmärgil. Vormiväljal on e-posti ja parooli siltide ja sisendvälja deklaratsioonid, millele järgneb saatmisnupp. Siinkohal on oluline märkida, et oleme kasutanud sisendvälja, millel on teatud tüüpi e-post. See on meile antud HTML5 deklaratsiooniga ja see halveneb graatsiliselt vanemate brauserite tavalisele tekstisisestusväljale.</p> <p>Siin on kogu HTML-i märgistus:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Lihtne sisselogimisvorm

  Logi sisse
   E-post  
   Parool

     Ja siin on eelvaade sellest, mida oleme seni loonud:
  
 2. Põhistiilide lisamine
 Looge uus css-fail nimega master.css ja lisage sellele failile link peamises HTML-failis. Alustame CSS-faili kiire nullimisega, et saada erinevate brauserite vahel ühtsus. Lisame ka meie lehele kena taustapildi. Pilt, mida olen kasutanud, on võetud SubtlePatterns. Võite vabalt sirvida veebisaiti, et leida oma maitsele sobiv taustapilt. Võime lisada taustapildi järgmise deklaratsiooni abil. Pange tähele, et kasutan Avage Sans kirjateksti jaoks Google'i veebifontist.
  / * -------- Base Styles --------- * / body, html marginaal: 0; polster: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") vasakpoolne ülemine kordus; font: 16px / 1,5 "avatud sans", Helvetica, Arial, sans-serif;  div.wrap laius: 400px; marginaal: 80px auto; 
 3. Stacked-Paper efekt
 Nüüd, kui meil on põhiline paigutus ja käivitamine, alustame vormi kujundamist. Stacked-paper efekti saamiseks kasutame seda : pärast ja : enne pseudoelemendid. Neid pseudoelemente kasutatakse peamiselt visuaalsete efektide lisamiseks mis tahes valijale. 
 The : enne pseudoelementi kasutatakse sisu lisamiseks enne valija sisu ja : pärast pseudoelement pärast valija sisu. 
 Alustame sektsiooni andmisega, mille klass on "virnastatud", laiusega 400 px ja kõrgusega 300 pikslit. Lisaks sellele anname sellele kastile taustavärvi # f6f6f6 ja 1-pikslise paksusega värvi #bbb. Peamised märkused siin on piiriradade deklaratsioon ja kasti-varju deklaratsioon. Siin on "-moz-" ja "-webkit-" brauseri prefiksid kasutatud tagamaks, et see toimib gekko- ja webkit-põhistes brauserites. 
 Piiriraadiusdeklaratsioon on väga lihtne ja seda kasutatakse ümarate nurkade loomiseks, kus 3px esindab kõverust. Kasti-vari deklaratsiooni süntaks võib tunduda keeruline, kuid lõhkem selle väiksemateks tükkideks, et seda paremini mõista. 
  / * -------- Piiriraadius --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; raadius: 3x; / * -------- 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);
 Kaks esimest nulli näitavad x-nihet ja y-nihet ning 3px tähistab hägusust. Järgmine on värvi deklaratsioon. Olen siin kasutanud rgba väärtusi; rgba tähistab punast rohelist sinist ja alfa (läbipaistmatus). Seega näitavad sulgudes olevad 4 väärtust punase, rohelise, sinise ja selle alfa (läbipaistmatus) kogust..
  .virnastatud (taust: # f6f6f6; piir: 1px tahke #bbb; kõrgus: 300 px; marginaal: 50px auto; positsioon: suhteline; laius: 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; raadius: 3x; 
 Nüüd, kui oleme loonud vormi põhipiirava kasti, alustame : pärast ja : enne pseudoelemendid. 
  .virnastatud: pärast, .stacked: enne taust: # f6f6f6; piir: 1px tahke #aaa; põhja: -8px; sisu: "; kõrgus: 250 pikslit; vasak: 2px; asend: absoluutne; laius: 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); karp-vari: 0 0 3px rgba (0,0,0, .2); -webkit-piiri-raadius: 3px; - moz-border-radius: 3px; piiri-raadius: 3px; .sacked: enne põhi: -14px; vasak: 5px; laius: 388px; -webkit-piiri-raadius: 3px; -moz-border-radius: 3px ; raadius: 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); -vari: 0 0 15px rgba (0,0,0,0,5);
 Kood: pärast ja: enne pseudoelemente on peaaegu täpselt sarnased ülaltoodud piirava kasti omaga. Siinkohal on ainus oluline märkida, et need pseudoelemendid paiknevad absoluutselt piirava kasti suhtes. Iga pseudoelementi vähendatakse järk-järgult mõne piksliga, et anda sellele virnastatud paber.
 4. Sisendväljad
 HTML-märgistuses oleme lisanud nii e-posti väljale kui ka parooliväljale „tekstisisestuse” klassi, et võimaldada meil neid elemente lihtsalt CSS-deklaratsioonidega sihtida. Siin on CSS-deklaratsioon, mida rakendatakse mõlemale sisendväljale.
  vorm input.text-input outline: 0; kuva: plokk; laius: 330 px; polsterdus: 8px 15px; piir: 1px tahke hall; fondi suurus: 16px; font-kaal: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; raadius: 25px; karp-vari: sisend 0 2px 8px rgba (0,0,0,0,3); 
 Siin oleme jälle kasutanud piiriradade ja kasti-varju deklaratsioone. Tekstiväljade puhul antakse piirjoone kõrgem väärtus, et tagada rohkem kumerust. Kasti-vari deklaratsiooni puhul on märksõna sisendit kasutatud selleks, et määrata, kas vari on tekstivälja sees. Siin on varju vertikaalne nihe 2x ja selle hägusus on 8 pikslit, värvi deklareeritakse rgba formaadis.
 Sisendväljade interaktiivsuse lisamiseks muudame sisendvälja kasti-vari omadust hover olekus. Uuel kasti-varju deklaratsioonil on null x ja y nihked, kuid 5px hägusus, värvi deklareerides rgba formaadis.
 5. Saada nupp
 Selle vormi viimane osa, mida peame täitma, on saatmise nupp. Sarnaselt sisendiväljale anname esitamisnupule raadiuses 25 rx raadiusega raadiuse omaduse. Nupule an on lisatud ka 1-px y-offsetiga kasti-vari omadus “sisemine vari” mõju.
  vormi sisend [type = 'Submit'] float: right; polsterdus: 10px 20px; kuva: plokk; kursor: pointer; fondi suurus: 16px; font-kaal: 700; värv: #fff; teksti-vari: 0 1px 0 # 000; taustavärv: # 0074CC; piir: 1px tahke # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; raadius: 25px; taustapilt: -moz-linear-gradient (ülemine, # 08C, # 05C); taustapilt: -ms-line-gradient (ülemine, # 08C, # 05C); taustapilt: -webkit-lineaarne gradient (ülemine, # 08C, # 05C); taustapilt: lineaarne gradient (ülemine, # 08C, # 05C); -webkit-box-shadow: sisend 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: sisend 0 1px 0px rgba (255, 255, 255, 0,5); kast-vari: sisend 0 1px 0px rgba (255, 255, 255, 0,5); 
 Siinkohal on oluline märkida, et sellele nupule lisatakse gradient. CSS3 gradiendid on üsna suur teema ja meil on ainult pinda kriimustada. Selle esitamisnupu jaoks lisame lineaarse gradiendi, mis läheb vahemikus # 08C kuni # 05C. Nagu kõigi teiste seni kasutatud CSS3 omaduste puhul, lisame me "-moz", "-webkit" ja "-ms" müüja eesliited, et tagada gradienti töötamine erinevate brauserite vahel.
 6. Demo ja allalaadimine
 Meie sisselogimisvorm on nüüd valmis. Tutvuge demoga, et näha, kuidas täidetud vormi välja näeb. Kui olete igal hetkel kadunud või ei õnnestu juhendajaga järelmeetmeid teha, ärge muretsege, lihtsalt laadige failid töölauale ja tehke olemasoleva CSS-koodiga tööd, et mõista, kuidas see toimib.
 Loodan, et teile meeldis see õpetus. Võite proovida neid funktsioone ja ärge unustage oma mõtteid jagada.
 Demo
 Failide allalaadimine
 
Toimetaja märkus: See postitus on kirjutatud Bharani M Hongkiat.com jaoks. Bharani on India / New Delhi disainer / arendaja. Praegu töötab ta Resumonk.com-il - online-taaskasutajana, mis aitab teil luua professionaalse ja ilusa jätkamise minutites. Vaadake ka tema kõrvalprojekti - Quotescube.com - teie hinnapakkumisi.