Efekt obrazu za pomocą CSS3 i HTML z tekstem wejściowym i przyciskiem przesyłania - html5, image, css3, html5-canvas, gradienty

Mam obraz ekranu logowania, jak wspomniano poniżej:

Czy istnieje sposób na stworzenie podobnego obrazu tylko za pomocą CSS3 i HTML5? Gdzie Podkreślenie po "Nazwa użytkownika:" i "Hasło:" jest typem wejściowym = "tekst" bez granic (aby użytkownik mógł wpisać tekst)

Login to przycisk. Wszystkie te pola są umieszczone w formularzu HTML.

Odpowiedzi:

Możesz stylizować elementy w ten sposób:

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

Jakiś fałszywy 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>

Demo online tutaj

Wystarczy zastąpić tło planszy obrazem, którego używasz, i użyć rzeczywistej czcionki.