Mit HTML+CSS3 implementierte Anmeldeschnittstelle
|
Ergebnisse erzielen
Bauen Sie zunächst mit HTML ein Grundgerüst auf <Text> <div Klasse="Container"> <Abschnitts-ID="Inhalt"> <Formularaktion=""> <h1>Anmeldeformular</h1> <div> <input type="text" placeholder="Benutzername" required="" id="Benutzername" /> </div> <div> <input type="password" placeholder="Passwort" required="" id="password" /> </div> <div> <input type="submit" value="Anmelden" /> <a href="#">Passwort vergessen?</a> <a href="#">Registrieren</a> </div> </form><!-- Formular --> <div Klasse="Schaltfläche"> <a href="#">Quelldatei herunterladen</a> </div><!-- Schaltfläche --> </Abschnitt><!-- Inhalt --> </div><!-- Container --> </body>
Dann verschönern Sie es mit CSS3
Körper {
Hintergrund: #DCDDDF-URL (https://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
Farbe: #000;
Schriftart: 14px Arial;
Rand: 0 automatisch;
Polsterung: 0;
Position: relativ;
}
h1{ Schriftgröße:28px;}
h2{ Schriftgröße:26px;}
h3{ Schriftgröße:18px;}
h4{ Schriftgröße:16px;}
h5{ Schriftgröße:14px;}
h6{ Schriftgröße:12px;}
h1,h2,h3,h4,h5,h6{ Farbe:#563D64;}
klein{ Schriftgröße:10px;}
b, stark{ font-weight:bold;}
eine {Textdekoration: keine;}
a:hover{ Textdekoration: Unterstreichung; }
.links { float:links; }
.rechts { float:rechts; }
.alignleft { float: links; Rand rechts: 15px; }
.alignright { float: rechts; Rand links: 15px; }
.clearfix:nach,
form:nach {
Inhalt: ".";
Anzeige: Block;
Höhe: 0;
klar: beides;
Sichtbarkeit: versteckt;
}
.container { Rand: 25px auto; Position: relativ; Breite: 900px; }
#Inhalt {
Hintergrund: #f9f9f9;
Hintergrund: -moz-linear-gradient(oben, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
Hintergrund: -webkit-linear-gradient(oben, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
Hintergrund: -o-linear-gradient(oben, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
Hintergrund: -ms-linear-gradient(oben, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
Hintergrund: linearer Farbverlauf (oben, rgba (248,248,248,1) 0 %, rgba (249,249,249,1) 100 %);
Filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
-webkit-box-shadow: 0 1px 0 #fff Einschub;
-moz-box-shadow: 0 1px 0 #fff Einschub;
-ms-box-shadow: 0 1px 0 #fff Einschub;
-o-box-shadow: 0 1px 0 #fff Einschub;
Box-Schatten: 0 1px 0 #fff Einschub;
Rand: 1px durchgezogen #c4c6ca;
Rand: 0 automatisch;
Polsterung: 25px 0 0;
Position: relativ;
Textausrichtung: zentriert;
Textschatten: 0 1px 0 #fff;
Breite: 400px;
}
#Inhalt h1 {
Farbe: #7E7E7E;
Schriftart: fett 25px Helvetica, Arial, serifenlos;
Buchstabenabstand: -0,05em;
Zeilenhöhe: 20px;
Rand: 10px 0 30px;
}
#Inhalt h1:vorher,
#Inhalt h1:nach {
Inhalt: "";
Höhe: 1px;
Position: absolut;
oben: 10px;
Breite: 27%;
}
#Inhalt h1:nach {
Hintergrund: rgb(126,126,126);
Hintergrund: -moz-linear-gradient(links, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
Hintergrund: -webkit-linear-gradient(links, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
Hintergrund: -o-linear-gradient(links, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
Hintergrund: -ms-linear-gradient(links, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
Hintergrund: linearer Farbverlauf (links, rgba (126,126,126,1) 0 %, rgba (255,255,255,1) 100 %);
rechts: 0;
}
#Inhalt h1:vor {
Hintergrund: rgb(126,126,126);
Hintergrund: -moz-linear-gradient(rechts, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
Hintergrund: -webkit-linear-gradient(rechts, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
Hintergrund: -o-linear-gradient(rechts, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
Hintergrund: -ms-linear-gradient(rechts, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
Hintergrund: linearer Farbverlauf (rechts, rgba(126,126,126,1) 0 %, rgba(255,255,255,1) 100 %);
links: 0;
}
#Inhalt:nach,
#Inhalt:vor {
Hintergrund: #f9f9f9;
Hintergrund: -moz-linear-gradient(oben, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
Hintergrund: -webkit-linear-gradient(oben, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
Hintergrund: -o-linear-gradient(oben, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
Hintergrund: -ms-linear-gradient(oben, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
Hintergrund: linearer Farbverlauf (oben, rgba (248,248,248,1) 0 %, rgba (249,249,249,1) 100 %);
Filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
Rand: 1px durchgezogen #c4c6ca;
Inhalt: "";
Anzeige: Block;
Höhe: 100%;
links: -1px;
Position: absolut;
Breite: 100 %;
}
#Inhalt:nach {
-webkit-transform: drehen (2 Grad);
-moz-transform:drehen(2Grad);
-ms-transform:drehen(2Grad);
-o-transform: drehen (2 Grad);
transformieren: drehen (2 Grad);
oben: 0;
z-Index: -1;
}
#Inhalt:vor {
-webkit-transform: drehen(-3 Grad);
-moz-transform:drehen(-3Grad);
-ms-transform:drehen(-3Grad);
-o-transform: drehen(-3Grad);
transformieren: drehen (-3 Grad);
oben: 0;
z-Index: -2;
}
#Inhaltsformular { Rand: 0 20px; Position: relativ }
#Inhaltsformulareingabe[Typ="Text"],
#Inhaltsformulareingabe[Typ="Passwort"] {
-Webkit-Randradius: 3px;
-moz-Randradius: 3px;
-ms-border-radius: 3px;
-o-Randradius: 3px;
Rahmenradius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0,0,08) Einschub;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0,0,08) Einschub;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0,0,08) Einschub;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0,0,08) Einschub;
Boxschatten: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0,0,08) Einschub;
-webkit-transition: alle 0,5 s mühelos;
-moz-transition: alle 0,5 s mühelos;
-ms-Übergang: alle 0,5 s Pause;
-o-Übergang: alle 0,5 s langsam;
Übergang: alle 0,5 s mühelos;
Hintergrund: #eae7e7 URL (https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) keine Wiederholung;
Rand: 1px durchgezogen #c8c8c8;
Farbe: #777;
Schriftart: 13px Helvetica, Arial, serifenlos;
Rand: 0 0 10px;
Polsterung: 15px 10px 15px 40px;
Breite: 80%;
}
#Inhaltsformulareingabe[Typ="Text"]:Fokus,
#Inhaltsformulareingabe[Typ="Passwort"]:Fokus {
-webkit-box-shadow: 0 0 2px #ed1c24 Einschub;
-moz-box-shadow: 0 0 2px #ed1c24 Einschub;
-ms-box-shadow: 0 0 2px #ed1c24 Einschub;
-o-box-shadow: 0 0 2px #ed1c24 Einschub;
Box-Schatten: 0 0 2px #ed1c24 Einschub;
Hintergrundfarbe: #fff;
Rand: 1px durchgezogen #ed1c24;
Gliederung: keine;
}
#Benutzername { Hintergrundposition: 10px 10px !wichtig }
#Passwort { Hintergrundposition: 10px -53px !wichtig }
#Inhaltsformulareingabe[Typ="Senden"] {
Hintergrund: rgb(254,231,154);
Hintergrund: -moz-linear-gradient(oben, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
Hintergrund: -webkit-linear-gradient(oben, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
Hintergrund: -o-linear-gradient(oben, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
Hintergrund: -ms-linear-gradient(oben, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
Hintergrund: linearer Farbverlauf (oben, rgba(254,231,154,1) 0 %, rgba(254,193,81,1) 100 %);
Filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
-Webkit-Randradius: 30px;
-moz-Randradius: 30px;
-ms-border-radius: 30px;
-o-Randradius: 30px;
Rahmenradius: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0,8) Einschub;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0,8) Einschub;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0,8) Einschub;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0,8) Einschub;
Box-Schatten: 0 1px 0 rgba(255,255,255,0,8) Einschub;
Rand: 1px durchgezogen #D69E31;
Farbe: #85592e;
Cursor: Zeiger;
schweben: links;
Schriftart: fett 15px Helvetica, Arial, serifenlos;
Höhe: 35px;
Rand: 20px 0 35px 15px;
Position: relativ;
Textschatten: 0 1px 0 rgba(255,255,255,0,5);
Breite: 120px;
}
#Inhaltsformulareingabe[Typ="Senden"]:hover {
Hintergrund: rgb(254,193,81);
Hintergrund: -moz-linear-gradient(oben, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
Hintergrund: -webkit-linear-gradient(oben, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
Hintergrund: -o-linear-gradient(oben, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
Hintergrund: -ms-linear-gradient(oben, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
Hintergrund: linearer Farbverlauf (oben, rgba(254,193,81,1) 0 %, rgba(254,231,154,1) 100 %);
Filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#Inhaltsformular div a {
Farbe: #004a80;
schweben: rechts;
Schriftgröße: 12px;
Rand: 30px 15px 0 0;
Textdekoration: Unterstreichen;
}
.Taste {
Hintergrund: rgb(247,249,250);
Hintergrund: -moz-linear-gradient(oben, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
Hintergrund: -webkit-linear-gradient(oben, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
Hintergrund: -o-linear-gradient(oben, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
Hintergrund: -ms-linear-gradient(oben, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
Hintergrund: linearer Farbverlauf (oben, rgba(247,249,250,1) 0 %, rgba(240,240,240,1) 100 %);
Filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0,1) Einschub;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0,1) Einschub;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0,1) Einschub;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0,1) Einschub;
Box-Schatten: 0 1px 2px rgba(0,0,0,0,1) Einschub;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-o-Randradius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
Rahmenradius: 0 0 5px 5px;
Rahmen oben: 1px durchgezogen #CFD5D9;
Polsterung: 15px 0;
}
.button ein {
Hintergrund: URL (https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px keine Wiederholung;
Farbe: #7E7E7E;
Schriftgröße: 17px;
Polsterung: 2px 0 2px 40px;
Textdekoration: keine;
-webkit-transition: alles 0,3 s mühelos;
-moz-transition: alle 0,3 s mühelos;
-ms-Übergang: alle 0,3 s Pause;
-o-Übergang: alle 0,3 s mühelos;
Übergang: alle 0,3 s mühelos;
}
.button a:hover {
Hintergrundposition: 0 -135px;
Farbe: #00aeef;
}
Oben sind die Details der von HTML + CSS3 implementierten Anmeldeschnittstelle aufgeführt. Weitere Informationen zur HTML + CSS3-Anmeldeschnittstelle finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
<<: Einführung in Linux-Komprimierungs- und Dekomprimierungsbefehle
>>: JavaScript zum Erzielen eines ausgewogenen digitalen Scroll-Effekts
Artikel empfehlen
So installieren Sie pyenv unter Linux
Voraussetzungen Git muss installiert werden Insta...
Detaillierte Erklärung, wie Sie die Fallstricke beim Ersetzen von logischem SQL in MySQL vermeiden können
Der Unterschied zwischen „Ersetzen durch“ und „Ei...
Einige Fehler, die JavaScript-Anfänger häufig machen
Inhaltsverzeichnis Vorwort Verwechslung von „unde...
Implementierung eines einfachen Studenteninformationsmanagementsystems auf Basis von VUE
Inhaltsverzeichnis 1. Hauptfunktionen 2. Umsetzun...
mysql5.7.21.zip Installations-Tutorial
Der detaillierte Installationsprozess von mysql5....
So verwenden Sie „Explain“, um den SQL-Ausführungsplan in MySql abzufragen
Der Befehl „Explain“ ist die primäre Möglichkeit,...
Details nach dem Setzen des src des Iframes auf about:blank
Nachdem die Quelle des Iframes auf „about:blank“ g...
JavaScript-Entwurfsmuster, Lernadaptermuster
Inhaltsverzeichnis Überblick Code-Implementierung...
Umfassendes Verständnis der Node-Ereignisschleife
Inhaltsverzeichnis Knoten-Ereignisschleife Ereign...
MySQL etabliert eine effiziente Indexbeispielanalyse
Dieser Artikel beschreibt anhand von Beispielen, ...
MySQL-Datentabellenpartitionierungsstrategie und Vor- und Nachteileanalyse
Inhaltsverzeichnis Warum brauchen wir Partitionen...
So erstellen Sie eine Datenbank in Navicat 8 für MySQL
Beim Entwickeln einer Website müssen Sie häufig e...
Implementierung der CSS-Bildlaufleisten-Stileinstellungen
WebKit-Bildlaufleistenstil zurücksetzen 1. Die Bi...
Zusammenfassung der MySQL-Nutzungsspezifikationen
1. Es muss die InnoDB-Speicher-Engine verwendet w...
So verwenden Sie Vue3-Mixin
Inhaltsverzeichnis 1. Wie verwende ich Mixin? 2. ...