Bygg en rask og elegant innloggingsskjema

I dag skal vi kode opp Orman Clarks elegante innloggingsskjema med CSS3 og HTML5, samt noen av Dan Edens CSS-animasjoner for å pynte opplevelsen.

Denne opplæringen antar en viss forståelse av HTML / CSS fra deg; vi kommer til å bevege seg ganske fort. Ok la oss gå!

---

Trinn 1: HTML-merkingen

Vi starter med å knytte til stilarkene våre i hodet til dokumentet vårt. Vi har et tilbakestilt stilark for å bringe alt tilbake til null, Dan Eden's animate.css som vi skal bruke til litt morsom animasjon senere, og våre egne styles.css hvor vi skal bære vårt meste av arbeidet vårt.

Kjøttet i HTML-en inneholder en beholder, et skjema og noen innganger.

    
 
 Brukernavn:  Passord: 
Glemt passordet?
  
 Hold meg innlogget  
 
 
   

---

Trinn 3: Plassering av elementene

Nå som vi har skrevet HTML-oppslaget vårt, kan vi gå videre til css. Vi vil først angi grunnleggende, plassering av vårt containerelement i midten av siden.

 / * Grunnleggende * / html, kropp bredde: 100%; høyde: 100%; font-familie: "Helvetica Neue", Helvetica, sans-serif; farge: # 444; -webkit-font-utjevning: antialiased; bakgrunn: # f0f0f0;  #container posisjon: fast; bredde: 340px; høyde: 280px; topp: 50%; venstre: 50%; margin-topp: -140px; margin-venstre: -170px; 

Nå legger vi til noen strukturelle stiler til innganger og andre elementer:

 skjema margin: 0 auto; margin-topp: 20px;  label color: # 555; display: inline-block; margin-venstre: 18px; polstring: 10px; skriftstørrelse: 14px;  p a font-size: 11px; farge: #aaa; flyte: høyre; margin-topp: -13px; margin-høyre: 20px;  p a: svever farge: # 555;  input font-family: "Helvetica Neue", Helvetica, sans-serif; skriftstørrelse: 12px; oversikt: ingen;  skriv inn [type = tekst], skriv inn [type = passord] farge: # 777; polstring-venstre: 10px; margin: 10px; margin-topp: 12px; margin-venstre: 18px; bredde: 290px; høyde: 35px;  #lower background: # ecf2f5; bredde: 100%; høyde: 69px; margin-topp: 20px;  input [type = boks] margin-left: 20px; margin-topp: 30px;  .check margin-left: 3px;  input [type = submit] float: right; margin-høyre: 20px; margin-topp: 20px; bredde: 80px; høyde: 30px; 

---

Trinn 4: Styling Elements

Elementene er plassert perfekt. Nå er det på tide å få dem til å se vakkert ut! Først skal vi style beholderen ved å gi det subtilt avrundede hjørner og en bokseskygge for dybde.

 #container posisjon: fast; bredde: 340px; høyde: 280px; topp: 50%; venstre: 50%; margin-topp: -140px; margin-venstre: -170px; bakgrunn: #fff; border-radius: 3px; grense: 1px solid #ccc; boksskygge: 0 1px 2px rgba (0, 0, 0, .1); 

