Home
Membuat form login dengan css tidaklah susah hanya perlu beberapa
menit untuk menyusun kode cssnya karena isian form yang dibuat hanya
username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form pendaftaran yang pasti isiannya cukup merepotkan. Sekarang saya akan berbagi tentang cara membuat form login dengan css.
Banyak variasi form login css yang bisa kita buat, baik nanti beda
warna, posisi maupun ataupun gambar latarnya. Langkah pertama adalah membuat susunan kode form html ditempatkan dibagian dalam <body>...</bodu>, lihat kode berikut :
<div id="form-login"> <form id="FLogin" name="FLogin" method="post" action=""> <h1>Login Member</h1> <label>Username </label> : <input name="username" type="text" id="username" size="20" maxlength="20" class="txt" /><br /> <label>Password </label> : <input name="password" type="password" id="password" size="20" maxlength="20" class="txt" /> <div id="tombol"><input name="btnLogin" type="submit" value="Login" class="button" /><input name="btnLogin" type="reset" value="Reset" class="button" /></div> </form> </div> |
kemudian kita buat kode css agar semua objek yang ada pada form
disesuikan posisi serta pewarnaanya. letakkan css dalam file css yang
sudah ada atau letakkan di bagian dalam <head>..</head>.
<style type="text/css"> div#form-login {
width:400px; margin:0 auto;
padding:20px; background-color:#009900;
border-radius:15px; -moz-border-radius:15px;
-webkit-border-radius:15px;border:1px solid #666;
text-align:center;font-size: small;
font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
letter-spacing: .01em;
color:#009900;
}
div#form-login form {
margin:0;padding:0;border-radius:15px; -moz-border-radius:15px;
-webkit-border-radius:15px;border:1px solid #666;
background-color:#E7FCD8;
-webkit-box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
-moz-box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
}
div#form-login form label { float:left; width:120px;}
div#form-login form .txt { padding:3px;margin:3px;}
div#form-login h1 { font:20px "Trebuchet MS"; border-bottom:1px dotted #009900;padding:5px;margin:10px;}
div#tombol { clear:both;padding:10px;}
.button{ box-shadow: rgba(0,0,0,0.1) 0px 1px 1px;padding:3px 20px; }
.button:hover,.button:focus{
color: #000; -webkit-box-shadow: rgba(0,0,0,0.25) 1px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.25) 1px 1px 3px; box-shadow: rgba(0,0,0,0.25) 1px 1px 3px;
}
</style>
|
Selesai, tinggal kita lihat hasilnya berikut..
Tidak ada komentar:
Posting Komentar