Penampakan Login Formnya seperti berikut
Tertarik? Cekidot
Gampang sob
Pertama Kita Mark Up dulu HTMLnya
misal
<!DOCTYPE HTML>
<html>
<head>
<title>Rishad - Login Form</title>
<link rel='stylesheet' type='text/css' href="loginformstyle.css"/>
<script type="text/javascript" src="javascriptloginform.js"/>
</head>
<body>
<span href="#" class="button" id="toggle-login">Log in</span>
<div id="login">
<div id="triangle"></div>
<h1>Log in</h1>
<form>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<input type="submit" value="Log in" />
</form>
</div>
</body>
</HTML>
Nah Simpan dengan nama bebas dengan ekstensi *.html
sekarang kita buat Document baru dengan nama loginformstyle.css
Lalu kita isi :
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
*{margin:0;padding:0;}
body{
background:#567;
font-family:'Open Sans',sans-serif;
}
.button{
width:100px;
background:#3399cc;
display:block;
margin:0 auto;
margin-top:1%;
padding:10px;
text-align:center;
text-decoration:none;
color:#fff;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}
.button:hover{
background:#2288bb;
}
#login{
width:400px;
margin:0 auto;
margin-top:8px;
margin-bottom:2%;
transition:opacity 1s;
-webkit-transition:opacity 1s;
}
#triangle{
width:0;
border-top:12x solid transparent;
border-right:12px solid transparent;
border-bottom:12px solid #3399cc;
border-left:12px solid transparent;
margin:0 auto;
}
#login h1{
background:#3399cc;
padding:20px 0;
font-size:140%;
font-weight:300;
text-align:center;
color:#fff;
}
form{
background:#f0f0f0;
padding:6% 4%;
}
input[type="email"],input[type="password"]{
width:92%;
background:#fff;
margin-bottom:4%;
border:1px solid #ccc;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:95%;
color:#555;
}
input[type="submit"]{
width:100%;
background:#3399cc;
border:0;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#fff;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}
input[type="submit"]:hover{
background:#2288bb;
}
Nah, sekarang kita buat document baru dengan nama javascriptloginform.js
lalu isi :
$('#toggle-login').click(function(){
$('#login').toggle();
});
*Ingat, itu hanya Login Formnya saja, belum dikasih fungsi, sobat bisa menambah Fungsi2 dengan PHP dan database
Contohnya saya yang menggunakan fungsi PHP Untuk masuk
coba sobat masuk http://kaito.site5.in/login
dan isi username dengan "a" dan password "a"
coba dengan yang lain, tidak fungsi :)
jika sudah masuk, sobat pasti akan melihat situs buatan saya yaitu File Hosting :) Sobat bebas upload disana :) :)
Bener Gan Keren :D
ReplyDeleteCoba Dulu Nih
Iyo gan :3
DeleteNice Tutorial gan , test dulu yah :D
ReplyDeletewah keren juga nih, :D
ReplyDeleteizin coba dulu gan
iyo gan
DeleteKeren nih klo mau ganti warnanya gimana gan ?
ReplyDeletegampang sob, tinggal ganti css
Deletecoba sobat cari #login h1, nah backgroundnya ganti aja misal background:#ffffff; untuk putih
untuk button nya cari .button dan ganti backgroundnya, kalo mau ganti warna hover button cari .button:hover dan ganti backgroundnya