Bouw een snel en elegant aanmeldingsformulier

Vandaag gaan we het elegante aanmeldingsformulier van Orman Clark coderen met CSS3 en HTML5, plus enkele CSS-animaties van Dan Eden om de ervaring te verfraaien.

Deze tutorial veronderstelt een zeker begrip van HTML / CSS van jou; we zullen behoorlijk snel gaan. OK, laten we gaan!

---

Stap 1: de HTML-markering

We beginnen met een koppeling naar onze stylesheets in het hoofd van ons document. We hebben een gereset stylesheet om alles weer op nul te zetten, Dan Eden's animate.css, die we later zullen gebruiken voor een aantal leuke animatie, en onze eigen styles.css waar we ons meeste van ons werk zullen uitvoeren..

Het vlees van de HTML omvat een container, een vorm en enkele invoer.

    
 
 Gebruikersnaam:  Wachtwoord: 
Uw wachtwoord vergeten?
  
 Ik wil ingelogd blijven  
 
 
   

---

Stap 3: de elementen positioneren

Nu we onze HTML-markup hebben geschreven, kunnen we doorgaan naar de css. We zullen eerst de basisprincipes specificeren, waarbij we ons container-element in het midden van de pagina plaatsen.

 / * Basics * / html, body width: 100%; hoogte: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; kleur: # 444; -webkit-font-smoothing: antialiased; achtergrond: # f0f0f0;  #container positie: vast; breedte: 340 px; hoogte: 280 px; top: 50%; links: 50%; marge-top: -140 px; marge links: -170 px; 

Nu voegen we wat structurele stijl toe aan de ingangen en andere elementen:

 vorm margin: 0 auto; margin-top: 20px;  label color: # 555; weergave: inline-block; margin-left: 18px; padding-top: 10px; lettergrootte: 14 px;  p a font-size: 11px; kleur: #aaa; zweven: rechts; margin-top: -13px; margin-right: 20px;  p a: hover color: # 555;  invoer font-family: "Helvetica Neue", Helvetica, sans-serif; lettergrootte: 12px; overzicht: geen;  invoer [type = tekst], invoer [type = wachtwoord] kleur: # 777; padding-links: 10px; marge: 10px; margin-top: 12px; margin-left: 18px; breedte: 290 px; hoogte: 35 px;  #lower background: # ecf2f5; breedte: 100%; hoogte: 69 px; margin-top: 20px;  invoer [type = selectievakje] margin-left: 20px; margin-top: 30px;  .check margin-left: 3px;  invoer [type = submit] float: right; margin-right: 20px; margin-top: 20px; breedte: 80px; hoogte: 30 px; 

---

Stap 4: De elementen stylen

De elementen zijn perfect gepositioneerd. Nu is het tijd om ze er mooi uit te laten zien! Eerst stylen we de container door hem subtiel afgeronde hoeken en een doosschaduw voor diepte te geven.

 #container positie: vast; breedte: 340 px; hoogte: 280 px; top: 50%; links: 50%; marge-top: -140 px; marge links: -170 px; achtergrond: #fff; grensradius: 3px; border: 1px solid #ccc; vakschaduw: 0 1px 2px rgba (0, 0, 0, .1); 

