Oprettelse af en Stacked-Paper Effect Login-formular

Denne artikel er en del af vores "HTML5 / CSS3 Tutorials serie" - dedikeret til at gøre dig til en bedre designer og / eller udvikler. Klik her at se flere artikler fra samme serie.

Login-formularer er en vigtig del af enhver dynamisk hjemmeside. De giver en mekanisme for websitebrugerne at få adgang til begrænset indhold. I denne vejledning vil vi undersøge mange af CSS3-funktionerne som tekstskygge, boksskygge, lineære gradienter og overgange for at skabe en enkel og elegant loginformular med et stablet papirudseende.

Billedet ovenfor viser et eksempel på login-formularen, som vi vil bygge. Klar til at dykke i? Lad os komme igang!

1. Grundlæggende HTML markup

Den HTML-markup, som vi vil bruge, er meget enkel, efter HTML5 Doctype-erklæringen har vi og </code> tags. Indenfor <code><body></code> tag, vi har a <code><section></code> tag med en klasse af 'stablet'. Dette <code><section></code> tag bruges til at definere bredden af indholds boksen og justere den til midten af siden. Vi bruger også dette mærkes klassenavn til at målrette dette tag ved hjælp af CSS. EN <code><form></code> tag følger <code><section></code> tag. Formularetiketten har ikke en gyldig værdi for attributten "Action", da den kun bruges til demonstration. Inde i formularfeltet er erklæringerne for e-mail- og adgangskodeetiketterne og indtastningsfeltet efterfulgt af en send-knap. Det vigtige punkt at bemærke her er, at vi har brugt et inputfelt med en type 'email'. Dette er givet til os af HTML5-erklæringen, og det nedbryder yndefuldt til et almindeligt tekstindtastningsfelt i ældre browsere.</p> <p>Her er hele HTML-markeringen:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Enkelt login formular

  Log på
   E-mail  
   Adgangskode

     Og her er et eksempel på, hvad vi har lavet indtil videre:
  
 2. Tilføjelse af grundlæggende stilarter
 Opret en ny css fil kaldet master.css og tilføj et link til denne fil i din hoved HTML-fil. Vi starter vores CSS-fil med en hurtig nulstilling for at opnå ensartethed på tværs af forskellige browsere. Lad os også tilføje et flot baggrundsbilde til vores side. Det billede, jeg har brugt er taget fra SubtlePatterns. Du er velkommen til at gennemse webstedet for at finde et baggrundsbillede, der passer til din smag. Vi kan tilføje baggrundsbilledet ved hjælp af følgende erklæring. Bemærk også, at jeg bruger Åben Sans skrifttype fra Google Web skrifttype til kropsteksten.
  / * -------- Base Styles --------- * / body, html margin: 0; polstring: 0;  krop baggrund: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") venstre øverste gentagelse; skrifttype: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap bredde: 400px; margin: 80px auto; 
 3. Stacket papir effekt
 Nu da vi har det grundlæggende layout op og kører, lad os komme i gang med at designe formularen. For at opnå den stablede papir effekt, vil vi gøre brug af :efter og :Før pseudo-elementer. Disse pseudoelementer bruges mest til at tilføre visuelle effekter til enhver vælger. 
 Det :Før pseudo-element bruges til at tilføje indhold før vælgerens indhold og :efter pseudo-element til efter en vælgers indhold. 
 Vi starter med at give sektionen med en klasse af 'stablet', en bredde på 400px og en højde på 300px. Desuden vil vi give denne boks en baggrundsfarve på # f6f6f6 og en 1-pixel-tykk kant med farven #bbb. De vigtigste ting, der skal bemærkes her, er grænseradiusdeklarationen og boksskyggeerklæringen. Her er "-moz-" og "-webkit-" browser præfikser blevet brugt til at sikre, at dette virker i gecko og webkit-baserede browsere. 
 Grænsedirektivdeklarationen er meget enkel og bruges til at skabe afrundede hjørner med 3px, der repræsenterer krumningen. Syntaxen til boxskyggedeklarationen kan se kompliceret ud, men lad os bryde den ned i mindre klumper for at forstå det bedre. 
  / * -------- Border Radius --------- * / -webkit-grænse-radius: 3px; -moz-grænse-radius: 3px; grænse-radius: 3px; / * -------- Box Skygge --------- * / -webkit-box-skygge: 0 0 3px rgba (0,0,0, .2); -moz-box-skygge: 0 0 3px rgba (0,0,0, .2); box-skygge: 0 0 3px rgba (0,0,0, .2);
 De to første nul angiver x-offset og y-offset og 3px angiver uskarpheden. Næste er farven deklarationen. Jeg har brugt rgba værdier her; rgba står for rødgrøn blå og alfa (opacitet). Således angiver de 4 værdier inde i parentes mængden af rød, grøn, blå og dens alfa (opacitet).
  .stablet baggrund: # f6f6f6; grænse: 1px solid #bbb; højde: 300px; margin: 50px auto; stilling: relativ; bredde: 400px; -webkit-box-skygge: 0 0 3px rgba (0,0,0, .2); -moz-box-skygge: 0 0 3px rgba (0,0,0, .2); box-skygge: 0 0 3px rgba (0,0,0, .2); -webkit-grænse-radius: 3px; -moz-grænse-radius: 3px; grænse-radius: 3px; 
 Nu hvor vi har oprettet den grundlæggende grænsekasse for formularen, lad os komme i gang med :efter og :Før pseudo-elementer. 
  .stablet: efter, .stacked: før background: # f6f6f6; grænse: 1px solid #aaa; bunden: -8px; indhold: "; højde: 250px; venstre: 2px; position: absolut; 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); bokseskygge: 0 0 3px rgba (0,0,0, .2); -webkit-grænse-radius: 3px; moz-border-radius: 3px; border-radius: 3px; .stacked: før bund: -14px; venstre: 5px; bredde: 388px; -webkit-grænse-radius: 3px; -moz-grænse-radius: 3px grænse-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: efter og: før pseudoelementer er næsten nøjagtigt ligner den af grænsekassen, der er beskrevet ovenfor. Den eneste vigtige ting at bemærke her er, at disse pseudoelementer er placeret helt i forhold til grænsekassen. Hvert af pseudoelementet sænkes gradvist med et par pixels for at give det et stablet papirudseende.
 4. Input Fields
 I HTML-markeringen har vi tilføjet en klasse af 'tekstindtastning' til både emailfeltet og adgangskodefeltet, så vi let kan målrette disse elementer med vores CSS-erklæringer. Her er CSS-deklarationen, der anvendes til både inputfelterne.
  form input.text-input disposition: 0; display: blok; bredde: 330px; polstring: 8px 15px; grænse: 1 stk solid grå; skrifttypestørrelse: 16px; skrifttype-vægt: 400; -webkit-grænse-radius: 25px; -moz-grænse-radius: 25px; grænse-radius: 25px; box-skygge: indsæt 0 2px 8px rgba (0,0,0,0,3); 
 Her har vi igen brugt grænseradius og boksskyggeerklæringer. I tilfælde af tekstfelter får grænseradien en højere værdi for at sikre mere krumning. I tilfælde af boksskyggedeklaration er søgeordets indsæt blevet brugt til at angive, at skyggen vil være inde i tekstfeltet. Her er den vertikale forskydning for skyggen 2px og den har en sløring af 8px, farven erklæres ved hjælp af rgba formatet.
 For at tilføje nogle interaktivitet til indtastningsfelterne ændrer vi boksskyggeegenskaben for indtastningsfeltet på 'svinger' tilstand. Den nye boksskyggedeklaration har nul x og y forskydninger, men har en 5 px uskarphed, hvor farven er angivet i rgba format.
 5. Indsend knap
 Den sidste del af denne formular, som vi skal udfylde, er afsendelsesknappen. I lighed med indtastningsfeltet vil vi give indsenderknappen en radius på 25 px ved hjælp af egenskaben for grænseradius. En box-skyggeegenskab med en y-offset på 1px er også blevet tilføjet for at give knappen an “indre skygge” effekt.
  form input [type = 'submit'] float: højre; polstring: 10px 20px; display: blok; markør: pointer; skrifttypestørrelse: 16px; skrifttype-vægt: 700; farve: #fff; tekstskygge: 0 1px 0 # 000; baggrundsfarve: # 0074CC; grænse: 1px solid # 05C; -webkit-grænse-radius: 25px; -moz-grænse-radius: 25px; grænse-radius: 25px; baggrundsbillede: -moz-lineær-gradient (top, # 08C, # 05C); baggrundsbillede: -ms-lineær gradient (top, # 08C, # 05C); baggrundsbillede: -webkit-lineær-gradient (top, # 08C, # 05C); baggrundsbilde: lineær gradient (top, # 08C, # 05C); -webkit-boks-skygge: indsæt 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-shadow: input 0 1px 0px rgba (255, 255, 255, 0,5); box-skygge: indsæt 0 1px 0px rgba (255, 255, 255, 0,5); 
 Det vigtige at bemærke her er erklæringen for at tilføje graden til denne knap. CSS3 gradienter er et ret stort emne, og vi vil kun klare overfladen. For denne indsende knap tilføjer vi en lineær gradient, der går fra # 08C til # 05C. Som med alle de andre CSS3-egenskaber, som vi har brugt hidtil, tilføjer vi "-moz", "-webkit" og "-ms" leverandørpræfikser for at sikre, at gradienten fungerer på tværs af forskellige browsere.
 6. Demo og Download
 Vores login formular er nu færdig. Tjek demoen for at se, hvordan den udfyldte form ser ud. Hvis du går tabt på et hvilket som helst tidspunkt eller ikke kan følge op med tutorialen, skal du ikke bekymre dig, bare download filerne til skrivebordet og tinker med den eksisterende CSS kode for at forstå, hvordan det virker.
 Håber du nød denne tutorial. Du er velkommen til at eksperimentere med disse funktioner, og glem ikke at dele dine tanker.
 Demo
 Download filer
 
Redaktørens note: Dette indlæg er skrevet af Bharani M til Hongkiat.com. Bharani er designer / udvikler fra New Delhi, Indien. Han arbejder i øjeblikket på Resumonk.com - en online CV-maskine, der hjælper dig med at skabe et professionelt og smukt CV på få minutter. Tjek også sit sideprojekt - Quotescube.com - din daglige dosis af citater.