Share For You

Membuat sebuah aplikasi tentunya selalu ada dan wajib adanya form login baik itu untuk login member maupun untuk login Admin, dan form login akan terlihat sesuatu apabila kita berikan sedikit sentuhan css sebagai pemanis tampilanya , kali ini saya akan berbagi sedikit ilmu bagaimana cara membuat form login dengan css .

Pertama kita buat dahulu file css seperti ini :


.wrapper { width: 960px; margin: 50px auto; } .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; } .formjudul { 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: #006; /* Old browsers */ background: -moz-linear-gradient(top, #CCC 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, #CCC 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #CCC 0%,#ffb119 50%,#ff9d19 51%,#ff9d19 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top,#CCC 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,#CCC 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; } .tombol { background: #f1f1f1; border-top: 1px solid #ddd; padding: 15px; height: 34px; } .tombolabu { 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; } .tombolabu: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 */ } .tombolorange { 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; } .tombolorange: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 */ }

file css yang kita buat simpan dengan nama gaya.css

Kemudian kita membuat file HTML seperti dibawah ini


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="gaya.css" rel="stylesheet" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Login Members....</title> </head> <body background="images/background.png"> <br /> <br /> <br /> <br /> <br /> <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td> <form class="form1"> <div class="formjudul"> Login Disini....::</div> <div class="input"> <div class="inputtext"> Email : </div> <div class="inputcontent"> <input type="text" name="nama" /> </div> </div> <div class="input nobottomborder"> <div class="inputtext"> Password: </div> <div class="inputcontent"> <input type="password" name="password" /> <br /><b><a href="#">Forgot Password ?</a></b> </div> </div> <div class="tombol"> <input class="tombolorange" type="submit" value="Login" name="login" /> <input class="tombolabu" type="submit" value="Cancel" /> </div> </form> </td> </tr> </table> </body> </html>

ok kita simpan dengan file login.html

nah karena file css yang kita buat terpisah maka di file login html kita memanggilnya dengan kode " <link href="gaya.css" rel="stylesheet" type="text/css" /> "


Coba sekarang sobat tes hasilnya eng..ing,.eng  ...........

Selamat Mencoba..