Bildeffekt mit CSS3 und HTML mit Eingabetext und Übergabeschaltfläche - html5, image, css3, html5-canvas, Farbverläufe

Ich habe ein Login-Bild wie unten erwähnt:

Gibt es eine Möglichkeit, ein ähnliches Bild nur mit CSS3 und HTML5 zu erstellen? Wo Underline nach "Username:" & "Password:" eingegeben wird type = "text" ohne Rahmen (So kann der Benutzer Text eingeben)

Und Login ist der Button. Und alle diese Felder sind in HTML Form platziert.

Antworten:

Sie können die Elemente auf diese Weise stylen:

#box { /* Container box */
width:450px;
padding:50px;
background:#463; /* set image here */
}
#usr, #pwd { /* input boxes */
border:none;
border-bottom:3px solid white;
background:transparent;
color:#fff;
font:bold 24px sans-serif;
}
#box > div { /* container for lines (label + input) */
margin-bottom:26px;
}
#box > div > label,
#box > button {
color:#fff;
font:bold 24px sans-serif;
}
#box > button { /* A simple button */
background:transparent;
border:none;
text-align:center;
color:#ff0;
width:100%;
}

Einige Dummy-HTML:

<div id="box">
<div>
<label for="usr">Username:</label>
<input id="usr">
</div>
<div>
<label for="pwd">Password:</label>
<input id="pwd" type="password">
</div>
<button id="login">Login</button>
</div>

Online Demo hier

Ersetzen Sie einfach den Hintergrund für die Karte durch das verwendete Bild und verwenden Sie die tatsächliche Schriftart.