Membuat Halaman Login Dengan CSS

Sekarang saatnya kita merancang interface halaman login menggunakan CSS agar terlihat lebih menarik, buka notepad atau software sejenisnya untuk coding CSS. Kali ini saya menggunakan Adobe Dreamweaver cs5. Siapkan lembar kerja untuk membuat coding CSS. Setelah siap, copas script berikut

body{
background: #4E0085;
}
form {
width: 201px;
padding: 20px;
margin:150px auto;
border: 2px solid #FFFFFF;
background:url(categories-back.gif) transparent;

/*** Rounded Corners ***/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;

/*** Shadow behind the box ***/
-moz-box-shadow:0px -5px 300px #FFFFFF;
-webkit-box-shadow:0px -5px 300px #FFFFFF;

/*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
background:-moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
}
input {
width: 200px;
padding: 6px;
margin-bottom: 10px;
border-top: 1px solid #ad64e0;
border-left: 0px;
border-right: 0px;
border-bottom: 0px;
background: #8a33c6;

/*** Transition Selectors - What properties to animate and how long ***/
-webkit-transition-property: -webkit-box-shadow, background;
-webkit-transition-duration: 0.25s;

/*** Adding a small shadow ***/
-moz-box-shadow: 0px 0px 2px #000;
-webkit-box-shadow: 0px 0px 2px #000;
}
input:hover {
-webkit-box-shadow: 0px 0px 4px #000;
background: #9d39e1;
}
input.submit {
width: 100px;
color: #fff;
text-transform: uppercase;
text-shadow: #000 1px 1px;
border-top: 1px solid #ad64e0;
margin-top: 10px;
/*** Adding CSS3 Gradients ***/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
}
input.submit:hover {
-webkit-box-shadow: 0px 0px 2px #000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
}
input.submit:active {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6));
background: -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9);
}
label {
font-size: 12px;
font-family: arial, sans-serif;
list-style-type: none;
color: #fff;
text-shadow: #000 1px 1px;
margin-bottom: 5px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
}
simpan dengan nama login.css
<head>
<title>- LogIn -</title>
<link rel="stylesheet" href="login.css" type="text/css" media="all" />
</head>
<form>
<label>Username : </label>
<input type="text" name="username" />
<label>Password : </label>
<input type="password" name="password" />
<input type="submit" value="Login" name="submit" class="submit" />
</form>
simpan dengan nama login.html
Kayak gini nih hasilnya, keren coi Winking smile