Erstellen Sie ein schnelles und elegantes Anmeldeformular

Heute werden wir das elegante Anmeldeformular von Orman Clark unter Verwendung von CSS3 und HTML5 sowie einige CSS-Animationen von Dan Eden einsetzen, um das Erlebnis zu verschönern.

Dieses Tutorial setzt ein gewisses Verständnis von HTML / CSS von Ihnen voraus. Wir werden uns ziemlich schnell bewegen. OK los geht's!

Schritt 1: Das HTML-Markup

Wir beginnen mit einem Link zu unseren Stylesheets im Kopf unseres Dokuments. Wir haben ein Reset-Stylesheet, mit dem wir alles auf Null zurücksetzen können, Dan Eden's animate.css, das wir später für ein paar lustige Animationen verwenden werden, und unser eigenes styles.css, in dem wir den größten Teil unserer Arbeit tragen.

      Anmeldung

Das Fleisch des HTML besteht aus einem Container, einem Formular und einigen Eingaben.

      Nutzername:  Passwort: Haben Sie Ihr Passwort vergessen?
   Angemeldet bleiben

Schritt 3: Positionieren der Elemente

Nun, da wir unser HTML-Markup geschrieben haben, können wir mit dem CSS fortfahren. Wir legen zunächst die Grundlagen fest und positionieren unser Containerelement in der Mitte der Seite.

 / * Grundlagen * / html, Körper width: 100%; Höhe: 100%; Schriftfamilie: "Helvetica Neue", Helvetica, serifenlos; Farbe: # 444; -webkit-font-smoothing: antialiased; Hintergrund: # f0f0f0;  #container position: behoben; Breite: 340px; Höhe: 280px; Spitze: 50%; links: 50%; Rand oben: -140px; Rand links: -170px;

Jetzt fügen wir den Eingaben und anderen Elementen einen strukturellen Stil hinzu:

 form margin: 0 auto; Rand oben: 20px;  label color: # 555; Anzeige: Inline-Block; Rand links: 18px; Polsterauflage: 10px; Schriftgröße: 14px;  p a font-size: 11px; Farbe: #aaa; schweben rechts; Rand oben: -13px; Rand rechts: 20px;  p a: hover color: # 555;  input font-family: "Helvetica Neue", Helvetica, serifenlos; Schriftgröße: 12px; Umriss: keine;  Eingabe [Typ = Text], Eingabe [Typ = Passwort] Farbe: # 777; Polsterung links: 10px; Marge: 10px; Rand oben: 12px; Rand links: 18px; Breite: 290px; Höhe: 35px;  #lower background: # ecf2f5; Breite: 100%; Höhe: 69px; Rand oben: 20px;  Eingabe [Typ = Ankreuzfeld] Rand links: 20px; Rand oben: 30px;  .check margin-left: 3px;  input [type = submit] float: right; Rand rechts: 20px; Rand oben: 20px; Breite: 80px; Höhe: 30px;

Schritt 4: Styling der Elemente

Die Elemente sind perfekt positioniert. Jetzt ist es Zeit, sie schön aussehen zu lassen! Zuerst gestalten wir den Container, indem wir ihm subtil abgerundete Ecken und einen Kästchenschatten für die Tiefe geben.

 #container position: fixed; Breite: 340px; Höhe: 280px; Spitze: 50%; links: 50%; Rand oben: -140px; Rand links: -170px; Hintergrund: #fff; Grenzradius: 3px; Rahmen: 1px fest #ccc; Box-Schatten: 0 1px 2px rgba (0, 0, 0, .1);

