Membuat Form Login Keren
Pertama-tama Copy file Html Dibawah ini :
--------------------------------------
<html>
<head>
<title>FORM LOGIN</title>
<link href="style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<form action="index.html" class="form1">
<div class="formtitle">
Login to your account</div>
<div class="input">
<div class="inputtext">
Username: </div>
<div class="inputcontent">
<input type="text" />
</div>
</div>
<div class="input nobottomborder">
<div class="inputtext">
Password: </div>
<div class="inputcontent">
<input type="password" /><a href="">Forgot password?</a></div>
</div>
<div class="buttons">
<input class="orangebutton" type="submit" value="Login" />
<input class="greybutton" type="submit" value="Cancel" />
</div>
</form>
</body>
</html>
--------------------------------------------
<html>
<head>
<title>FORM LOGIN</title>
<link href="style.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<form action="index.html" class="form1">
<div class="formtitle">
Login to your account</div>
<div class="input">
<div class="inputtext">
Username: </div>
<div class="inputcontent">
<input type="text" />
</div>
</div>
<div class="input nobottomborder">
<div class="inputtext">
Password: </div>
<div class="inputcontent">
<input type="password" /><a href="">Forgot password?</a></div>
</div>
<div class="buttons">
<input class="orangebutton" type="submit" value="Login" />
<input class="greybutton" type="submit" value="Cancel" />
</div>
</form>
</body>
</html>
--------------------------------------------
Simpan dengan nama form.php / form.html...
Kedua Copy file cssnya dibawah ni :
.form1 {
width: 450px;
float: left;
background: #fff;
color: #777;
-webkit-box-shadow: 0px 0px 8px 2px #d1d1d1;
-moz-box-shadow: 0px 0px 8px 2px #d1d1d1;
box-shadow: 0px 0px 8px 2px #d1d1d1;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
overflow: hidden;
}
.formtitle {
padding: 10px;
line-height: 16px;
font-size: 13px;
text-shadow: -1px -1px #e87c19;
color: #fff;
font-weight: bold;
border-
bottom: 1px solid #eb8d19; width: 430px; background: #ffbd27; /* Old browsers */ background: -moz-linear-gradient(top, #ffbd27 0%, #ffb119 50%, #ff9d19 51%, #ff9d19 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbd27), color-stop(50%,#ffb119), color-stop(51%,#ff9d19), color-stop(100%,#ff9d19)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd27', endColorstr='#ff9d19',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* W3C */ } .input { width: 410px; border-bottom: 1px solid #ddd; margin-bottom: 10px; margin: 20px; overflow: hidden; } .inputtext { float: left; line-height: 18px; height: 35px; font-size: 14px; width: 120px; } .inputcontent { float: left; width: 290px; height: 50px; } .inputcontent input { padding: 5px; height: 18px; width: 200px; line-height: 18px; border: 1px solid #c7c7c7; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; color: #777; } .inputcontent a { color: #0084ff; font-size: 12px; text-decoration: none; line-height: 12px; } .nobottomborder { border-bottom: 0; } .buttons { background: #f1f1f1; border-top: 1px solid #ddd; padding: 15px; height: 34px; } .greybutton { background: #e1e1e1; /* Old browsers */ background: -moz-linear-
gradient(top, #e1e1e1 0%, #bababa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1e1e1), color-stop(100%,#bababa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* W3C */ border: 1px solid #bababa; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; line-height: 20px; font-size: 16px; padding: 6px 12px; color: #fff; text-shadow: -1px -1px #bababa; float: right; margin-left: 10px; cursor: pointer; } .greybutton:hover{ background: #bababa; /* Old browsers */ background: -moz-linear-gradient(top, #bababa 0%, #e1e1e1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#e1e1e1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* W3C */ } .orangebutton { background: #ffc339; /* Old browsers */ background: -moz-linear-gradient(top, #ffc339 0%, #ff9b19 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc339), color-stop(100%,#ff9b19)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc339', endColorstr='#ff9b19',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* W3C */ border: 1px solid #ff9b19; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; line-height: 20px; font-size: 16px; padding: 6px 12px; color: #fff; text-shadow: -1px -1px #ff9b19; float: right; margin-left: 10px; cursor: pointer; } .orangebutton:hover{ background: #ff9b19; /* Old browsers */ background: -moz-linear-gradient(top, #ff9b19 0%, #ffc339 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9b19), color-stop(100%,#ffc339)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9b19', endColorstr='#ffc339',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* W3C */ }
bottom: 1px solid #eb8d19; width: 430px; background: #ffbd27; /* Old browsers */ background: -moz-linear-gradient(top, #ffbd27 0%, #ffb119 50%, #ff9d19 51%, #ff9d19 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbd27), color-stop(50%,#ffb119), color-stop(51%,#ff9d19), color-stop(100%,#ff9d19)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbd27', endColorstr='#ff9d19',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ffbd27 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* W3C */ } .input { width: 410px; border-bottom: 1px solid #ddd; margin-bottom: 10px; margin: 20px; overflow: hidden; } .inputtext { float: left; line-height: 18px; height: 35px; font-size: 14px; width: 120px; } .inputcontent { float: left; width: 290px; height: 50px; } .inputcontent input { padding: 5px; height: 18px; width: 200px; line-height: 18px; border: 1px solid #c7c7c7; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; color: #777; } .inputcontent a { color: #0084ff; font-size: 12px; text-decoration: none; line-height: 12px; } .nobottomborder { border-bottom: 0; } .buttons { background: #f1f1f1; border-top: 1px solid #ddd; padding: 15px; height: 34px; } .greybutton { background: #e1e1e1; /* Old browsers */ background: -moz-linear-
gradient(top, #e1e1e1 0%, #bababa 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1e1e1), color-stop(100%,#bababa)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* W3C */ border: 1px solid #bababa; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; line-height: 20px; font-size: 16px; padding: 6px 12px; color: #fff; text-shadow: -1px -1px #bababa; float: right; margin-left: 10px; cursor: pointer; } .greybutton:hover{ background: #bababa; /* Old browsers */ background: -moz-linear-gradient(top, #bababa 0%, #e1e1e1 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#e1e1e1)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* W3C */ } .orangebutton { background: #ffc339; /* Old browsers */ background: -moz-linear-gradient(top, #ffc339 0%, #ff9b19 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc339), color-stop(100%,#ff9b19)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc339', endColorstr='#ff9b19',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ffc339 0%,#ff9b19 100%); /* W3C */ border: 1px solid #ff9b19; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; line-height: 20px; font-size: 16px; padding: 6px 12px; color: #fff; text-shadow: -1px -1px #ff9b19; float: right; margin-left: 10px; cursor: pointer; } .orangebutton:hover{ background: #ff9b19; /* Old browsers */ background: -moz-linear-gradient(top, #ff9b19 0%, #ffc339 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9b19), color-stop(100%,#ffc339)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9b19', endColorstr='#ffc339',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ff9b19 0%,#ffc339 100%); /* W3C */ }
Simpan file CSS dengan nama style.css..
Ketiga masukkan kedua file tersebut dalam satu folder >>>>> buka file form.php / form.html dengan mozilla firefox...
selesai.........
Langganan:
Posting Komentar (Atom)