Vervolgens krijgen de ingangen een vergelijkbare behandeling, met wat randradius en doosschaduwen. We geven de knop Verzenden een verloop achtergrond, met een effen Achtergrond kleur om tegemoet te komen aan IE9 en eerder. Merk op dat we elk invoertype afzonderlijk targeten met CSS-attribuutselectoren.

 vorm margin: 0 auto; margin-top: 20px;  label color: # 555; weergave: inline-block; margin-left: 18px; padding-top: 10px; lettergrootte: 14 px;  p a font-size: 11px; kleur: #aaa; zweven: rechts; margin-top: -13px; margin-right: 20px;  p a: hover color: # 555;  invoer font-family: "Helvetica Neue", Helvetica, sans-serif; lettergrootte: 12px; overzicht: geen;  invoer [type = tekst], invoer [type = wachtwoord] kleur: # 777; padding-links: 10px; marge: 10px; margin-top: 12px; margin-left: 18px; breedte: 290 px; hoogte: 35 px; rand: 1px vast # c7d0d2; grensradius: 2px; box-shadow: inzet 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8;  #lower background: # ecf2f5; breedte: 100%; hoogte: 69 px; margin-top: 20px; box-shadow: inzet 0 1px 1px #fff; border-top: 1px solid #ccc; border-bottom-right-radius: 3px; grens-onder-links radius: 3px;  invoer [type = selectievakje] margin-left: 20px; margin-top: 30px;  .check margin-left: 3px; font-size: 11px; kleur: # 444; text-shadow: 0 1px 0 #fff;  invoer [type = submit] float: right; margin-right: 20px; margin-top: 20px; breedte: 80px; hoogte: 30 px; lettergrootte: 14 px; lettertype: vet; kleur: #fff; achtergrondkleur: # acd6ef; / * IE fallback * / background-image: -webkit-gradient (lineair, links bovenaan, links onderaan, vanaf (# acd6ef), naar (# 6ec2e8)); achtergrondafbeelding: -moz-lineair verloop (linksboven 90deg, # acd6ef 0%, # 6ec2e8 100%); achtergrondafbeelding: lineair verloop (linksboven 90deg, # acd6ef 0%, # 6ec2e8 100%); grensradius: 30px; border: 1px solid # 66add6; vakschaduw: 0 1px 2px rgba (0, 0, 0, .3), inzet 0 1px 0 rgba (255, 255, 255, .5); cursor: pointer; 

Vervolgens kunnen we, om de feedback van gebruikers te ondersteunen, een aantal zwevende en actieve toestanden doen:

 vorm margin: 0 auto; margin-top: 20px;  label color: # 555; weergave: inline-block; margin-left: 18px; padding-top: 10px; lettergrootte: 14 px;  p a font-size: 11px; kleur: #aaa; zweven: rechts; margin-top: -13px; margin-right: 20px; -webkit-overgang: alle .4s gemak; -moz-overgang: alle .4s gemak; overgang: alle .4s gemak;  p a: hover color: # 555;  invoer font-family: "Helvetica Neue", Helvetica, sans-serif; lettergrootte: 12px; overzicht: geen;  invoer [type = tekst], invoer [type = wachtwoord] kleur: # 777; padding-links: 10px; marge: 10px; margin-top: 12px; margin-left: 18px; breedte: 290 px; hoogte: 35 px; rand: 1px vast # c7d0d2; grensradius: 2px; box-shadow: inzet 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -webkit-overgang: alle .4s gemak; -moz-overgang: alle .4s gemak; overgang: alle .4s gemak;  invoer [type = tekst]: hover, invoer [type = wachtwoord]: hover border: 1px solid # b6bfc0; vakschaduw: inzet 0 1.5px 3px rgba (190, 190, 190, .7), 0 0 0 5px # f5f7f8;  invoer [type = tekst]: focus, invoer [type = wachtwoord]: focus border: 1px solid # a8c9e4; vakschaduw: inzet 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # e6f2f9;  #lower background: # ecf2f5; breedte: 100%; hoogte: 69 px; margin-top: 20px; box-shadow: inzet 0 1px 1px #fff; border-top: 1px solid #ccc; border-bottom-right-radius: 3px; grens-onder-links radius: 3px;  invoer [type = selectievakje] margin-left: 20px; margin-top: 30px;  .check margin-left: 3px; font-size: 11px; kleur: # 444; text-shadow: 0 1px 0 #fff;  invoer [type = submit] float: right; margin-right: 20px; margin-top: 20px; breedte: 80px; hoogte: 30 px; lettergrootte: 14 px; lettertype: vet; kleur: #fff; achtergrondkleur: # acd6ef; / * IE fallback * / background-image: -webkit-gradient (lineair, links bovenaan, links onderaan, vanaf (# acd6ef), naar (# 6ec2e8)); achtergrondafbeelding: -moz-lineair verloop (linksboven 90deg, # acd6ef 0%, # 6ec2e8 100%); achtergrondafbeelding: lineair verloop (linksboven 90deg, # acd6ef 0%, # 6ec2e8 100%); grensradius: 30px; border: 1px solid # 66add6; vakschaduw: 0 1px 2px rgba (0, 0, 0, .3), inzet 0 1px 0 rgba (255, 255, 255, .5); cursor: pointer;  input [type = submit]: hover background-image: -webkit-gradient (lineair, links bovenaan, links onderaan, vanaf (# b6e2ff), naar (# 6ec2e8)); achtergrondafbeelding: -moz-lineair verloop (linksboven 90deg, # b6e2ff 0%, # 6ec2e8 100%); achtergrondafbeelding: lineair verloop (linksboven 90deg, # b6e2ff 0%, # 6ec2e8 100%);  input [type = submit]: active background-image: -webkit-gradient (lineair, links bovenaan, links onderaan, vanaf (# 6ec2e8), naar (# b6e2ff)); achtergrondafbeelding: -moz-lineaire gradiënt (linksboven 90deg, # 6ec2e8 0%, # b6e2ff 100%); achtergrondafbeelding: lineair verloop (linksboven 90deg, # 6ec2e8 0%, # b6e2ff 100%); 