Dann werden die Eingaben ähnlich behandelt, mit einigen Grenzradien und Kästchenschatten. Wir geben der Submit-Schaltfläche einen Farbverlaufshintergrund mit einem Solid Hintergrundfarbe für IE9 und früher zu sorgen. Beachten Sie, dass wir jeden Eingabetyp mit css-Attributselektoren individuell ansprechen.

 form margin: 0 auto; Rand oben: 20px;  label color: # 555; Anzeige: Inline-Block; Rand links: 18px; Polsterauflage: 10px; Schriftgröße: 14px;  p a font-size: 11px; Farbe: #aaa; schweben rechts; Rand oben: -13px; Rand rechts: 20px;  p a: hover color: # 555;  input font-family: "Helvetica Neue", Helvetica, serifenlos; Schriftgröße: 12px; Umriss: keine;  Eingabe [Typ = Text], Eingabe [Typ = Passwort] Farbe: # 777; Polsterung links: 10px; Marge: 10px; Rand oben: 12px; Rand links: 18px; Breite: 290px; Höhe: 35px; Rahmen: 1px fest # c7d0d2; Grenzradius: 2px; Box-Schatten: Einfügung 0 1,5px3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8;  #lower background: # ecf2f5; Breite: 100%; Höhe: 69px; Rand oben: 20px; Box-Schatten: Einfügung 0 1px 1px #fff; Border-Top: 1px fest #ccc; Rahmen unten rechts: 3px; Rand unten links Radius: 3px;  Eingabe [Typ = Ankreuzfeld] Rand links: 20px; Rand oben: 30px;  .check margin-left: 3px; Schriftgröße: 11px; Farbe: # 444; Text-Schatten: 0 1px 0 #fff;  input [type = submit] float: right; Rand rechts: 20px; Rand oben: 20px; Breite: 80px; Höhe: 30px; Schriftgröße: 14px; Schriftdicke: fett; Farbe: #fff; Hintergrundfarbe: # acd6ef; / * IE Fallback * / background-image: -webkit-gradient (linear, links oben, links unten, von (# acd6ef) bis (# 6ec2e8)); Hintergrundbild: -moz-linearer Gradient (oben links 90 Grad, # acd6ef 0%, # 6ec2e8 100%); Hintergrundbild: linearer Gradient (oben links 90 Grad, # acd6ef 0%, # 6ec2e8 100%); Grenzradius: 30px; Grenze: 1px fest # 66add6; Box-Schatten: 0 1px 2px rgba (0, 0, 0, .3), Einfügung 0 1px 0 rgba (255, 255, 255, .5); Cursor: Zeiger;

Um das Feedback der Benutzer zu verbessern, könnten wir einige Schwebeflug- und Aktivzustände ausführen:

 form margin: 0 auto; Rand oben: 20px;  label color: # 555; Anzeige: Inline-Block; Rand links: 18px; Polsterauflage: 10px; Schriftgröße: 14px;  p a font-size: 11px; Farbe: #aaa; schweben rechts; Rand oben: -13px; Rand rechts: 20px; -Webkit-Übergang: alle .4s Leichtigkeit; -Moz-Übergang: alle .4s Leichtigkeit; Übergang: alle .4s Leichtigkeit;  p a: hover color: # 555;  input font-family: "Helvetica Neue", Helvetica, serifenlos; Schriftgröße: 12px; Umriss: keine;  Eingabe [Typ = Text], Eingabe [Typ = Passwort] Farbe: # 777; Polsterung links: 10px; Marge: 10px; Rand oben: 12px; Rand links: 18px; Breite: 290px; Höhe: 35px; Rahmen: 1px fest # c7d0d2; Grenzradius: 2px; Box-Schatten: Einfügung 0 1,5px3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -Webkit-Übergang: alle .4s Leichtigkeit; -Moz-Übergang: alle .4s Leichtigkeit; Übergang: alle .4s Leichtigkeit;  Eingabe [Typ = Text]: Hover, Eingabe [Typ = Kennwort]: Hover Rand: 1px fest # b6bfc0; Box-Schatten: Einfügung 0 1,5px3px rgba (190, 190, 190, .7), 0 0 0 5px # f5f7f8;  Eingabe [Typ = Text]: Fokus, Eingabe [Typ = Passwort]: Fokus Rand: 1px fest # a8c9e4; Box-Schatten: Einfügung 0 1,5px3px rgba (190, 190, 190, .4), 0 0 0 5px # e6f2f9;  #lower background: # ecf2f5; Breite: 100%; Höhe: 69px; Rand oben: 20px; Box-Schatten: Einfügung 0 1px 1px #fff; Border-Top: 1px fest #ccc; Rahmen unten rechts: 3px; Rand unten links Radius: 3px;  Eingabe [Typ = Ankreuzfeld] Rand links: 20px; Rand oben: 30px;  .check margin-left: 3px; Schriftgröße: 11px; Farbe: # 444; Text-Schatten: 0 1px 0 #fff;  input [type = submit] float: right; Rand rechts: 20px; Rand oben: 20px; Breite: 80px; Höhe: 30px; Schriftgröße: 14px; Schriftdicke: fett; Farbe: #fff; Hintergrundfarbe: # acd6ef; / * IE Fallback * / background-image: -webkit-gradient (linear, links oben, links unten, von (# acd6ef) bis (# 6ec2e8)); Hintergrundbild: -moz-linearer Gradient (oben links 90 Grad, # acd6ef 0%, # 6ec2e8 100%); Hintergrundbild: linearer Gradient (oben links 90 Grad, # acd6ef 0%, # 6ec2e8 100%); Grenzradius: 30px; Grenze: 1px fest # 66add6; Box-Schatten: 0 1px 2px rgba (0, 0, 0, .3), Einfügung 0 1px 0 rgba (255, 255, 255, .5); Cursor: Zeiger;  input [type = submit]: hover Hintergrundbild: -webkit-gradient (linear, links oben, links unten, von (# b6e2ff) bis (# 6ec2e8)); Hintergrundbild: -moz-linearer Gradient (oben links 90 Grad, # b6e2ff 0%, # 6ec2e8 100%); Hintergrundbild: linearer Gradient (oben links 90 Grad, # b6e2ff 0%, # 6ec2e8 100%);  input [type = submit]: active Hintergrundbild: -webkit-gradient (linear, links oben, links unten, von (# 6ec2e8) bis (# b6e2ff)); Hintergrundbild: -moz-linearer Gradient (oben links 90 Grad, # 6ec2e8 0%, # b6e2ff 100%); Hintergrundbild: linearer Gradient (oben links 90 Grad, # 6ec2e8 0%, # B6e2ff 100%);