Deretter får inngangene lik behandling, med litt grenseradius og bokseskygger. Vi gir innleveringsknappen en gradientbakgrunn, med et solidt bakgrunnsfarge å imøtekomme IE9 og tidligere. Legg merke til at vi målretter mot hver enkelt inngangstype enkeltvis med css-attributtvelektorer.

 skjema margin: 0 auto; margin-topp: 20px;  label color: # 555; display: inline-block; margin-venstre: 18px; polstring: 10px; skriftstørrelse: 14px;  p a font-size: 11px; farge: #aaa; flyte: høyre; margin-topp: -13px; margin-høyre: 20px;  p a: svever farge: # 555;  input font-family: "Helvetica Neue", Helvetica, sans-serif; skriftstørrelse: 12px; oversikt: ingen;  skriv inn [type = tekst], skriv inn [type = passord] farge: # 777; polstring-venstre: 10px; margin: 10px; margin-topp: 12px; margin-venstre: 18px; bredde: 290px; høyde: 35px; grense: 1px solid # c7d0d2; border-radius: 2px; boks-skygge: innsett 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8;  #lower background: # ecf2f5; bredde: 100%; høyde: 69px; margin-topp: 20px; boks-skygge: innsett 0 1px 1px #fff; border-top: 1px solid #ccc; grense bunn-høyre-radius: 3px; Grense nederst-venstre-radius: 3px;  input [type = boks] margin-left: 20px; margin-topp: 30px;  .check margin-left: 3px; skriftstørrelse: 11px; farge: # 444; tekstskygge: 0 1px 0 #fff;  input [type = submit] float: right; margin-høyre: 20px; margin-topp: 20px; bredde: 80px; høyde: 30px; skriftstørrelse: 14px; font-weight: bold; farge: #fff; bakgrunnsfarge: # acd6ef; / * IE fallback * / background-image: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# acd6ef) til (# 6ec2e8)); bakgrunnsbilde: -moz-lineær-gradient (øverst til venstre 90deg, # acd6ef 0%, # 6ec2e8 100%); bakgrunnsbilde: lineær gradient (øverst til venstre 90deg, # acd6ef 0%, # 6ec2e8 100%); border-radius: 30px; grense: 1px solid # 66add6; boksskygge: 0 1px 2px rgba (0, 0, 0, .3), innsett 0 1px 0 rgba (255, 255, 255, .5); markør: pointer; 

For å hjelpe brukerens tilbakemelding kan vi gjøre med noen svinger og aktive stater:

 skjema margin: 0 auto; margin-topp: 20px;  label color: # 555; display: inline-block; margin-venstre: 18px; polstring: 10px; skriftstørrelse: 14px;  p a font-size: 11px; farge: #aaa; flyte: høyre; margin-topp: -13px; margin-høyre: 20px; -webkit-overgang: alle .4s enkelhet; -moz-overgang: alle .4s enkelhet; overgang: alle .4s enkelhet;  p a: svever farge: # 555;  input font-family: "Helvetica Neue", Helvetica, sans-serif; skriftstørrelse: 12px; oversikt: ingen;  skriv inn [type = tekst], skriv inn [type = passord] farge: # 777; polstring-venstre: 10px; margin: 10px; margin-topp: 12px; margin-venstre: 18px; bredde: 290px; høyde: 35px; grense: 1px solid # c7d0d2; border-radius: 2px; boks-skygge: innsett 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -webkit-overgang: alle .4s enkelhet; -moz-overgang: alle .4s enkelhet; overgang: alle .4s enkelhet;  input [type = tekst]: svever, input [type = passord]: svever grense: 1px solid # b6bfc0; boks-skygge: innsett 0 1.5px 3px rgba (190, 190, 190, .7), 0 0 0 5px # f5f7f8;  input [type = tekst]: fokus, input [type = passord]: fokus grense: 1px solid # a8c9e4; boksskygge: innsett 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # e6f2f9;  #lower background: # ecf2f5; bredde: 100%; høyde: 69px; margin-topp: 20px; boks-skygge: innsett 0 1px 1px #fff; border-top: 1px solid #ccc; grense bunn-høyre-radius: 3px; Grense nederst-venstre-radius: 3px;  input [type = boks] margin-left: 20px; margin-topp: 30px;  .check margin-left: 3px; skriftstørrelse: 11px; farge: # 444; tekstskygge: 0 1px 0 #fff;  input [type = submit] float: right; margin-høyre: 20px; margin-topp: 20px; bredde: 80px; høyde: 30px; skriftstørrelse: 14px; font-weight: bold; farge: #fff; bakgrunnsfarge: # acd6ef; / * IE fallback * / background-image: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# acd6ef) til (# 6ec2e8)); bakgrunnsbilde: -moz-lineær-gradient (øverst til venstre 90deg, # acd6ef 0%, # 6ec2e8 100%); bakgrunnsbilde: lineær gradient (øverst til venstre 90deg, # acd6ef 0%, # 6ec2e8 100%); border-radius: 30px; grense: 1px solid # 66add6; boksskygge: 0 1px 2px rgba (0, 0, 0, .3), innsett 0 1px 0 rgba (255, 255, 255, .5); markør: pointer;  input [type = submit]: svever background-image: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# b6e2ff) til (# 6ec2e8)); bakgrunnsbilde: -moz-lineær-gradient (øverst til venstre 90deg, # b6e2ff 0%, # 6ec2e8 100%); bakgrunnsbilde: lineær gradient (øverst til venstre 90deg, # b6e2ff 0%, # 6ec2e8 100%);  input [type = submit]: aktiv bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 6ec2e8), til (# b6e2ff)); bakgrunnsbilde: -moz-lineær-gradient (øverst til venstre 90deg, # 6ec2e8 0%, # b6e2ff 100%); bakgrunnsbilde: lineær gradient (øverst til venstre 90deg, # 6ec2e8 0%, # b6e2ff 100%); 