---

Stap 5: De afwerkingen

Ons inlogformulier ziet er goed uit, maar laten we de boot duwen en toevoegen aan de ervaring. We gaan nu enkele CSS-animaties en -overgangen toevoegen om het op te poetsen. We hebben in ons hoofd al verwezen naar Dan Eden's animate.css - we kunnen nu gebruik maken van zijn voorgedefinieerde animatietypen, zoals bounceIn, samen met de juiste browser-voorvoegsels.

Eerst de containeranimatie:

 #container positie: vast; breedte: 340 px; hoogte: 280 px; top: 50%; links: 50%; marge-top: -140 px; marge links: -170 px; achtergrond: #fff; grensradius: 3px; border: 1px solid #ccc; vakschaduw: 0 1px 2px rgba (0, 0, 0, .1); -webkit-animatie-naam: bounceIn; -webkit-animatie-vulmodus: beide; -webkit-animatie-duur: 1s; -webkit-animatie-iteratie-telling: 1; -webkit-animatie-timing-functie: lineair; -moz-animation-name: bounceIn; -moz-animation-fill-mode: beide; -moz-animation-duration: 1s; -moz-animatie-iteratie-telling: 1; -moz-animation-timing-functie: lineair; animatie-naam: bounceIn; animatie-vulmodus: beide; animatie-duur: 1s; animatie-iteratie-telling: 1; animatie-timing-functie: lineair; 

Vervolgens overgangen voor de interactieve elementen:

 p a font-size: 11px; kleur: #aaa; zweven: rechts; margin-top: -13px; margin-right: 20px; -webkit-overgang: alle .4s gemak; -moz-overgang: alle .4s gemak; overgang: alle .4s gemak;  invoer [type = tekst], invoer [type = wachtwoord] kleur: # 777; padding-links: 10px; marge: 10px; margin-top: 12px; margin-left: 18px; breedte: 290 px; hoogte: 35 px; rand: 1px vast # c7d0d2; grensradius: 2px; box-shadow: inzet 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -webkit-overgang: alle .4s gemak; -moz-overgang: alle .4s gemak; overgang: alle .4s gemak; 

---

Stap 6: definitieve code

Werden gedaan! Hieronder vindt u de definitieve code voor ons elegante aanmeldingsformulier, dat u iets moet geven dat er erg op lijkt:

HTML:

               
 
 Gebruikersnaam:  Wachtwoord: 
Uw wachtwoord vergeten?
  
 Ik wil ingelogd blijven  
 
 
   