Schritt 5: Der letzte Schliff

Unser Anmeldeformular sieht gut aus, aber lassen Sie uns das Boot herausschieben und das Erlebnis verbessern. Wir werden jetzt einige CSS-Animationen und Übergänge hinzufügen, um es abzuschwächen. Wir haben bereits auf Dan Eden's animate.css in unserem Kopf verwiesen - wir können jetzt seine vordefinierten Animationstypen verwenden, wie zum Beispiel bounceIn, zusammen mit den entsprechenden Browser-Präfixen.

Zuerst die Containeranimation:

 #container position: fixed; Breite: 340px; Höhe: 280px; Spitze: 50%; links: 50%; Rand oben: -140px; Rand links: -170px; Hintergrund: #fff; Grenzradius: 3px; Rahmen: 1px fest #ccc; Box-Schatten: 0 1px 2px rgba (0, 0, 0, .1); -webkit-animation-name: bounceIn; -webkit-animation-fill-mode: beide; -webkit-Animationsdauer: 1s; -webkit-animation-Iterationsanzahl: 1; -webkit-animation-timing-Funktion: linear; -moz-animation-name: bounceIn; -moz-animation-fill-mode: beide; -Moz-Animationsdauer: 1s; -moz-Animation-Iterationszahl: 1; -Moz-Animation-Timing-Funktion: linear; Animationsname: bounceIn; Animations-Füllmodus: beide; Animationsdauer: 1s; Animations-Iterationszahl: 1; Animations-Timing-Funktion: linear;

Als nächstes Übergänge für die interaktiven Elemente:

 p a font-size: 11px; Farbe: #aaa; schweben rechts; Rand oben: -13px; Rand rechts: 20px; -Webkit-Übergang: alle .4s Leichtigkeit; -Moz-Übergang: alle .4s Leichtigkeit; Übergang: alle .4s Leichtigkeit;  Eingabe [Typ = Text], Eingabe [Typ = Passwort] Farbe: # 777; Polsterung links: 10px; Marge: 10px; Rand oben: 12px; Rand links: 18px; Breite: 290px; Höhe: 35px; Rahmen: 1px fest # c7d0d2; Grenzradius: 2px; Box-Schatten: Einfügung 0 1,5px3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -Webkit-Übergang: alle .4s Leichtigkeit; -Moz-Übergang: alle .4s Leichtigkeit; Übergang: alle .4s Leichtigkeit;

Schritt 6: Final Code

Wir sind fertig! Nachfolgend finden Sie den endgültigen Code für unser Elegant Login-Formular, das Ihnen etwas ähneln sollte, das diesem sehr ähnlich sieht:

HTML:

      Anmeldung           Nutzername:  Passwort: Haben Sie Ihr Passwort vergessen?
   Angemeldet bleiben

