Share
Wir erstellen ein minimales und glattes Anmeldeformular mit grundlegendem HTML5 und verbessern es mit einigen CSS3-Techniken. Zeit, einige einfache Elemente in etwas Schönes umzuwandeln…
Wenn Sie schöne CSS3-Formulare für Ihre Site wünschen und diese nicht selbst erstellen müssen, können Sie mit dem CSS3 Form Pack auf Envato Market nichts falsch machen. Für nur $ 5 erhalten Sie:
Kein Wunder, dass es eines der meistverkauften CSS3-Formulare auf dem Envato-Markt ist.
CSS3 Form Pack auf dem Envato Market Webformulare sind ein integraler Bestandteil des Designs einer Website. Für jeden Zweck sind Formulare eine einfache Möglichkeit für Benutzer, Werte einzugeben und Daten zu übermitteln. Wenn wir über HTML5 und CSS3 verfügen, können wir Formulare erstellen, die sowohl intuitiv zu bedienen als auch optisch ansprechend sind.
Ich glaube, dass Webdesign sauber und effizient sein sollte. Der Formularentwurf, den wir codieren werden, folgt diesen Prinzipien. Er enthält nur drei Elemente: eine Eingabe für den Benutzernamen, eine Passworteingabe und eine Eingabe für das Senden. Da das Markup so einfach ist, bietet es mehr Flexibilität, wenn es in HTML und CSS codiert wird.
Hier sind einige Elemente des Designs, die wir beim Codieren berücksichtigen müssen:
Die meisten Elemente sind CSS-Styling, aber wir werden uns das ansehen Platzhalter Attribut auch, da dies unseren Benutzern vorschlägt, welche Art von Daten sie eingeben sollten.
Beginnen wir mit der Erstellung einer sauberen HTML5-Vorlage mit einem Formular und drei Eingaben:
Slick Login
Im Moment haben wir nichts besonderes, nur ein Formular, drei Eingaben und ein leeres Dokument. Erstellen wir eine CSS-Datei mit dem Namen style.css und verlinken Sie zurück zu unserer HTML-Seite:
Denken Sie daran, dass sich die CSS-Datei derzeit in unserem Hauptverzeichnis befindet. Vergewissern Sie sich, dass Sie den richtigen Pfad verwenden, wenn Sie Ihre CSS-Datei in einem anderen Ordner wie dem Ordner ablegen 'css'.
Bevor wir der CSS-Datei einen eigenen Stil hinzufügen, ist es immer ratsam, von einer sauberen Seite auszugehen. Wir beginnen unsere Stile mit dem CSS-Reset von Eric Meyer, der das Standard-Styling entfernt und es uns ermöglicht, unsere Regeln an demselben Punkt in jedem Browser zu erstellen.
Beginnen wir mit der Definition einer Schriftart und eines Hintergrundverlaufs für unsere Anmeldeseite. Fügen Sie diesen Code nach dem CSS-Reset ein:
body font-family: serifenlos; Hintergrundfarbe: # 323B55; Hintergrundbild: -webkit-linearer Gradient (unten, # 323B55 0%, # 424F71 100%); Hintergrundbild: -moz-linearer Gradient (unten, # 323B55 0%, # 424F71 100%); Hintergrundbild: -o-linearer Gradient (unten, # 323B55 0%, # 424F71 100%); Hintergrundbild: -ms-linearer Gradient (unten, # 323B55 0%, # 424F71 100%); Hintergrundbild: linearer Gradient (unten, # 323B55 0%, # 424F71 100%);
Nun, da wir diesen Code hinzugefügt haben, sollte unsere Seite jetzt einen coolen Hintergrund mit linearem Farbverlauf haben. Der Farbverlauf beginnt am unteren Rand der Seite (0%), wobei die Farbe # 323B55 ist, und endet am oberen Rand der Seite (100%), wobei die Farbe # 424F71 ist. Nur wenn die Seite von einem Browser aus betrachtet wird, der keine Farbverläufe unterstützt, ist es wichtig, einen Browser zu deklarieren Hintergrundfarbe, was ich auf die gleiche Farbe wie der Farbverlauf auf 0% eingestellt habe. Das Tolle an CSS3-Farbverläufen ist, dass Sie viele "Stopps" hinzufügen können, beispielsweise eine weitere Farbänderung bei 25%. Das letzte Element, das im body-Tag hinzugefügt werden soll, ist das Schriftfamilie, Ich entschied mich für den Sans Serif-Typ.
Nun, da wir unsere Basis haben, ist es an der Zeit, ein paar weitere Stylings hinzuzufügen!
Bevor wir mit dem CSS-Styling für das Anmeldeformular beginnen, müssen wir unserem HTML-Dokument etwas hinzufügen. Beginnen Sie mit dem Hinzufügen eines Ich würde Zum Formular rufen wir es auf "Slick-Login". Als nächstes fügen Sie ein Platzhalter Attribut in jedem der Eingabe-Tags. So sollte die HTML-Seite bisher aussehen:
Slick Login
Das HTML5-Eingabeplatzhalterattribut ist eine großartige Ergänzung zu den Eingabe-Tags. Anstatt einen Eingabewert zu haben, den der Benutzer ersetzen muss, wird der Platzhalter Attribut ermöglicht es uns, Hilfetext anzuzeigen und verschwinden zu lassen, sobald der Benutzer das Feld eingibt. Es wird noch nicht allgemein unterstützt und sollte daher mit Vorsicht verwendet werden. Sagen wir zum Beispiel das Platzhalter Attribut funktioniert nicht in einem Browser, der Benutzer weiß nicht, welche Werte eingegeben werden sollen. Später behandeln wir eine Fallback-Technik, aber es ist auch nichts wert, dass Platzhaltertext ein Vorschlag sein sollte, anstatt die Eingabe zu kennzeichnen.
Nun, da wir unsere aktualisierte HTML-Seite haben, können wir den Anmeldeformularen ein wenig Stil hinzufügen. Hier ist das CSS für unser Formular Ich würde was wir vorher erklärt haben.
# Slick-Login Breite: 220px; Höhe: 155px; Position: absolut; links: 50%; Spitze: 50%; Rand links: -110px; Rand oben: -75px;
Für dieses Anmeldeformular entschied ich mich, es perfekt (horizontal und vertikal) in der Mitte der Seite auszurichten. Es ist ziemlich einfach, Elemente so zu positionieren. Wie Sie dem obigen Code entnehmen können, positionieren Sie das Element um 50% von oben und links. Drücken Sie dann die Randwerte und drücken Sie das Element um die Hälfte und Breite zurück. Dies ist eine großartige Methode zum Ausrichten von Elementen in der Mitte der Seite. In Bezug auf die Flexibilität ist dies jedoch nicht besonders günstig. Wenn Sie beispielsweise Elemente duplizieren möchten, müssen Sie die Werte für Breite, Höhe und Rand ändern, damit das Element ausgerichtet bleibt. Obwohl ich das Formular in der Mitte der Seite ausgerichtet habe, können Sie den Code beliebig ändern!
Nachdem wir nun unser Formular angepasst haben, ist es an der Zeit, die Eingaben zu gestalten!
Nun kommen wir wirklich zu den lustigen Sachen. Beginnen wir mit dem Hinzufügen des CSS für die Texteingabe und das Kennwort.
# Slick-Login-Eingabe [Typ = "Text"], # Slick-Login-Eingabe [Typ = "Passwort"] Breite: 100%; Höhe: 40px; Position: relativ; Rand oben: 7px; Schriftgröße: 14px; Farbe: # 444; Umriss: keine; Grenze: 1px festes rgba (0, 0, 0, .49); Polsterung links: 20px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; Hintergrund-Clip: Padding-Box; Grenzradius: 6px; Hintergrundfarbe: #fff; Hintergrundbild: -webkit-linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); Hintergrundbild: -moz-linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); Hintergrundbild: -o-linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); Hintergrundbild: -ms-linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); Hintergrundbild: linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); -webkit-box-shadow: Inset 0px 2px 0px # d9d9d9; Box-Schatten: Inset 0px 2px 0px # d9d9d9; # Slick-Login Eingabe [Typ = "Text"]: Fokus, # Slick-Login Eingabe [Typ = "Kennwort"]: Fokus -webkit-box-shadow: Einfügung 0px 2px 0px # a7a7a7; Box-Schatten: Einfügen 0px 2px 0px # a7a7a7; # Slick-Login Eingabe: first-child margin-top: 0px;
Denken Sie daran, unser Ziel ist es, die Form flexibel zu gestalten. Anstatt eine feste Eingabebreite zu deklarieren, entschied ich mich, die Breite relativ zur Breite des Formulars festzulegen. Wenn wir uns entschieden haben, die Breite des Formulars zu ändern, ändern sich alle Eingaben entsprechend.
Weil wir ein erklärt haben Rand oben Wert für alle Eingaben, müssen wir eine hinzufügen erstes Kind Wahlschalter und stellen Sie sicher, dass Rand oben des ersten Eingangs wird auf Null gesetzt. Auf diese Weise wird der erste Eingabewert immer oben im Formular positioniert.
Eine andere Sache, die man beachten sollte, ist die Einstellung der Gliederung keine Eigenschaft, damit der Browser unseren Eingaben keine unerwünschten Konturen hinzufügt.
Um das Formular flexibler zu gestalten, fügen wir einen transparenten Rahmen hinzu, sodass sich das Formular unabhängig vom Hintergrund der Website ändern kann. Weil der Opazität Wenn das Attribut die Deckkraft des gesamten Elements ändert, habe ich beschlossen, nach einer Methode zu suchen, um nur die Grenzdeckkraft zu ändern.
Wenn Sie die Rahmenfarbe in rgba angeben, können Sie einen Alpha-Wert hinzufügen. Wie Sie oben sehen können, ist unsere Umrandung eine durchgehende schwarze Umrandung, die Deckkraft beträgt jedoch 47%..
In unserem Design wird der Text im Feld nach rechts verschoben. Um diesen Effekt in CSS zu erreichen, können Sie einfach die Polsterung links Eigenschaft und setzen Sie es auf 20px. Wenn wir den Code rendern, entsteht ein Problem. Der Auffüllwert erhöht die Eingabebreite um 20 Pixel, was wir nicht möchten.
Um dies zu beheben, können wir eine hinzufügen Hintergrund-Clip Eigenschaft und setzen Sie den Wert auf padding-box. Dieser CSS-Ausschnitt stellt sicher, dass die Auffüllung die Breite der Eingabe nicht beeinflusst. Sie können mehr über das lernen Hintergrund-Clip Eigenschaft bei Mozilla.
Eine weitere sehr coole CSS3-Eigenschaft ist Box Schatten. Mit dem Parameter inset können wir einen inneren Schatten auf dem Eingabeelement erzeugen. Verwendung der Fokus Mit dem Selektor können wir die Werte und Farben leicht ändern, wenn der Benutzer auf das Feld klickt.
Der Submit-Button ist ein sehr wichtiger Teil eines Formulars, also machen wir es deutlich! Hier ist das CSS, das wir für die Eingabe verwenden werden:
# Slick-Login Eingabe [Typ = "Senden"] Breite: 100%; Höhe: 50px; Rand oben: 7px; Farbe: #fff; Schriftgröße: 18px; Schriftdicke: fett; Text-Schatten: 0px -1px 0px # 5b6ddc; Umriss: keine; Grenze: 1px festes rgba (0, 0, 0, .49); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; Hintergrund-Clip: Padding-Box; Grenzradius: 6px; Hintergrundfarbe: # 5466da; Hintergrundbild: -webkit-linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); Hintergrundbild: -moz-linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); Hintergrundbild: -o-linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); Hintergrundbild: -ms-linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); Hintergrundbild: linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); Cursor: Zeiger; -webkit-box-shadow: Einfügung von 0px 1px 0px # 9ab1ec; Box-Schatten: Einfügung 0px 1px 0px # 9ab1ec; # slick-login input [type = "submit"]: hover Hintergrundfarbe: # 5f73e9; Hintergrundbild: -webkit-linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); Hintergrundbild: -moz-linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); Hintergrundbild: -o-linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); Hintergrundbild: -ms-linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); Hintergrundbild: linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); -webkit-box-shadow: Einfügung von 0px 1px 0px # aab9f4; Box-Schatten: Einfügen 0px 1px 0px # aab9f4; Rand oben: 10px; # slick-login input [type = "submit"]: aktiv Hintergrundfarbe: # 7588e1; Hintergrundbild: -webkit-linearer Gradient (unten, # 7588e1 0%, # 7184df 100%); Hintergrundbild: -moz-linearer Gradient (unten, # 7588e1 0%, # 7184df 100%); Hintergrundbild: -o-linearer Gradient (unten, # 7588e1 0%, # 7184df 100%); Hintergrundbild: -ms-linearer Gradient (unten, # 7588e1 0%, # 7184df 100%); Hintergrundbild: linearer Farbverlauf (unten, # 7588e1 0%, # 7184df 100%); -webkit-box-shadow: Einfügung 0px 1px 0px # 93a9e9; Box-Schatten: Einfügung 0px 1px 0px # 93a9e9;
Das CSS für unseren Submit-Button ist recht einfach. Wir verwenden Ränder, Farbverläufe und innere Schatten, um die Schaltfläche hervorzuheben. Eine weitere CSS3-Eigenschaft, die wir uns ansehen werden, ist Text-Schatten.
Damit der Button-Text noch etwas hervorgehoben wird, fügen wir einen 1px-Schatten über dem Text hinzu. Mit einer dunkleren Farbe (# 5b6ddc) können wir den weißen Text vor dem hellblauen Hintergrund stärker hervorheben. Sogar der subtilste Effekt, wie das Hinzufügen eines Textschattens, kann Ihrem Design eine Menge hinzufügen und Text hervorheben.
Ich ging voran und fügte den Code für das hinzu schweben und aktiv Selektoren. Alles, was geändert wird, ist die Farbe des Farbverlaufs und des inneren Schattens. Beachten Sie, dass die Farbänderung eher subtil ist, aber dem Design viel hinzufügen. Ich habe auch den Wert von geändert Rand oben im Hover-Zustand um drei Pixel niedriger. Die Änderung fühlt sich natürlich an und trägt zur Eleganz der Form bei.
Bisher sieht alles großartig aus, aber wenn Sie den Mauszeiger darüber halten und auf einige Elemente klicken, wirkt es etwas abgehackt. Zeit, eine Animation hinzuzufügen!
Um die Dinge besser fließen zu lassen, fügen wir diesen Eingaben CSS-Code hinzu:
-Webkit-Übergang: alle .1s Easy-In-Out; -moz-Übergang: alle .1s-Inaktivität -o-Übergang: alle .1s-Inaktivität -ms-Übergang: alle .1s-Inaktivität Übergang: alle .1s Easy-In-Out;
Durch einen schnellen und einfachen Übergang sehen und fühlen sich alle unsere Elemente viel besser aus. Beachten Sie den Übergang der inneren Schattenfarbe bei den Texteingaben und die Schaltfläche zum Senden der Schaltfläche beim Schweben. Die Übergänge lassen das Formular vollständig aussehen.
Obwohl alles gut aussieht, fügen wir noch ein paar Goodies hinzu, bevor wir es als Tag bezeichnen.
Um sicherzustellen, dass unser Formular ordnungsgemäß zugänglich ist, fügen Sie dieses Markup neben Ihrem hinzu Eingang Stichworte:
Da wir unser Formular so einfach wie möglich gestalten möchten, haben wir uns für die Verwendung des Formats entschieden Platzhalter Attribut. Ein anderer Weg, der auch hätte funktionieren können, wäre das Hinzufügen eines Etikette Etikett. Da wir das Tag in unserem Design nicht benötigen, sondern aus Gründen der Barrierefreiheit und der SEO-Funktion, fügen wir diesen CSS-Code in folgender Zeile hinzu:
# Slick-Login-Label Anzeige: keine;
Einstellen der Anzeige Eigentum zu niemandem erreicht das Aussehen, das wir wollen, was in diesem Fall überhaupt kein Blick ist!
Kommen wir nun zu dem potenziellen Problem zurück, das wir mit dem haben würden Platzhalter Attribut. Angenommen, jemand betrachtet diese Website von einem Browser aus, der nicht unterstützt wird Platzhalter: Unsere leeren Eingaben wären nicht hilfreich. Um dies zu beheben, verwenden wir jQuery und Modernizr, um Support zu erkennen und Situationen zu korrigieren, in denen es keine gibt. Lassen Sie uns zunächst die Skripts mit unserer HTML-Seite verknüpfen.
Legen Sie die Skript-Tags in der
von Ihrem HTML. Um eine optimale Leistung zu erzielen, sollten Sie sie nach Ihren Style-Sheet-Referenzen folgen lassen. Der Grund, warum wir empfehlen, Modernizr im Kopf zu platzieren, hat zwei Gründe: Das HTML5-Shiv (das HTML5-Elemente im IE aktiviert) muss vor dem ausgeführt werden - Modernizr
Erstellen Sie nun eine neue Javascript-Datei mit dem Namen placeholder.js. Unique Method bietet eine großartige Möglichkeit, um mit Modernizr einen Fallback für die Platzhalter Attribut. Fügen Sie diesen Code in die Javascript-Datei ein:
Accentsconagua
$ (function () // Platzhalter-Browser-Unterstützung prüfen if (! Modernizr.input.placeholder) // Platzhalterwerte setzen $ (this) .find ('[Platzhalter]'). each (function () if ($.) (this) .val () == ") // wenn das Feld leer ist $ (this) .val ($ (this) .attr ('placeholder'));;) // Fokus und Unschärfe der Platzhalter $ ('[Platzhalter]'). focus (Funktion () if ($ (this) .val () == $ (this) .attr ('placeholder')) $ (this) .val ("); $ (this) .removeClass ('placeholder');.. blur (function () if ($ (this) .val () == "|| $ (this) .val () == $ (this) .attr ('placeholder')) $ (this) .val ($ (this) .attr ('placeholder')); $ (this) .addClass ('placeholder');;) // entfernen Platzhalter auf Submit $ ('[Platzhalter]'). Am nächsten ('Form'). Submit (Funktion () $ (this) .find ('[Platzhalter]'). each (Funktion () if ($ (this).) val () == $ (this) .attr ('placeholder')) $ (this) .val ("););); Wir werden die Javascript-Datei auch mit unserer HTML-Seite verlinken:
Damit dies funktioniert, müssen wir ein hinzufügen Platzhalter Klasse zu den Feldeingaben:
Nun fügen wir das Styling für die hinzu Platzhalter Klasse in unserer CSS-Datei:
.Platzhalter Farbe: # 444;
Wenn wir gerade dabei sind, fügen wir noch ein hilfreiches CSS-Snippet hinzu, das sicherstellt, dass die Breite der Eingaben unabhängig von der Auffüllung und den Rändern gleich bleibt:
* -moz-box-dimensionierung: border-box; -webkit-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box;
Weitere Informationen zu den Gründen Box-Sizing ist so toll, Paul Irish hat eine großartige Erklärung.
Um unser Formular zu machen sogar mehr Wenn Sie die Seite laden, fügen wir dem Formular eine einfache steigende Animation hinzu. Beginnen wir mit der Deklaration der Animation und dem Hinzufügen von Keyframes:
@keyframes "login" 0% -ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; Filter: Alpha (Deckkraft = 0); Deckkraft: 0; Rand oben: -50px; 100% -ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; Filter: Alpha (Deckkraft = 100); Deckkraft: 1; Rand oben: -75px; @ -moz-keyframes login 0% filter: alpha (Deckkraft = 0); Deckkraft: 0; Rand oben: -50px; 100% Filter: Alpha (Deckkraft = 100); Deckkraft: 1; Rand oben: -75px; @ -webkit-keyframes "login" 0% filter: alpha (opacity = 0); Deckkraft: 0; Rand oben: -50px; 100% Filter: Alpha (Deckkraft = 100); Deckkraft: 1; Rand oben: -75px; @ -ms-keyframes "login" 0% -ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; Filter: Alpha (Deckkraft = 0); Deckkraft: 0; Rand oben: -50px; 100% -ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; Filter: Alpha (Deckkraft = 100); Deckkraft: 1; Rand oben: -75px; @ -o-Keyframes "login" 0% filter: alpha (Deckkraft = 0); Deckkraft: 0; Rand oben: -50px; 100% Filter: Alpha (Deckkraft = 100); Deckkraft: 1; Rand oben: -75px;
Das CSS oben erklärt eine neue Animation namens Anmeldung und ändert die Rand oben und Opazität Werte, so dass die Form einblendet und in Position steigt. Nun fügen wir CSS für das hinzu Slick-Login Ich würde:
-Webkit-Animation: Login 1s Easy-In-Out; -moz-animation: logins ist leicht zu bedienen; -ms-animation: logins ist leicht zu bedienen; -o-animation: logins-komfort-in-out; Animation: Login 1s Easy-In-Out;
Jedes Mal, wenn die Seite geladen wird, wird nun die eine Sekunde Animation ausgeführt. Nun, da wir gestylt, fixiert und animiert haben, sind wir fertig!
Hier sehen Sie den endgültigen HTML-Code für dieses schicke Anmeldeformular:
Slick Login
Und das CSS:
/ * CSS RESET http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Lizenz: none (public domain) * / html, body, div, span, applet, objekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adresse, groß, zitieren, code, del, dfn, em, img, ins, kbd, q, s, samp, klein, streik, stark, sub, sup, tt, var, b, u, ich, zentrum, dl, dt, dd, ol, ul, li, fieldset, formular, beschriftung, legende, tabelle, titel, tfoot, tread, th, td, artikel, beiseite, leinwand, details, einbetten, figur, figcaption, footer, header, hGruppe, Menü, Navi, Ausgabe, Rubin, Abschnitt, Zusammenfassung, Zeit, Marke, Audio, Video Marge: 0; Polsterung: 0; Grenze: 0; Schriftgröße: 100%; font: erben; vertikal ausrichten: Grundlinie; / * HTML5-Anzeige-Rollen-Reset für ältere Browser * / Artikel, beiseite, Details, Abbildung, Fußzeile, Kopfzeile, hgroup, Menü, nav, Abschnitt display: block; body Zeilenhöhe: 1; ol, ul list-style: none; blockquote, q Anführungszeichen: keine; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; / * CSS Animations * / @keyframes" login "0% -ms-filter:" Progid: DXImageTransform.Microsoft.Alpha (Opacity = 0) "; Filter: Alpha (Opacity = 0); Opazität: 0; Rand oben: -50px; 100% -ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; Filter: Alpha (Opacity = 100); Opazität: 1; Rand oben: -75px; @ -moz-keyframes login 0 % Filter: Alpha (Deckkraft = 0); Deckkraft: 0; Rand oben: -50px; 100% Filter: Alpha (Deckkraft = 100); Deckkraft: 1; Rand oben: -75px; @ - Webkit-Keyframes "login" 0% Filter: Alpha (Deckkraft = 0); Deckkraft: 0; Rand oben: -50px; 100% Filter: Alpha (Deckkraft = 100); Deckkraft: 1; Rand oben : -75px; @ -ms-keyframes "login" 0% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 0)"; filter: alpha (Opacity = 0); opacity: 0 ; margin-top: -50px; 100% -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 100)"; Filter: Alpha (Deckkraft = 100); Deckkraft: 1; Rand oben: -75px; @ -o-Keyframes "login" 0% filter: alpha (Deckkraft = 0); Deckkraft: 0; Rand oben: -50px; 100% Filter: Alpha (Deckkraft = 100); Deckkraft: 1; Rand oben: -75px; / * Main CSS * / * -moz-box-sizeizing: border-box; -webkit-box-dimensionierung: border-box; Box-Dimensionierung: Border-Box; body font-family: serifenlos; Hintergrundfarbe: # 323B55; Hintergrundbild: -webkit-linearer Gradient (unten, # 323B55 0%, # 424F71 100%); Hintergrundbild: -moz-linearer Gradient (unten, # 323B55 0%, # 424F71 100%); Hintergrundbild: -o-linearer Gradient (unten, # 323B55 0%, # 424F71 100%); Hintergrundbild: -ms-linearer Gradient (unten, # 323B55 0%, # 424F71 100%); Hintergrundbild: linearer Gradient (unten, # 323B55 0%, # 424F71 100%); # Slick-Login Breite: 220px; Höhe: 155px; Position: absolut; links: 50%; Spitze: 50%; Rand links: -110px; Rand oben: -75px; -webkit-animation: logins-komfort-in-out; -moz-animation: logins ist leicht zu bedienen; -ms-animation: logins ist leicht zu bedienen; -o-animation: logins-komfort-in-out; Animation: Login 1s Easy-In-Out; # Slick-Login-Label Anzeige: keine; .placeholder color: # 444; # Slick-Login-Eingabe [Typ = "Text"], # Slick-Login-Eingabe [Typ = "Passwort"] Breite: 100%; Höhe: 40px; Position: relativ; Rand oben: 7px; Schriftgröße: 14px; Farbe: # 444; Umriss: keine; Grenze: 1px festes rgba (0, 0, 0, .49); Polsterung links: 20px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; Hintergrund-Clip: Padding-Box; Grenzradius: 6px; Hintergrundbild: -webkit-linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); Hintergrundbild: -moz-linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); Hintergrundbild: -o-linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); Hintergrundbild: -ms-linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); Hintergrundbild: linearer Gradient (unten, #FFFFFF 0%, # F2F2F2 100%); -webkit-box-shadow: Inset 0px 2px 0px # d9d9d9; Box-Schatten: Inset 0px 2px 0px # d9d9d9; -webkit-Übergang: alle .1s Easy-In-Out; -moz-Übergang: alle .1s-Inaktivität -o-Übergang: alle .1s-Inaktivität -ms-Übergang: alle .1s-Inaktivität Übergang: alle .1s Easy-In-Out; # Slick-Login Eingabe [Typ = "Text"]: Fokus, # Slick-Login Eingabe [Typ = "Kennwort"]: Fokus -webkit-box-shadow: Einfügung 0px 2px 0px # a7a7a7; Box-Schatten: Einfügen 0px 2px 0px # a7a7a7; # Slick-Login Eingabe: first-child margin-top: 0px; # slick-login input [type = "submit"] width: 100%; Höhe: 50px; Rand oben: 7px; Farbe: #fff; Schriftgröße: 18px; Schriftdicke: fett; Text-Schatten: 0px -1px 0px # 5b6ddc; Umriss: keine; Grenze: 1px festes rgba (0, 0, 0, .49); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; Hintergrund-Clip: Padding-Box; Grenzradius: 6px; Hintergrundfarbe: # 5466da; Hintergrundbild: -webkit-linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); Hintergrundbild: -moz-linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); Hintergrundbild: -o-linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); Hintergrundbild: -ms-linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); Hintergrundbild: linearer Gradient (unten, # 5466da 0%, # 768ee4 100%); -webkit-box-shadow: Einfügung von 0px 1px 0px # 9ab1ec; Box-Schatten: Einfügung 0px 1px 0px # 9ab1ec; Cursor: Zeiger; -webkit-Übergang: alle .1s Easy-In-Out; -moz-Übergang: alle .1s-Inaktivität -o-Übergang: alle .1s-Inaktivität -ms-Übergang: alle .1s-Inaktivität Übergang: alle .1s Easy-In-Out; # slick-login input [type = "submit"]: hover Hintergrundfarbe: # 5f73e9; Hintergrundbild: -webkit-linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); Hintergrundbild: -moz-linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); Hintergrundbild: -o-linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); Hintergrundbild: -ms-linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); Hintergrundbild: linearer Gradient (unten, # 5f73e9 0%, # 859bef 100%); -webkit-box-shadow: Einfügung von 0px 1px 0px # aab9f4; Box-Schatten: Einfügen 0px 1px 0px # aab9f4; Rand oben: 10px; # slick-login input [type = "submit"]: aktiv Hintergrundfarbe: # 7588e1; Hintergrundbild: -webkit-linearer Gradient (unten, # 7588e1 0%, # 7184df 100%); Hintergrundbild: -moz-linearer Gradient (unten, # 7588e1 0%, # 7184df 100%); Hintergrundbild: -o-linearer Gradient (unten, # 7588e1 0%, # 7184df 100%); Hintergrundbild: -ms-linearer Gradient (unten, # 7588e1 0%, # 7184df 100%); Hintergrundbild: linearer Farbverlauf (unten, # 7588e1 0%, # 7184df 100%); -webkit-box-shadow: Einfügung 0px 1px 0px # 93a9e9; Box-Schatten: Einfügung 0px 1px 0px # 93a9e9;
Hier ist ein Blick auf das Endergebnis:
Das Tolle an diesem Formular ist, dass es sehr einfach ist, es zu ändern. Es ist auch sehr einfach zu erweitern, weitere Eingaben hinzuzufügen, Validierung, Funktionalität usw. Vielen Dank für das Lesen und ich hoffe, Sie haben etwas gelernt. Ich würde gerne wissen, wofür Sie das verwenden!
