Opprette en Stacked-Paper Effect Login-skjema

Denne artikkelen er en del av vår "HTML5 / CSS3 opplæringsserie" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her å se flere artikler fra samme serie.

Innloggingsskjema er en viktig del av et dynamisk nettsted. De gir en mekanisme for nettsidebrukere å få tilgang til begrenset innhold. I denne opplæringen vil vi undersøke mange av CSS3-funksjonene som tekstskygge, boksskygge, lineære gradienter og overganger for å lage et enkelt og elegant påloggingsskjema med et stablet papirutseende.

Bildet over viser en forhåndsvisning av innloggingsskjemaet som vi skal bygge. Klar til å dykke inn? La oss komme i gang!

1. Grunnleggende HTML markup

HTML-oppslaget vi vil bruke er veldig enkelt, etter HTML5 Doctype-deklarasjonen, har vi og </code> tags. Innen <code><body></code> tag, vi har a <code><section></code> tag med en klasse av 'stablet'. Dette <code><section></code> tag brukes til å definere bredden på innholdsruten og justere den til midten av siden. Vi bruker også denne taggenes klassenavn til å målrette denne taggen ved hjelp av CSS. EN <code><form></code> tag følger <code><section></code> stikkord. Skjemaetiketten har ikke en gyldig verdi for attributten, siden den bare brukes til demonstrasjon. Inne i skjemafelt er erklæringene for e-post og passordetiketter og inntastingsfelt, etterfulgt av en send-knapp. Det viktige punktet å merke seg her er at vi har brukt et inputfelt med en type 'e-post'. Dette er gitt til oss av HTML5-deklarasjonen, og det nedbrytes grasiøst til et vanlig tekstfelt i eldre nettlesere.</p> <p>Her er hele HTML-oppslaget:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Enkel påloggingsskjema

  Logg Inn
   e-post  
   Passord

     Og her er en forhåndsvisning av hva vi har opprettet så langt:
  
 2. Legge til grunnleggende stiler
 Opprett en ny css-fil som heter master.css og legg til en lenke til denne filen i hoved HTML-filen din. Vi starter vår CSS-fil med en rask tilbakestilling for å oppnå ensartethet på tvers av forskjellige nettlesere. La oss også legge til et fint bakgrunnsbilde til vår side. Bildet jeg har brukt er tatt fra SubtlePatterns. Du er velkommen til å bla gjennom nettstedet for å finne et bakgrunnsbilde som passer til din smak. Vi kan legge til bakgrunnsbildet ved hjelp av følgende erklæring. Vær også oppmerksom på at jeg bruker Åpne Sans skrifttype fra Google Web Font for kroppens tekst.
  / * -------- Base Styles --------- * / body, html margin: 0; polstring: 0;  kropp bakgrunn: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") venstre topprepetisjon; font: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; margin: 80px auto; 
 3. Stacket papir-effekt
 Nå som vi har grunnleggende oppsett oppe, kan vi komme i gang med å designe skjemaet. For å få tak i stablet papir-effekten, vil vi gjøre bruk av :etter og :før pseudo-elementer. Disse pseudoelementene brukes for det meste til å legge til visuelle effekter til en hvilken som helst velger. 
 De :før pseudo-element brukes til å legge til innhold før velgerens innhold og :etter pseudo-element for etter en velgeres innhold. 
 Vi begynner med å gi seksjonen, med en klasse av 'stablet', en bredde på 400px og en høyde på 300px. Videre vil vi gi denne boksen en bakgrunnsfarge på # f6f6f6 og en 1-pixel tykk kantlinje med fargen #bbb. Viktige ting å merke seg her er grensedireksjonsdeklarasjonen og boksskyggedeklarasjonen. Her, "-moz-" og "-webkit-" nettleserprefikser har blitt brukt for å sikre at dette fungerer i gecko- og webkitbaserte nettlesere. 
 Ramme-radiusdeklarasjonen er veldig enkel og brukes til å lage avrundede hjørner, med 3px som representerer krumningen. Syntaxen for boksskyggedeklarasjonen kan se komplisert ut, men la oss bryte den ned i mindre biter for å forstå det bedre. 
  / * -------- Border Radius --------- * / -webkit-border-radius: 3px; -moz-grense-radius: 3px; border-radius: 3px; / * -------- Box Skygge --------- * / -webkit-boks-skygge: 0 0 3px rgba (0,0,0, .2); -moz-boks-skygge: 0 0 3px rgba (0,0,0, .2); boksskygge: 0 0 3px rgba (0,0,0, .2);
 De to første nullene angir x-offset og y-offset og 3px indikerer uskarphet. Neste er fargedeklarasjonen. Jeg har brukt rgba verdier her; rgba står for rødgrønn blå og alfa (opasitet). Dermed angir de 4 verdiene inne i parentes mengden rød, grønn, blå og alfa (opasitet).
  .stablet bakgrunn: # f6f6f6; grense: 1px solid #bbb; høyde: 300px; margin: 50px auto; posisjon: relativ; bredde: 400px; -webkit-boks-skygge: 0 0 3px rgba (0,0,0, .2); -moz-boks-skygge: 0 0 3px rgba (0,0,0, .2); boksskygge: 0 0 3px rgba (0,0,0, .2); -webkit-grense-radius: 3px; -moz-grense-radius: 3px; border-radius: 3px; 
 Nå som vi har opprettet den grunnleggende begrensingsboksen for skjemaet, la oss komme i gang med :etter og :før pseudo-elementer. 
  .stablet: etter, .stacked: før bakgrunn: # f6f6f6; grense: 1px solid #aaa; bunn: -8px; innhold: "; høyde: 250px; venstre: 2px; posisjon: absolutt; bredde: 394px; z-indeks: -10; -webkit-boks-skygge: 0 0 3px rgba (0,0,0, .2); moz-box-skygge: 0 0 3px rgba (0,0,0, .2); boks-skygge: 0 0 3px rgba (0,0,0, .2); -webkit-grense-radius: 3px; bredde: 3px; grense-radius ; border-radius: 3px; -webkit-boks-skygge: 0 0 15px rgba (0,0,0,0,5); -moz-boks-skygge: 0 0 15px rgba (0,0,0,0,5); boks -skygge: 0 0 15px rgba (0,0,0,0,5);
 Koden for: etter og: før pseudo-elementene er nesten nøyaktig lik den av grenseboksen som er omtalt ovenfor. Det eneste viktige å merke seg her er at disse pseudoelementene er posisjonert helt i forhold til grenseboksen. Hvert av pseudoelementet senkes gradvis med noen få piksler for å gi det et stablet papirutseende.
 4. Input Fields
 I HTML-oppslaget har vi lagt til en klasse med «tekstinngang» til både e-postfeltet og passordfeltet slik at vi enkelt kan målrette disse elementene med våre CSS-deklarasjoner. Her er CSS-deklarasjonen som brukes på begge feltene.
  form input.text-input disposisjon: 0; skjerm: blokk; bredde: 330px; polstring: 8px 15px; grense: 1px solid grå; skriftstørrelse: 16px; font-weight: 400; -webkit-grense-radius: 25px; -moz-grense-radius: 25px; border-radius: 25px; boks-skygge: innsett 0 2px 8px rgba (0,0,0,0,3); 
 Her har vi igjen gjort bruk av grensestrekningen og boksskyggedeklarasjonen. Når det gjelder tekstfelter, blir grense-radiusen gitt en høyere verdi for å sikre mer krumning. Når det gjelder boksskyggedeklarasjon, har søkeordinnsatsen blitt brukt til å angi at skyggen vil være inne i tekstfeltet. Her er den vertikale forskyvningen for skyggen 2px og den har en uklarhet på 8px, fargen blir deklarert ved hjelp av rgba formatet.
 For å legge til noe interaktivitet i inntastingsfeltene, vil vi endre boksskyggeegenskapen for inntastingsfeltet på "hover" -tilstand. Den nye boks-skyggedeklarasjonen har null x og y offsets, men har en 5px uskarphet, med fargen som deklareres i rgba format.
 5. Send inn knapp
 Den siste delen av dette skjemaet som vi må fullføre er innleveringsknappen. I likhet med inngangsfeltet, vil vi gi innleverings-knappen en radius på 25 px ved hjelp av grensen-radiusegenskapen. En boksskyggeegenskap med y-offset på 1px er også lagt til for å gi knappen an “indre skygge” effekt.
  form input [type = 'submit'] float: right; polstring: 10px 20px; skjerm: blokk; markør: pointer; skriftstørrelse: 16px; font-weight: 700; farge: #fff; tekstskygge: 0 1px 0 # 000; bakgrunnsfarge: # 0074CC; grense: 1px solid # 05C; -webkit-grense-radius: 25px; -moz-grense-radius: 25px; border-radius: 25px; bakgrunnsbilde: -moz-lineær-gradient (topp, # 08C, # 05C); bakgrunnsbilde: -ms-lineær-gradient (topp, # 08C, # 05C); bakgrunnsbilde: -webkit-lineær-gradient (topp, # 08C, # 05C); bakgrunnsbilde: lineær gradient (topp, # 08C, # 05C); -webkit-boks-skygge: innsett 0 1px 0px rgba (255, 255, 255, 0,5); -moz-boks-skygge: innsett 0 1px 0px rgba (255, 255, 255, 0,5); boks-skygge: innsett 0 1px 0px rgba (255, 255, 255, 0,5); 
 Det viktige å merke seg her er erklæringen for å legge til gradienten til denne knappen. CSS3-gradienter er et ganske stort emne, og vi vil bare skrape overflaten. For denne innleveringsknappen vil vi legge til en lineær gradient som går fra # 08C til # 05C. Som med alle de andre CSS3-egenskapene vi har brukt hittil, legger vi til "-moz", "-webkit" og "-ms" leverandørprefikser for å sikre at gradienten fungerer over forskjellige nettlesere.
 6. Demo og Download
 Vårt påloggingsskjema er nå fullført. Ta en titt på demoen for å se hvordan det utfylte skjemaet ser ut. Hvis du går tapt når som helst eller ikke kan følge opp med opplæringen, ikke bekymre deg, bare last ned filene til skrivebordet ditt og tinker med den eksisterende CSS-koden for å forstå hvordan det fungerer.
 Håper du likte denne opplæringen. Prøv å eksperimentere med disse funksjonene og ikke glem å dele tankene dine.
 Demo
 Last ned filer
 
Redaktørens notat: Dette innlegget er skrevet av Bharani M for Hongkiat.com. Bharani er en designer / utvikler fra New Delhi, India. Han jobber for tiden på Resumonk.com - en online gjenoppbygger som hjelper deg med å skape et profesjonelt og vakkert CV på få minutter. Sjekk også hans sideprosjekt - Quotescube.com - din daglige dose av sitater.