Sukurto popieriaus poveikio registracijos formos kūrimas

Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

Prisijungimo formos yra esminė bet kokios dinaminės svetainės dalis. Jie sukuria svetainių naudotojų prieigą prie riboto turinio. Šioje pamokoje ištirsime daugybę CSS3 funkcijų, tokių kaip teksto šešėlis, dėžutės šešėlis, linijiniai gradientai ir perėjimai, kad būtų sukurta paprasta ir elegantiška prisijungimo forma su išpjaustyto popieriaus išvaizda.

Viršuje esančiame paveikslėlyje pateikiamas prisijungimo formos, kurią mes statysime, peržiūra. Pasiruošę nardyti? Pradėkime!

1. Pagrindinis HTML žymėjimas

HTML žymėjimas, kurį naudosime, yra labai paprastas, po HTML5 dokumento deklaracijos, mes turime ir </code> žymės. Per <code><body></code> žyma, turime a <code><section></code> žyma su „sukrautos“ klasės. Tai <code><section></code> žyma naudojama turinio lauko plotiui nustatyti ir suderinti jį su puslapio centru. Taip pat naudosime šios žymės klasės pavadinimą, kad nukreiptume šią žymą naudojant CSS. A <code><form></code> žyma seka <code><section></code> žyma. Formos žyma neturi reikšmės „veiksmo“ atributui, nes ji naudojama tik demonstravimo tikslais. Formos lauke pateikiamos el. Pašto ir slaptažodžių etiketės ir įvesties lauko deklaracijos, po kurių pateikiamas mygtukas „Siųsti“. Svarbu pažymėti, kad mes naudojome įvesties lauką su „el. Pašto“ tipu. Tai pateikiama mums HTML5 deklaracijoje, o ji seniai naršyklėse blogėja į įprastą teksto įvedimo lauką.</p> <p>Štai visas HTML žymėjimas:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Paprasta prisijungimo forma

  Prisijungti
   El. Paštas  
   Slaptažodis

     Ir čia yra tai, ką sukūrėme iki šiol:
  
 2. Pagrindinių stilių pridėjimas
 Sukurkite naują css failą, pavadintą master.css ir pridėkite nuorodą į šį failą pagrindiniame HTML faile. CSS failą pradėsime greitai atstatydami, kad gautume vienodumą skirtingose naršyklėse. Taip pat pridėkime gražų fono paveikslėlį į mūsų puslapį. Vaizdas, kurį naudoju, buvo paimtas iš Subtilios formos. Nesivaržykite naršyti svetainėje ir suraskite savo skoniui tinkamą fono paveikslėlį. Mes galime pridėti fono paveikslėlį naudodami šią deklaraciją. Taip pat atkreipkite dėmesį, kad naudoju Atidarykite Sans šriftą iš „Google“ žiniatinklio šrifto kūno tekstui.
  / * -------- Pagrindiniai stiliai --------- * / kūnas, html margin: 0; įdėklas: 0;  kūnas fonas: URL („https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png“) kairėje viršuje; šriftas: 16px / 1,5 "Atviras sans", Helvetica, Arial, sans-serifas;  div.wrap plotis: 400px; paraštė: 80px auto; 
 3. Stacked-paper efektas
 Dabar, kai mes turime pagrindinį išdėstymą ir veikimą, pradedame kurti formą. Kad gautume sukrautą popierių, naudosime : po ir : anksčiau pseudo elementai. Šie pseudo elementai dažniausiai naudojami bet kokiam selektoriui vizualiniams efektams pridėti. 
 The : anksčiau pseudo elementas naudojamas turiniui pridėti prieš selektoriaus turinį ir : po pseudo elementas po selektoriaus turinio. 
 Pradėsime suteikdami skyrių, kurio klasė yra „sukrauta“, 400 pikselių plotis ir 300 pikselių aukštis. Be to, šį langelį suteiksime fono ffffff fono spalvą ir 1 pikselio storio sieną su spalva #bbb. Svarbiausi dalykai, kuriuos reikia pažymėti, yra pasienio spindulio deklaracija ir langelio šešėlis deklaracija. Čia, „-moz-“ ir „-webkit-“ naršyklės prefiksai buvo naudojami siekiant užtikrinti, kad tai veiktų „gecko“ ir „webkit“ pagrindu veikiančiose naršyklėse. 
 Pasienio spindulio deklaracija yra labai paprasta ir naudojama suapvalintiems kampams kurti, o 3px atspindi kreivumą. Dėžutės-šešėlinės deklaracijos sintaksė gali atrodyti sudėtinga, bet supjaustykime į mažesnius gabalus, kad geriau suprastume. 
  / * -------- Pasienio spindulys --------- * / -webkit-border-radius: 3px; -moz-border-spindulys: 3px; pasienio spindulys: 3px; / * -------- Dėžutės šešėlis --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); dėžutės šešėlis: 0 0 3px rgba (0,0,0, .2);
 Pirmieji du nuliai rodo x-offsetą ir y-offsetą, o 3px - neryškumą. Kitas yra spalvų deklaracija. Čia naudoju rgba reikšmes; rgba reiškia raudoną žalią ir alfa (neskaidrumą). Taigi skliausteliuose esančios 4 reikšmės rodo raudonos, žalios, mėlynos ir jo alfa (neskaidrumo) kiekį..
  .sukrauti fonas: # f6f6f6; siena: 1px kietas #bbb; aukštis: 300px; paraštė: 50px auto; pozicija: santykinis; plotis: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); dėžutės šešėlis: 0 0 3px rgba (0,0,0, .2); -webkit-border-spindulys: 3px; -moz-border-spindulys: 3px; pasienio spindulys: 3px; 
 Dabar, kai sukūrėme pagrindinę formą, pradėkime su : po ir : anksčiau pseudo elementai. 
  .sukrauti: po, .stacked: prieš fonas: # f6f6f6; siena: 1px kietas #aaa; apačioje: -8px; turinys: "; aukštis: 250 pikselių; kairė: 2px; padėtis: absoliutus; plotis: 394px; z-indeksas: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); moz-box-shadow: 0 0 3px rgba (0,0,0, .2); dėžutės šešėlis: 0 0 3px rgba (0,0,0, .2); -webkit-border-spindulys: 3px; - moz-border-radius: 3px; sienos spindulys: 3px; .stacked: prieš apačioje: -14px; kairėje: 5px; plotis: 388px; -webkit-border-spindulys: 3px; -moz-border-radius: 3px riba: 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);
 Kodas: po ir: prieš pseudo elementus beveik lygiai taip pat, kaip ir aukščiau aptariamame langelyje. Vienintelis svarbus dalykas, kurį reikia pažymėti, yra tas, kad šie pseudo elementai yra visiškai išdėstyti ribojimo dėžutės atžvilgiu. Kiekvienas pseudo elementas yra palaipsniui mažinamas keliais pikseliais, kad būtų rodomas įdėtas popierius.
 4. Įvesties laukai
 HTML žymėjime pridėjome „teksto įvesties“ klasę tiek el. Pašto laukui, tiek slaptažodžių laukui, kad galėtume lengvai nukreipti šiuos elementus į mūsų CSS deklaracijas. Čia yra CSS deklaracija, kuri taikoma abiems įvesties laukams.
  forma input.text-input kontūras: 0; ekranas: blokas; plotis: 330px; pagalvėlė: 8px 15px; siena: 1px kietas; šrifto dydis: 16px; šrifto svoris: 400; -webkit-border-radius: 25px; -moz-border-spindulys: 25px; pasienio spindulys: 25px; dėžutės šešėlis: įdėklas 0 2px 8px rgba (0,0,0,0,3); 
 Čia vėl panaudojome pasienio spindulių ir langelio šešėlių deklaracijas. Teksto laukų atveju sienos spinduliui suteikiama didesnė vertė, kad būtų užtikrintas didesnis kreivumas. Dėžutės šešėlinės deklaracijos atveju raktinis žodis buvo naudojamas norint nurodyti, kad šešėlis bus teksto lauko viduje. Čia šešėlio vertikalus poslinkis yra 2px ir 8px neryškumas, spalva deklaruojama naudojant rgba formatą.
 Jei norite įvesti tam tikrą interaktyvumą į įvesties laukus, pakeisime įvesties lauko „šešėlių“ būsenos laukelį „šešėlis“. Naujos dėžutės šešėlinės deklaracijos yra nulinės x ir y kompensacijos, tačiau 5px neryškumas, o spalva deklaruojama rgba formatu.
 5. Pateikti mygtuką
 Galutinė šios formos dalis, kurią turime užpildyti, yra pateikti mygtuką. Panašiai kaip ir įvesties lauke, siuntimo mygtukui suteiksime 25px spindulį, naudodami sienos spindulio turtą. Taip pat pridėta dėžutės šešėlio ypatybė su 1px y-off, kad būtų suteiktas mygtukas a “vidinis šešėlis” poveikį.
  formos įvedimas [type = 'Submit'] float: right; paminkštinimas: 10px 20px; ekranas: blokas; žymeklis: žymeklis; šrifto dydis: 16px; šrifto svoris: 700; spalva: #fff; teksto šešėlis: 0 1px 0 # 000; fono spalva: # 0074CC; siena: 1px kietas # 05C; -webkit-border-radius: 25px; -moz-border-spindulys: 25px; pasienio spindulys: 25px; fono vaizdas: -moz-linijinis gradientas (viršuje, # 08C, # 05C); fono vaizdas: -ms-linijinis gradientas (viršuje, # 08C, # 05C); fono vaizdas: -webkit-linijinis gradientas (viršuje, # 08C, # 05C); fono paveikslėlis: tiesinis gradientas (viršuje, # 08C, # 05C); -webkit-box-shadow: įterpimas 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: įdėjimas 0 1px 0px rgba (255, 255, 255, 0,5); dėžutės šešėlis: įdėklas 0 1px 0px rgba (255, 255, 255, 0,5); 
 Svarbus dalykas, kurį reikia atkreipti dėmesį, yra deklaracija, skirta šiam mygtukui pridėti gradientą. CSS3 gradientai yra gana didelė tema ir mes tik subraižysime paviršių. Šiam pateikimo mygtukui mes pridėsime linijinį gradientą nuo # 08C iki # 05C. Kaip ir visoms kitoms iki šiol naudojamoms CSS3 ypatybėms, pridėsime „-moz“, „-webkit“ ir „-ms“ tiekėjo priešdėlį, kad užtikrintume, jog gradientas veiktų skirtingose naršyklėse.
 6. Demonstravimas ir atsisiuntimas
 Mūsų prisijungimo forma jau baigta. Patikrinkite demonstraciją, kad pamatytumėte, kaip atrodo užpildyta forma. Jei esate pamestas bet kuriuo momentu arba negalėjote sekti pamoka, nesijaudinkite, tiesiog atsisiųskite failus į savo darbalaukį ir naudokite esamą CSS kodą, kad suprastumėte, kaip jis veikia.
 Tikimės, kad jums patiko ši pamoka. Nesivaržykite eksperimentuoti su šiomis funkcijomis ir nepamirškite pasidalinti savo mintimis.
 Demo
 Parsisiųsti failus
 
Redaktoriaus pastaba: Šį įrašą parašė Bharani M už Hongkiat.com. Bharani yra dizaineris / kūrėjas iš Niu Delis, Indija. Šiuo metu jis dirba „Resumonk.com“ - internetinis atnaujinimo kūrėjas, kuris padeda jums sukurti profesionalų ir gražų atnaujinimą per kelias minutes. Taip pat patikrinkite savo šalutinį projektą - „Quotescube.com“ - kasdieninę citatos kainą.