Anmeldeformular für gestapelte Papiereffekte erstellen

Dieser Artikel ist Teil unseres "HTML5 / CSS3-Tutorials" - engagiert, um Sie zu einem besseren Designer und / oder Entwickler zu machen. Klick hier um mehr Artikel aus derselben Serie zu sehen.

Anmeldeformulare sind ein wesentlicher Bestandteil jeder dynamischen Website. Sie bieten Website-Benutzern einen Mechanismus zum Zugriff auf eingeschränkte Inhalte. In diesem Lernprogramm werden viele CSS3-Funktionen wie Text-Schatten, Box-Schatten, lineare Farbverläufe und Übergänge untersucht, um ein einfaches und elegantes Anmeldeformular mit einem Stacked-Paper-Look zu erstellen.

Das Bild oben zeigt eine Vorschau des Anmeldeformulars, das wir erstellen werden. Bereit zum Eintauchen? Lass uns anfangen!

1. Grundlegendes HTML-Markup

Das HTML-Markup, das wir verwenden werden, ist sehr einfach. Nach der HTML5-Doctype-Deklaration haben wir das und </code> Stichworte. Innerhalb des <code><body></code> tag, wir haben eine <code><section></code> tag mit einer Klasse von 'stacked'. Diese <code><section></code> tag wird verwendet, um die Breite der Inhaltsbox zu definieren und sie an der Mitte der Seite auszurichten. Wir verwenden auch den Klassennamen dieses Tags, um dieses Tag mithilfe von CSS als Ziel festzulegen. EIN <code><form></code> tag folgt <code><section></code> Etikett. Das Formular-Tag hat keinen gültigen Wert für das 'action'-Attribut, da es nur zu Demonstrationszwecken verwendet wird. Innerhalb des Formularfelds befinden sich die Deklarationen für die E-Mail- und Kennwortbezeichnungen und das Eingabefeld, gefolgt von einer Schaltfläche zum Senden. Wichtig ist hier zu beachten, dass wir ein Eingabefeld mit einer Art 'E-Mail' verwendet haben. Dies wird uns durch die HTML5-Deklaration zur Verfügung gestellt und in älteren Browsern ordnungsgemäß zu einem normalen Texteingabefeld degradiert.</p> <p>Hier ist das gesamte HTML-Markup:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Einfaches Anmeldeformular

  Anmeldung
   Email  
   Passwort

     Und hier ist eine Vorschau auf das, was wir bisher erstellt haben:
  
 2. Grundstile hinzufügen
 Erstellen Sie eine neue CSS-Datei mit dem Namen master.css und fügen Sie einen Link zu dieser Datei in Ihrer HTML-Hauptdatei hinzu. Wir werden unsere CSS-Datei mit einem schnellen Reset starten, um Einheitlichkeit zwischen verschiedenen Browsern zu erreichen. Fügen wir unserer Seite auch ein schönes Hintergrundbild hinzu. Das Bild, das ich verwendet habe, wurde übernommen Subtile Muster. Stöbern Sie auf der Website nach einem Hintergrundbild, das Ihrem Geschmack entspricht. Wir können das Hintergrundbild mit Hilfe der folgenden Deklaration hinzufügen. Beachten Sie auch, dass ich das benutze Offene Sans Schrift von Google Web Font für den Nachrichtentext.
  / * -------- Basisstile --------- * / body, html margin: 0; Polsterung: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") linke obere Wiederholung; Schrift: 16px / 1.5 "Open Sans", Helvetica, Arial, Serifenlos;  div.wrap width: 400px; Marge: 80px auto; 
 3. Stacked-Paper-Effekt
 Nachdem wir nun das grundlegende Layout erstellt haben, können wir mit dem Entwurf des Formulars beginnen. Um den Stacked-Paper-Effekt zu erzielen, verwenden wir den :nach dem und :Vor Pseudoelemente. Diese Pseudo-Elemente werden meistens verwendet, um einem Selektor visuelle Effekte hinzuzufügen. 
 Das :Vor Ein Pseudoelement wird verwendet, um Inhalt vor dem Inhalt des Selektors und dem :nach dem Pseudoelement für den Inhalt eines Selektors. 
 Wir beginnen damit, dem Abschnitt mit einer Klasse von "gestapelt" eine Breite von 400px und eine Höhe von 300px zu geben. Außerdem geben wir dieser Box eine Hintergrundfarbe von # f6f6f6 und einen 1 Pixel dicken Rahmen mit der Farbe #bbb. Die wichtigsten Punkte, die hier zu beachten sind, sind die Deklaration des Grenzradius und die Box-Shadow-Deklaration. Hier wurden Browser-Präfixe "-moz-" und "-webkit-" verwendet, um sicherzustellen, dass dies in Gecko- und Webkit-basierten Browsern funktioniert. 
 Die Randradius-Deklaration ist sehr einfach und wird zum Erstellen abgerundeter Ecken verwendet, wobei 3px die Krümmung darstellt. Die Syntax für die Box-Shadow-Deklaration mag kompliziert aussehen, aber lassen Sie uns sie in kleinere Stücke aufteilen, um sie besser zu verstehen. 
  / * -------- Border Radius --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); Box-Schatten: 0 0 3px rgba (0,0,0, .2);
 Die ersten beiden Nullen geben den x-Versatz und den y-Versatz an und die 3px zeigt die Unschärfe an. Als nächstes kommt die Farbdeklaration. Ich habe hier Rgba-Werte verwendet; rgba steht für rot, grün, blau und alpha (deckkraft). Daher geben die 4 Werte in der Klammer die Menge an Rot, Grün, Blau und dessen Alpha (Opazität) an..
  .gestapelt Hintergrund: # f6f6f6; border: 1px solid #bbb; Höhe: 300px; Marge: 50px auto; Position: relativ; Breite: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); Box-Schatten: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; Grenzradius: 3px; 
 Nachdem wir nun den grundlegenden Begrenzungsrahmen für das Formular erstellt haben, beginnen wir mit der :nach dem und :Vor Pseudoelemente. 
  .gestapelt: after, .stacked: before background: # f6f6f6; Grenze: 1px fest #aaa; unten: -8px; Inhalt: "; Höhe: 250px; links: 2px; Position: absolut; Breite: 394px; z-Index: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); - Moz-Box-Schatten: 0 0 3px rgba (0,0,0, .2); Box-Schatten: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; border-radius: 3px; .stacked: before bottom: -14px; left: 5px; width: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; Rahmenradius: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0,5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0,5); box -shadow: 0 0 15px rgba (0,0,0,0,5);
 Der Code für: after und: before Pseudo-Elemente sind nahezu identisch mit dem oben beschriebenen Begrenzungsrahmen. Wichtig ist hierbei nur, dass diese Pseudo-Elemente absolut zum Begrenzungsrahmen positioniert sind. Jedes der Pseudoelemente wird schrittweise um einige Pixel abgesenkt, um ein gestapeltes Aussehen zu erzielen.
 4. Eingabefelder
 Im HTML-Markup haben wir sowohl das E-Mail-Feld als auch das Passwort-Feld um eine Klasse von 'Texteingabe' erweitert, um diese Elemente mit unseren CSS-Deklarationen zielgerichtet anzeigen zu können. Hier ist die CSS-Deklaration, die auf beide Eingabefelder angewendet wird.
  Formular-Eingabe-Eingabe Gliederung: 0; Bildschirmsperre; Breite: 330px; Polsterung: 8px 15px; Rand: 1px durchgehend grau; Schriftgröße: 16px; Schriftgewicht: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; Grenzradius: 25px; Box-Schatten: Einfügung 0 2px 8px rgba (0,0,0,0,3); 
 Auch hier haben wir die Randradius- und Box-Shadow-Deklarationen verwendet. Bei Textfeldern wird der Randradius mit einem höheren Wert angegeben, um mehr Krümmung zu gewährleisten. Bei der Box-Shadow-Deklaration wurde mit dem Schlüsselworteinfügung angegeben, dass sich der Schatten innerhalb des Textfelds befindet. Hier beträgt der vertikale Versatz für den Schatten 2px und die Unschärfe liegt bei 8px, wobei die Farbe im rgba-Format deklariert wird.
 Um den Eingabefeldern etwas Interaktivität hinzuzufügen, ändern wir die Box-Shadow-Eigenschaft für das Eingabefeld im 'hover'-Zustand. Die neue Box-Shadow-Deklaration enthält keine X- und Y-Offsets, jedoch eine Unschärfe von 5 Pixeln, wobei die Farbe im RGBA-Format deklariert wird.
 5. Schaltfläche absenden
 Der letzte Teil dieses Formulars, den wir ausfüllen müssen, ist der Senden-Button. Ähnlich wie das Eingabefeld geben wir der Submit-Schaltfläche einen Radius von 25 Pixel mit der Eigenschaft border-radius. Eine Box-Shadow-Eigenschaft mit einem y-Versatz von 1px wurde ebenfalls hinzugefügt, um die Schaltfläche anzufügen “inneren Schatten” bewirken.
  Formulareingabe [type = 'submit'] float: right; Polsterung: 10px 20px; Bildschirmsperre; Cursor: Zeiger; Schriftgröße: 16px; Schriftgewicht: 700; Farbe: #fff; Text-Schatten: 0 1px 0 # 000; Hintergrundfarbe: # 0074CC; Grenze: 1px fest # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; Grenzradius: 25px; Hintergrundbild: -moz-linearer Gradient (oben, # 08C, # 05C); Hintergrundbild: -ms-linearer Gradient (oben, # 08C, # 05C); Hintergrundbild: -webkit-linearer Gradient (oben, # 08C, # 05C); Hintergrundbild: linearer Gradient (oben, # 08C, # 05C); -webkit-box-shadow: Einfügung 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: Einfügung 0 1px 0px rgba (255, 255, 255, 0.5); Box-Schatten: Einfügung 0 1px 0px rgba (255, 255, 255, 0,5); 
 Wichtig ist hierbei die Deklaration für das Hinzufügen des Farbverlaufs zu dieser Schaltfläche. CSS3-Gradienten sind ein ziemlich großes Thema und wir werden nur die Oberfläche kratzen. Für diesen Senden-Button fügen wir einen linearen Farbverlauf hinzu, der von # 08C bis # 05C reicht. Wie bei allen anderen CSS3-Eigenschaften, die wir bisher verwendet haben, werden wir Hersteller-Präfixe "-moz", "-webkit" und "-ms" hinzufügen, um sicherzustellen, dass der Farbverlauf in verschiedenen Browsern funktioniert.
 6. Demo und Download
 Unser Anmeldeformular ist jetzt vollständig. Schauen Sie sich die Demo an, um zu sehen, wie das ausgefüllte Formular aussieht. Wenn Sie sich zu irgendeinem Zeitpunkt nicht finden oder das Tutorial nicht mehr verfolgen können, müssen Sie sich keine Sorgen machen, laden Sie einfach die Dateien auf Ihren Desktop herunter und basteln Sie mit dem vorhandenen CSS-Code, um die Funktionsweise zu verstehen.
 Ich hoffe, Ihnen hat dieses Tutorial gefallen. Experimentieren Sie mit diesen Funktionen und vergessen Sie nicht, Ihre Gedanken mitzuteilen.
 Demo
 Dateien herunterladen
 
Anmerkung des Herausgebers: Dieser Beitrag wird von geschrieben Bharani M für Hongkiat.com. Bharani ist ein Designer / Entwickler aus New Delhi, Indien. Derzeit arbeitet er an Resumonk.com - einem Online-Lebenslauf-Generator, mit dem Sie in wenigen Minuten einen professionellen und schönen Lebenslauf erstellen können. Schauen Sie sich auch sein Nebenprojekt an - Quotescube.com - Ihre tägliche Dosis an Zitaten.