---

Trinn 5: Etterbehandlingen

Vårt påloggingsskjema ser bra ut, men la oss skyve båten ut og legge til opplevelsen. Vi skal nå legge til noen CSS animasjoner og overganger for å polere den av. Vi har allerede referert til Dan Edens animate.css i hodet vårt - vi kan nå bruke forhåndsdefinerte animasjonstyper, for eksempel bounceIn, sammen med de riktige nettleservennene.

Først, beholder animasjon:

 #container posisjon: fast; bredde: 340px; høyde: 280px; topp: 50%; venstre: 50%; margin-topp: -140px; margin-venstre: -170px; bakgrunn: #fff; border-radius: 3px; grense: 1px solid #ccc; boksskygge: 0 1px 2px rgba (0, 0, 0, .1); -webkit-animasjon-navn: bounceIn; -webkit-animasjon-fyll-modus: begge; -webkit-animasjon-varighet: 1s; -webkit-animasjon-iterasjon-telling: 1; -webkit-animasjon-timing-funksjon: lineær; -moz-animasjon-navn: bounceIn; -moz-animasjon-fyll-modus: begge deler; -moz-animasjon-varighet: 1s; -moz-animasjon-iterasjon-telling: 1; -moz-animasjon-timing-funksjon: lineær; animasjonsnavn: bounceIn; animasjons-fyll-modus: begge deler; animasjon-varighet: 1s; animasjon-iterasjon-telling: 1; animasjon-timing-funksjon: lineær; 

Deretter overganger for de interaktive elementene:

 p en font-size: 11px; farge: #aaa; flyte: høyre; margin-topp: -13px; margin-høyre: 20px; -webkit-overgang: alle .4s enkelhet; -moz-overgang: alle .4s enkelhet; overgang: alle .4s enkelhet;  skriv inn [type = tekst], skriv inn [type = passord] farge: # 777; polstring-venstre: 10px; margin: 10px; margin-topp: 12px; margin-venstre: 18px; bredde: 290px; høyde: 35px; grense: 1px solid # c7d0d2; border-radius: 2px; boks-skygge: innsett 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -webkit-overgang: alle .4s enkelhet; -moz-overgang: alle .4s enkelhet; overgang: alle .4s enkelhet; 

---

Trinn 6: Endelig kode

Vi er ferdige! Nedenfor finner du den endelige koden for vår elegante innloggingsskjema, som skal gi deg noe som ligner på dette:

HTML:

               
 
 Brukernavn:  Passord: 
Glemt passordet?
  
 Hold meg innlogget  
 
 
   