CSS:

 / * Grundlagen * / html, Körper width: 100%; Höhe: 100%; Schriftfamilie: "Helvetica Neue", Helvetica, serifenlos; Farbe: # 444; -webkit-font-smoothing: antialiased; Hintergrund: # f0f0f0;  #container position: behoben; Breite: 340px; Höhe: 280px; Spitze: 50%; links: 50%; Rand oben: -140px; Rand links: -170px; Hintergrund: #fff; Grenzradius: 3px; Rahmen: 1px fest #ccc; Box-Schatten: 0 1px 2px rgba (0, 0, 0, .1); -webkit-animation-name: bounceIn; -webkit-animation-fill-mode: beide; -webkit-Animationsdauer: 1s; -webkit-animation-Iterationsanzahl: 1; -webkit-animation-timing-Funktion: linear; -moz-animation-name: bounceIn; -moz-animation-fill-mode: beide; -Moz-Animationsdauer: 1s; -moz-Animation-Iterationszahl: 1; -Moz-Animation-Timing-Funktion: linear; Animationsname: bounceIn; Animations-Füllmodus: beide; Animationsdauer: 1s; Animations-Iterationszahl: 1; Animations-Timing-Funktion: linear;  form margin: 0 auto; Rand oben: 20px;  label color: # 555; Anzeige: Inline-Block; Rand links: 18px; Polsterauflage: 10px; Schriftgröße: 14px;  p a font-size: 11px; Farbe: #aaa; schweben rechts; Rand oben: -13px; Rand rechts: 20px; -Webkit-Übergang: alle .4s Leichtigkeit; -Moz-Übergang: alle .4s Leichtigkeit; Übergang: alle .4s Leichtigkeit;  p a: hover color: # 555;  input font-family: "Helvetica Neue", Helvetica, serifenlos; Schriftgröße: 12px; Umriss: keine;  Eingabe [Typ = Text], Eingabe [Typ = Passwort] Farbe: # 777; Polsterung links: 10px; Marge: 10px; Rand oben: 12px; Rand links: 18px; Breite: 290px; Höhe: 35px; Rahmen: 1px fest # c7d0d2; Grenzradius: 2px; Box-Schatten: Einfügung 0 1,5px3px rgba (190, 190, 190, .4), 0 0 0 5px # f5f7f8; -Webkit-Übergang: alle .4s Leichtigkeit; -Moz-Übergang: alle .4s Leichtigkeit; Übergang: alle .4s Leichtigkeit;  Eingabe [Typ = Text]: Hover, Eingabe [Typ = Kennwort]: Hover Rand: 1px fest # b6bfc0; Box-Schatten: Einfügung 0 1,5px3px rgba (190, 190, 190, .7), 0 0 0 5px # f5f7f8;  Eingabe [Typ = Text]: Fokus, Eingabe [Typ = Passwort]: Fokus Rand: 1px fest # a8c9e4; Box-Schatten: Einfügung 0 1,5px3px rgba (190, 190, 190, .4), 0 0 0 5px # e6f2f9;  #lower background: # ecf2f5; Breite: 100%; Höhe: 69px; Rand oben: 20px; Box-Schatten: Einfügung 0 1px 1px #fff; Border-Top: 1px fest #ccc; Rahmen unten rechts: 3px; Rand unten links Radius: 3px;  Eingabe [Typ = Ankreuzfeld] Rand links: 20px; Rand oben: 30px;  .check margin-left: 3px; Schriftgröße: 11px; Farbe: # 444; Text-Schatten: 0 1px 0 #fff;  input [type = submit] float: right; Rand rechts: 20px; Rand oben: 20px; Breite: 80px; Höhe: 30px; Schriftgröße: 14px; Schriftdicke: fett; Farbe: #fff; Hintergrundfarbe: # acd6ef; / * IE Fallback * / background-image: -webkit-gradient (linear, links oben, links unten, von (# acd6ef) bis (# 6ec2e8)); Hintergrundbild: -moz-linearer Gradient (oben links 90 Grad, # acd6ef 0%, # 6ec2e8 100%); Hintergrundbild: linearer Gradient (oben links 90 Grad, # acd6ef 0%, # 6ec2e8 100%); Grenzradius: 30px; Grenze: 1px fest # 66add6; Box-Schatten: 0 1px 2px rgba (0, 0, 0, .3), Einfügung 0 1px 0 rgba (255, 255, 255, .5); Cursor: Zeiger;  input [type = submit]: hover Hintergrundbild: -webkit-gradient (linear, links oben, links unten, von (# b6e2ff) bis (# 6ec2e8)); Hintergrundbild: -moz-linearer Gradient (oben links 90 Grad, # b6e2ff 0%, # 6ec2e8 100%); Hintergrundbild: linearer Gradient (oben links 90 Grad, # b6e2ff 0%, # 6ec2e8 100%);  input [type = submit]: active Hintergrundbild: -webkit-gradient (linear, links oben, links unten, von (# 6ec2e8) bis (# b6e2ff)); Hintergrundbild: -moz-linearer Gradient (oben links 90 Grad, # 6ec2e8 0%, # b6e2ff 100%); Hintergrundbild: linearer Gradient (oben links 90 Grad, # 6ec2e8 0%, # B6e2ff 100%);

Fazit

Ich hoffe, es hat Ihnen Spaß gemacht, mitzumachen, da wir etwas geschaffen haben, das nicht nur gut aussieht, sondern auch wunderbar funktioniert und das gewisse Extra hat. Danke fürs Lesen!

Web-Design