CSS:

 / * Basics * / html, body width: 100%; hoogte: 100%; font-family: "Helvetica Neue", Helvetica, sans-serif; kleur: # 444; -webkit-font-smoothing: antialiased; achtergrond: # f0f0f0;  #container positie: vast; breedte: 340 px; hoogte: 280 px; top: 50%; links: 50%; marge-top: -140 px; marge links: -170 px; achtergrond: #fff; grensradius: 3px; border: 1px solid #ccc; vakschaduw: 0 1px 2px rgba (0, 0, 0, .1); -webkit-animatie-naam: bounceIn; -webkit-animatie-vulmodus: beide; -webkit-animatie-duur: 1s; -webkit-animatie-iteratie-telling: 1; -webkit-animatie-timing-functie: lineair; -moz-animation-name: bounceIn; -moz-animation-fill-mode: beide; -moz-animation-duration: 1s; -moz-animatie-iteratie-telling: 1; -moz-animation-timing-functie: lineair; animatie-naam: bounceIn; animatie-vulmodus: beide; animatie-duur: 1s; animatie-iteratie-telling: 1; animatie-timing-functie: lineair;  vorm margin: 0 auto; margin-top: 20px;  label color: # 555; weergave: inline-block; margin-left: 18px; padding-top: 10px; lettergrootte: 14 px;  p a font-size: 11px; kleur: #aaa; zweven: rechts; margin-top: -13px; margin-right: 20px; -webkit-overgang: alle .4s gemak; -moz-overgang: alle .4s gemak; overgang: alle .4s gemak;  p a: hover color: # 555;  invoer font-family: "Helvetica Neue", Helvetica, sans-serif; lettergrootte: 12px; overzicht: geen;  invoer [type = tekst], invoer [type = wachtwoord] kleur: # 777; padding-links: 10px; marge: 10px; margin-top: 12px; margin-left: 18px; breedte: 290 px; hoogte: 35 px; rand: 1px vast # c7d0d2; grensradius: 2px; box-shadow: inzet 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -webkit-overgang: alle .4s gemak; -moz-overgang: alle .4s gemak; overgang: alle .4s gemak;  invoer [type = tekst]: hover, invoer [type = wachtwoord]: hover border: 1px solid # b6bfc0; vakschaduw: inzet 0 1.5px 3px rgba (190, 190, 190, .7), 0 0 0 5px # f5f7f8;  invoer [type = tekst]: focus, invoer [type = wachtwoord]: focus border: 1px solid # a8c9e4; vakschaduw: inzet 0 1.5px 3px rgba (190, 190, 190, .4), 0 0 0 5px # e6f2f9;  #lower background: # ecf2f5; breedte: 100%; hoogte: 69 px; margin-top: 20px; box-shadow: inzet 0 1px 1px #fff; border-top: 1px solid #ccc; border-bottom-right-radius: 3px; grens-onder-links radius: 3px;  invoer [type = selectievakje] margin-left: 20px; margin-top: 30px;  .check margin-left: 3px; font-size: 11px; kleur: # 444; text-shadow: 0 1px 0 #fff;  invoer [type = submit] float: right; margin-right: 20px; margin-top: 20px; breedte: 80px; hoogte: 30 px; lettergrootte: 14 px; lettertype: vet; kleur: #fff; achtergrondkleur: # acd6ef; / * IE fallback * / background-image: -webkit-gradient (lineair, links bovenaan, links onderaan, vanaf (# acd6ef), naar (# 6ec2e8)); achtergrondafbeelding: -moz-lineair verloop (linksboven 90deg, # acd6ef 0%, # 6ec2e8 100%); achtergrondafbeelding: lineair verloop (linksboven 90deg, # acd6ef 0%, # 6ec2e8 100%); grensradius: 30px; border: 1px solid # 66add6; vakschaduw: 0 1px 2px rgba (0, 0, 0, .3), inzet 0 1px 0 rgba (255, 255, 255, .5); cursor: pointer;  input [type = submit]: hover background-image: -webkit-gradient (lineair, links bovenaan, links onderaan, vanaf (# b6e2ff), naar (# 6ec2e8)); achtergrondafbeelding: -moz-lineair verloop (linksboven 90deg, # b6e2ff 0%, # 6ec2e8 100%); achtergrondafbeelding: lineair verloop (linksboven 90deg, # b6e2ff 0%, # 6ec2e8 100%);  input [type = submit]: active background-image: -webkit-gradient (lineair, links bovenaan, links onderaan, vanaf (# 6ec2e8), naar (# b6e2ff)); achtergrondafbeelding: -moz-lineaire gradiënt (linksboven 90deg, # 6ec2e8 0%, # b6e2ff 100%); achtergrondafbeelding: lineair verloop (linksboven 90deg, # 6ec2e8 0%, # b6e2ff 100%); 

---

Conclusie

Ik hoop dat je het leuk vond om mee te doen, want we hebben iets gemaakt dat er niet alleen goed uitziet, maar ook prachtig functioneert en dat beetje extra 'iets' heeft. Bedankt voor het lezen!