Pinotun paperin vaikutuksen kirjautumislomakkeen luominen

Tämä artikkeli on osa meidän "HTML5 / CSS3-oppaiden sarja" - omistettu auttamaan sinua parantamaan suunnittelijaa ja / tai kehittäjää. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

Kirjautumislomakkeet ovat olennainen osa dynaamista verkkosivustoa. Ne tarjoavat mekanismin, jolla verkkosivuston käyttäjät voivat käyttää rajoitettua sisältöä. Tässä opetusohjelmassa tutkitaan paljon CSS3-ominaisuuksia, kuten teksti-varjo, laatikko-varjo, lineaariset gradientit ja siirtymät, jolloin luodaan yksinkertainen ja tyylikäs kirjautumislomake, jossa on pinottu paperi..

Yllä oleva kuva näyttää esikatselun sisäänkirjautumislomakkeesta, jota rakennamme. Oletko valmis sukeltamaan? Aloitetaan!

1. Perus HTML-merkintä

HTML-merkintä, jota käytämme, on hyvin yksinkertainen, HTML5 Doctype -ilmoituksen jälkeen meillä on ja </code> tunnisteita. Sisällä <code><body></code> tag, meillä on a <code><section></code> tunniste, jonka luokka on "pinottu". Tämä <code><section></code> tunnistetta käytetään määrittämään sisältölaatikon leveys ja kohdistamaan se sivun keskelle. Käytämme myös tämän tunnisteen luokan nimeä kohdistamalla tämä tunniste CSS: n avulla. <code><form></code> tag seuraa <code><section></code> tag. Lomakkeen tunnisteella ei ole kelvollista arvoa "action" -määritteelle, koska sitä käytetään vain esittelyyn. Lomakekentän sisällä on ilmoitukset sähköposti- ja salasanamerkinnöistä ja syöttökentästä, jota seuraa lähetyspainike. Tässä on tärkeää huomata, että olemme käyttäneet syöttökenttää, jonka tyyppi on "sähköposti". Tämä annetaan meille HTML5-ilmoituksella ja se hajoaa sulavasti vanhojen selaimien tavalliseen tekstinsyöttökenttään.</p> <p>Tässä on koko HTML-merkintä:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Yksinkertainen kirjautumislomake

  Kirjaudu sisään
   Sähköposti  
   Salasana

     Ja tässä on esikatselu siitä, mitä olemme tähän mennessä luoneet:
  
 2. Perustyylien lisääminen
 Luo uusi css-tiedosto, jota kutsutaan master.css ja lisää linkki tähän tiedostoon HTML-päätiedostossasi. Käynnistämme CSS-tiedoston nopean nollauksen avulla, jotta saat selaimille yhdenmukaisuuden. Lisäämme myös mukava taustakuva sivuillemme. Käytetty kuva on otettu SubtlePatterns. Voit vapaasti selata sivustoa etsimään taustakuvan, joka sopii makuun. Voimme lisätä taustakuvan seuraavan ilmoituksen avulla. Huomaa myös, että käytän Avaa Sans fontti kehon tekstin Google-fontista.
  / * -------- Base Styles --------- * / body, html marginaali: 0; pehmuste: 0;  body tausta: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") vasemmalla ylhäällä; fontti: 16px / 1,5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap leveys: 400px; marginaali: 80px auto; 
 3. Pinottu-paperi-vaikutus
 Nyt kun meillä on perusasettelu ja käynnissä, voit aloittaa lomakkeen suunnittelussa. Pinotun paperin vaikutuksen saamiseksi käytämme :jälkeen ja :ennen pseudo-elementtejä. Näitä pseudoelementtejä käytetään enimmäkseen visuaalisten tehosteiden lisäämiseen mihin tahansa valitsimeen. 
  :ennen pseudoelementtiä käytetään sisällön lisäämiseen ennen selektorin sisältöä ja :jälkeen pseudoelementti valinnan sisällön jälkeen. 
 Aloitamme antamalla osio, jossa on "pinottu" luokka, jonka leveys on 400px ja korkeus 300px. Lisäksi annamme tähän ruutuun taustan värin # f6f6f6 ja 1-pikselin paksuinen reunus, jonka väri on #bbb. Tärkeimpiä huomioitavia asioita ovat raja-alueen ilmoitus ja laatikko-varjo-ilmoitus. Täällä "-moz-" ja "-webkit-" selaimen etuliitteitä on käytetty varmistamaan, että tämä toimii gecko- ja webkit-pohjaisissa selaimissa. 
 Raja-säde-ilmoitus on hyvin yksinkertainen ja sitä käytetään muodostamaan pyöristetyt kulmat, joissa 3px edustaa kaarevuutta. Laatikko-varjostuksen syntaksi saattaa näyttää monimutkaiselta, mutta murtautuuko se pienempiin paloihin ymmärtääkseen sen paremmin. 
  / * -------- Rajan säde --------- * / -webkit-raja-säde: 3px; -moz-border-säde: 3px; raja-säde: 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);
 Kaksi ensimmäistä nollaa ilmaisevat x-offsetin ja y-offsetin ja 3px ilmaisee hämärtymisen. Seuraavaksi on väriilmoitus. Olen käyttänyt rgba-arvoja täällä; rgba on punainen vihreä sininen ja alfa (opasiteetti). Siten sulkeissa olevat neljä arvoa osoittavat punaisen, vihreän, sinisen ja sen alfa (opasiteetti) määrän.
  .pinottu tausta: # f6f6f6; raja: 1px kiinteä #bbb; korkeus: 300px; marginaali: 50px auto; asema: suhteellinen; leveys: 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-säde: 3px; raja-säde: 3px; 
 Nyt kun olemme luoneet lomakkeen perusrajoituskentän, aloitetaan :jälkeen ja :ennen pseudo-elementit. 
  .pinottu: sen jälkeen, .stacked: ennen tausta: # f6f6f6; raja: 1px kiinteä #aaa; pohja: -8px; sisältö: "; korkeus: 250px; vasen: 2px; sijainti: absoluuttinen; leveys: 394px; z-indeksi: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); moz-box-shadow: 0 0 3px rgba (0,0,0, .2), laatikko-varjo: 0 0 3px rgba (0,0,0, .2); -webkit-raja-säde: 3px; moz-border-radius: 3px; raja-säde: 3px; .stacked: ennen pohja: -14px; vasen: 5px; leveys: 388px; -webkit-border-säde: 3px; -moz-border-radius: 3px raja-säde: 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);
 Koodi: jälkeen ja: ennen kuin pseudoelementit ovat lähes täsmälleen samanlaisia kuin edellä kuvatun rajauslaatikon. Ainoa tärkeä huomata tässä on se, että nämä pseudoelementit on sijoitettu ehdottomasti suhteessa rajauslaatikkoon. Jokainen pseudoelementti alenee vähitellen muutamalla pikselillä, jotta se näyttää pinotun paperin.
 4. Syöttökentät
 HTML-merkinnässä olemme lisänneet sekä tekstikentän luokan että sähköpostiosoitteen ja salasanan kentän, jotta voimme helposti kohdistaa nämä elementit CSS-ilmoituksillamme. Tässä on CSS-ilmoitus, jota sovelletaan molempiin syöttökenttiin.
  lomake input.text-input outline: 0; näyttö: lohko; leveys: 330px; pehmuste: 8px 15px; raja: 1kpl kiinteä harmaa; kirjasinkoko: 16px; font-paino: 400; -webkit-border-radius: 25px; -moz-border-säde: 25px; raja-säde: 25px; laatikko-varjo: upotettu 0 2px 8px rgba (0,0,0,0.3); 
 Tässäkin olemme jälleen käyttäneet raja-radius- ja laatikko-varjo-ilmoituksia. Tekstikenttien tapauksessa raja-säteelle annetaan suurempi arvo kaarevuuden lisäämiseksi. Jos kyseessä on laatikko-varjo-ilmoitus, avainsanan sisäpuolella on määritetty, että varjo on tekstikentän sisällä. Tällöin varjon pystysuuntainen siirtymä on 2 pikseliä ja sen hämärtyminen on 8px, väri ilmoitetaan rgba-muodossa.
 Jos haluat lisätä jonkin verran vuorovaikutteisuutta syöttökenttiin, muutamme syöttökentän ruutu-varjo-ominaisuutta hover-tilassa. Uudessa laatikko-varjo-ilmoituksessa on nolla x- ja y-poikkeama, mutta siinä on 5-kertainen epätarkkuus, ja väri ilmoitetaan rgba-muodossa.
 5. Lähetä painike
 Tämän lomakkeen viimeinen osa, joka meidän on täytettävä, on Lähetä-painike. Samoin kuin syöttökenttään, annamme lähetyspainikkeelle 25px: n säteen raja-säteen ominaisuudella. Painikkeelle an on myös lisätty laatikko-varjo-ominaisuus, jonka y-offset on 1px “sisäinen varjo” vaikutus.
  lomakkeen syöttö [type = 'Submit'] float: right; pehmuste: 10px 20px; näyttö: lohko; kohdistin: osoitin; kirjasinkoko: 16px; kirjasinpaino: 700; väri: #fff; teksti-varjo: 0 1px 0 # 000; taustaväri: # 0074CC; raja: 1px kiinteä # 05C; -webkit-border-radius: 25px; -moz-border-säde: 25px; raja-säde: 25px; taustakuva: -moz-linear-gradient (alkuun, # 08C, # 05C); taustakuva: -ms-linear-gradient (alkuun, # 08C, # 05C); taustakuva: -webkit-lineaarinen gradientti (alkuun, # 08C, # 05C); taustakuva: lineaarinen gradientti (alkuun, # 08C, # 05C); -webkit-box-shadow: upotetaan 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: upotetaan 0 1px 0px rgba (255, 255, 255, 0,5); laatikko-varjo: upotettu 0 1px 0px rgba (255, 255, 255, 0,5); 
 Tärkeä asia on huomata, että gradientti lisätään tähän painikkeeseen. CSS3-kaltevuudet ovat melko suuri aihe ja raapuamme vain pintaa. Tätä lähetyspainiketta varten lisätään lineaarinen gradientti, joka alkaa # 08C: stä # 05C. Kuten kaikkien muiden tähän mennessä käyttämiemme CSS3-ominaisuuksien tavoin, lisätään "-moz", "-webkit" ja "-ms" -toimittajan etuliitteitä varmistaaksemme, että gradientti toimii eri selaimissa.
 6. Demo ja lataus
 Sisäänkirjautumislomake on nyt valmis. Tutustu demoon nähdäksesi, miten täytetty lomake näyttää. Jos olet kadonnut missä tahansa vaiheessa tai et voi seurata opetusohjelmaa, älä huolehdi, lataa tiedostot työpöydällesi ja peitä nykyinen CSS-koodi ymmärtääksesi, miten se toimii.
 Toivottavasti nautit tästä opetusohjelmasta. Voit kokeilla näitä ominaisuuksia ja älä unohda jakaa ajatuksiasi.
 esittely
 Lataa tiedostot
 
Toimittajan huomautus: Tämä viesti on kirjoittanut Bharani M varten Hongkiat.com. Bharani on suunnittelija / kehittäjä New Delhistä, Intiasta. Hän työskentelee parhaillaan Resumonk.com-sivustolla - online-jälleenrakentaja, joka auttaa sinua luomaan ammattimaisen ja kauniin palautuksen muutamassa minuutissa. Tarkista myös hänen sivuprojekti - Quotescube.com - päivittäinen lainausannos.