Mit HTML+CSS3 implementierte Anmeldeschnittstelle

<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> 

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;
}