CSS:

 / * Grunnleggende * / html, kropp bredde: 100%; høyde: 100%; font-familie: "Helvetica Neue", Helvetica, sans-serif; farge: # 444; -webkit-font-utjevning: antialiased; bakgrunn: # f0f0f0;  #container posisjon: fast; bredde: 340px; høyde: 280px; topp: 50%; venstre: 50%; margin-topp: -140px; margin-venstre: -170px; bakgrunn: #fff; border-radius: 3px; grense: 1px solid #ccc; boksskygge: 0 1px 2px rgba (0, 0, 0, .1); -webkit-animasjon-navn: bounceIn; -webkit-animasjon-fyll-modus: begge; -webkit-animasjon-varighet: 1s; -webkit-animasjon-iterasjon-telling: 1; -webkit-animasjon-timing-funksjon: lineær; -moz-animasjon-navn: bounceIn; -moz-animasjon-fyll-modus: begge deler; -moz-animasjon-varighet: 1s; -moz-animasjon-iterasjon-telling: 1; -moz-animasjon-timing-funksjon: lineær; animasjonsnavn: bounceIn; animasjons-fyll-modus: begge deler; animasjon-varighet: 1s; animasjon-iterasjon-telling: 1; animasjon-timing-funksjon: lineær;  form margin: 0 auto; margin-topp: 20px;  label color: # 555; display: inline-block; margin-venstre: 18px; polstring: 10px; skriftstørrelse: 14px;  p a font-size: 11px; farge: #aaa; flyte: høyre; margin-topp: -13px; margin-høyre: 20px; -webkit-overgang: alle .4s enkelhet; -moz-overgang: alle .4s enkelhet; overgang: alle .4s enkelhet;  p a: svever farge: # 555;  input font-family: "Helvetica Neue", Helvetica, sans-serif; skriftstørrelse: 12px; oversikt: ingen;  skriv inn [type = tekst], skriv inn [type = passord] farge: # 777; polstring-venstre: 10px; margin: 10px; margin-topp: 12px; margin-venstre: 18px; bredde: 290px; høyde: 35px; grense: 1px solid # c7d0d2; border-radius: 2px; boks-skygge: innsett 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -webkit-overgang: alle .4s enkelhet; -moz-overgang: alle .4s enkelhet; overgang: alle .4s enkelhet;  input [type = tekst]: svever, input [type = passord]: svever grense: 1px solid # b6bfc0; boks-skygge: innsett 0 1.5px 3px rgba (190, 190, 190, .7), 0 0 0 5px # f5f7f8;  input [type = tekst]: fokus, input [type = passord]: fokus grense: 1px solid # a8c9e4; boksskygge: innsett 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # e6f2f9;  #lower background: # ecf2f5; bredde: 100%; høyde: 69px; margin-topp: 20px; boks-skygge: innsett 0 1px 1px #fff; border-top: 1px solid #ccc; grense bunn-høyre-radius: 3px; Grense nederst-venstre-radius: 3px;  input [type = boks] margin-left: 20px; margin-topp: 30px;  .check margin-left: 3px; skriftstørrelse: 11px; farge: # 444; tekstskygge: 0 1px 0 #fff;  input [type = submit] float: right; margin-høyre: 20px; margin-topp: 20px; bredde: 80px; høyde: 30px; skriftstørrelse: 14px; font-weight: bold; farge: #fff; bakgrunnsfarge: # acd6ef; / * IE fallback * / background-image: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# acd6ef) til (# 6ec2e8)); bakgrunnsbilde: -moz-lineær-gradient (øverst til venstre 90deg, # acd6ef 0%, # 6ec2e8 100%); bakgrunnsbilde: lineær gradient (øverst til venstre 90deg, # acd6ef 0%, # 6ec2e8 100%); border-radius: 30px; grense: 1px solid # 66add6; boksskygge: 0 1px 2px rgba (0, 0, 0, .3), innsett 0 1px 0 rgba (255, 255, 255, .5); markør: pointer;  input [type = submit]: svever background-image: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# b6e2ff) til (# 6ec2e8)); bakgrunnsbilde: -moz-lineær-gradient (øverst til venstre 90deg, # b6e2ff 0%, # 6ec2e8 100%); bakgrunnsbilde: lineær gradient (øverst til venstre 90deg, # b6e2ff 0%, # 6ec2e8 100%);  input [type = submit]: aktiv bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 6ec2e8), til (# b6e2ff)); bakgrunnsbilde: -moz-lineær-gradient (øverst til venstre 90deg, # 6ec2e8 0%, # b6e2ff 100%); bakgrunnsbilde: lineær gradient (øverst til venstre 90deg, # 6ec2e8 0%, # b6e2ff 100%); 

---

Konklusjon

Jeg håper du likte å følge med da vi opprettet noe som ikke bare ser bra ut, men fungerer vakkert og har den lille ekstra "noe". Takk for at du leste!