Skapa en inloggningsformulär med staplad papperseffekt

Denna artikel är en del av vår "HTML5 / CSS3 Tutorials-serien" - dedikerad till att göra dig till en bättre designer och / eller utvecklare. Klicka här att se fler artiklar från samma serie.

Inloggningsformulär är en viktig del av en dynamisk webbplats. De tillhandahåller en mekanism för webbplatsanvändare att få tillgång till begränsat innehåll. I denna handledning utforskar vi många av CSS3-funktioner som textskuggning, boxskuggning, linjära gradienter och övergångar för att skapa en enkel och elegant inloggningsform med ett staplat papperslook.

Bilden ovan visar en förhandsvisning av inloggningsformuläret som vi kommer att bygga. Klar att dyka in? Låt oss börja!

1. Grundläggande HTML-markup

HTML-markupen som vi ska använda är mycket enkel, efter HTML5 Doctype-deklarationen har vi och </code> taggar. Inom <code><body></code> tagg, vi har a <code><section></code> tagg med en klass av "staplade". Detta <code><section></code> tagg används för att definiera bredden på innehållsrutan och justera den till mitten av sidan. Vi använder också den här taggens klassnamn för att rikta den här taggen med CSS. en <code><form></code> taggen följer <code><section></code> märka. Formuläret har inte ett giltigt värde för attributet "Action", eftersom det bara används för demonstration. Inne i formulärfältet är deklarationerna för e-post och lösenordsetiketter och inmatningsfält, följt av en inlämningsknapp. Den viktiga punkten att notera här är att vi har använt ett inmatningsfält med en typ av "email". Detta tillhandahålls av oss av HTML5-deklarationen och det bryts graciöst till ett vanligt textfält i äldre webbläsare.</p> <p>Här är hela HTML-markupen:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Enkel inloggningsformulär

  Logga in
   E-post  
   Lösenord

     Och här är en förhandsgranskning av vad vi hittills har skapat:
  
 2. Lägga till grundläggande stilar
 Skapa en ny css-fil som heter master.css och lägg till en länk till den här filen i din huvudsakliga HTML-fil. Vi startar vår CSS-fil med en snabb återställning för att få enhetlighet över olika webbläsare. Låt oss också lägga till en fin bakgrundsbild till vår sida. Den bild som jag har använt har tagits från SubtlePatterns. Titta gärna på webbplatsen för att hitta en bakgrundsbild som passar din smak. Vi kan lägga till bakgrundsbilden med hjälp av följande deklaration. Observera också att jag använder Öppna Sans teckensnitt från Google Web Font för kroppstexten.
  / * -------- Basstilar --------- * / body, html margin: 0; vaddering: 0;  kropp bakgrund: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") vänster upprepning; font: 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; marginal: 80px auto; 
 3. Stackad papperseffekt
 Nu när vi har den grundläggande layouten igång, kan vi börja med att utforma formuläret. För att få fram stapladpapperseffekten kommer vi att utnyttja :efter och :innan pseudo-element. Dessa pseudoelement används mest för att lägga till visuella effekter på valfri väljare. 
 De :innan pseudo-element används för att lägga till innehåll innan väljarens innehåll och :efter pseudo-element för efter en väljare innehåll. 
 Vi börjar med avsnittet, med en klass av "staplad", en bredd på 400px och en höjd på 300px. Vidare kommer vi att ge den här rutan en bakgrundsfärg på # f6f6f6 och en 1-pixel tjock kant med färgen #bbb. De viktigaste sakerna att notera här är gränsdirektivdeklarationen och boxskuggdeklarationen. Här, "-moz-" och "-webkit-" webbläsarprefix har använts för att säkerställa att detta fungerar i gecko- och webbkitbaserade webbläsare. 
 Gränsradiedeklarationen är mycket enkel och används för att skapa rundade hörn, med 3px som representerar krökningen. Syntaxen för boxskuggdeklarationen kan se komplicerad ut, men låt oss bryta ner den i mindre bitar för att förstå det bättre. 
  / * -------- Border Radius --------- * / -webkit-border-radius: 3px; -moz-gränsen-radien: 3px; gränsstråle: 3px; / * -------- Box Shadow --------- * / -webkit-box-skugga: 0 0 3px rgba (0,0,0, .2); -moz-box-skugga: 0 0 3px rgba (0,0,0, .2); boxskugga: 0 0 3px rgba (0,0,0, .2);
 De två första nollarna anger x-offset och y-offset och 3px indikerar oskärpa. Nästa är färgdeklarationen. Jag har använt rgba värden här; rgba står för röd grönblå och alfa (opacitet). Således anger de fyra värdena inom parentes mängden rött, grönt, blått och dess alfa (opacitet).
  .staplade bakgrund: # f6f6f6; gräns: 1px solid #bbb; höjd: 300px; marginal: 50px auto; position: relativ; bredd: 400px; -webkit-box-skugga: 0 0 3px rgba (0,0,0, .2); -moz-box-skugga: 0 0 3px rgba (0,0,0, .2); boxskugga: 0 0 3px rgba (0,0,0, .2); -webkit-gränsen-radien: 3px; -moz-gränsen-radien: 3px; gränsstråle: 3px; 
 Nu när vi har skapat den grundläggande gränsen för formuläret, låt oss komma igång med :efter och :innan pseudo-element. 
  .staplade: efter, .stacked: före background: # f6f6f6; gränsen: 1px solid #aaa; botten: -8px; innehåll: "; höjd: 250px; vänster: 2px; position: absolut; bredd: 394px; z-index: -10; -webkit-box-skugga: 0 0 3px rgba (0,0,0, .2); moz-box-skugga: 0 0 3px rgba (0,0,0, .2); box-skugga: 0 0 3px rgba (0,0,0, .2); -webkit-gräns-radien: 3px; moz-border-radius: 3px; border-radius: 3px; .ackad: före botten: -14px; vänster: 5px; bredd: 388px; -webkit-gränsen-radien: 3px; -moz-gränsen-radien: 3px , gränsstråle: 3px; -webkit-box-skugga: 0 0 15px rgba (0,0,0,0,5); -moz-box-skugga: 0 0 15px rgba (0,0,0,0,5); box -skugga: 0 0 15px rgba (0,0,0,0,5);
 Koden för: efter och: före pseudoelementen är nästan exakt samma som för den ovan angivna gränsen. Det enda som är viktigt att notera här är att dessa pseudoelement är placerade helt i förhållande till gränsen. Var och en av pseudoelementet sänks gradvis med några pixlar för att ge det ett staplat pappersutseende.
 4. Inmatningsfält
 I HTML-uppräkningen har vi lagt till en klass av "textinmatning" till både e-postfältet och lösenordsfältet så att vi enkelt kan rikta dessa element med våra CSS-deklarationer. Här är CSS-deklarationen som tillämpas på båda inmatningsfälten.
  form input.text-input disposition: 0; display: block; bredd: 330px; vaddering: 8px 15px; gräns: 1px solid grå; typsnittstorlek: 16px; font-vikt: 400; -webkit-gräns-radie: 25px; -moz-gränsen-radien: 25px; gränslinjen: 25px; boxskugga: inset 0 2px 8px rgba (0,0,0,0,3); 
 Här har vi återigen använt gränserna och boxskuggdeklarationerna. När det gäller textfält får gränsstrålen ett högre värde för att säkerställa mer krökning. När det gäller boxskuggdeklaration har nyckelordets insats använts för att ange att skuggan kommer att finnas inuti textfältet. Här är den vertikala förskjutningen för skuggan 2px och den har en suddighet på 8px, färgen förklaras med rgba-formatet.
 För att lägga till en del interaktivitet i inmatningsfälten kommer vi att ändra boxskuggegenskapen för inmatningsfältet "hover" -status. Den nya boxskuggdeklarationen har noll x och y förskjutningar men har en 5px oskärpa, med färgen förklarad i rgba-format.
 5. Skicka knapp
 Den sista delen av denna blankett som vi måste fylla i är Skicka-knappen. På samma sätt som inmatningsfältet kommer vi att ge inlämningsknappen en radie av 25 px med egenskapen för radieradien. En box-skuggegenskap med en y-offset på 1px har också lagts till för att ge knappen an “inre skugga” effekt.
  form inmatning [typ = 'submit'] float: right; vaddering: 10px 20px; display: block; markör: pekare; typsnittstorlek: 16px; font-vikt: 700; färg: #fff; textskugga: 0 1px 0 # 000; bakgrundsfärg: # 0074CC; gräns: 1px fast # 05C; -webkit-gräns-radie: 25px; -moz-gränsen-radien: 25px; gränslinjen: 25px; bakgrundsbild: -moz-linjär-gradient (topp, # 08C, # 05C); bakgrundsbild: -ms-linjär gradient (topp, # 08C, # 05C); bakgrundsbild: -webkit-linjär-gradient (topp, # 08C, # 05C); bakgrundsbild: linjär gradient (topp, # 08C, # 05C); -webkit-box-skugga: inset 0 1px 0px rgba (255, 255, 255, 0,5); -moz-box-skugga: inset 0 1px 0px rgba (255, 255, 255, 0,5); boxskugga: inset 0 1px 0px rgba (255, 255, 255, 0,5); 
 Det viktiga att notera här är deklarationen för att lägga till lutningen till den här knappen. CSS3-gradienter är ett ganska stort ämne och vi kommer bara att skrapa ytan. För denna inlämningsknapp lägger vi till en linjär gradient som går från # 08C till # 05C. Precis som med alla andra CSS3-egenskaper som vi hittills har använt lägger vi till "-moz", "-webkit" och "-ms" leverantörs prefix för att säkerställa att lutningen fungerar över olika webbläsare.
 6. Demo och Download
 Vår inloggningsblankett är nu klar. Kolla in demoen för att se hur den färdiga blanketten ser ut. Om du är borttappad när som helst eller inte kunde följa upp handledningen, oroa dig inte, bara ladda ner filerna till skrivbordet och tinker med den befintliga CSS-koden för att förstå hur det fungerar.
 Hoppas du njöt av denna handledning. Gärna experimentera med dessa funktioner och glöm inte att dela med dig av dina tankar.
 demo
 Hämta filer
 
Redaktörens anteckning: Det här inlägget är skrivet av Bharani M för Hongkiat.com. Bharani är en designer / utvecklare från New Delhi, Indien. Han arbetar för närvarande på Resumonk.com - en online-återuppbyggare som hjälper dig att skapa en professionell och vacker CV på några minuter. Kolla även på hans sidoprojekt - Quotescube.com - din dagliga dos av citat.