Tampilan Log In Untuk Situs Website anda
Screen Shoot
Untuk membuat tampilan Log in seperti ini dibutuhkan gambar yang bisa anda download disini sehingga nanti memudahkan anda untuk membuat tampilannya Screen Shoot
Membuat Tampilan seperti ini anda harus menguasai HTML dan Css Silahkan and abaca Tutorial saya sebelumnya di Setelah anda mampu mengerti akan bahasa HTML dan Css Maka tidaklah sulit untuk mempelajarinya.
Langkah langkah Membuat Tampilan Log In
seperti diatas:
1. Siapkan Gambar yang bisa anda download seperti gambar diatas
2. Memulainya dengan membuat Css dari gambar tersebut
3. Buat Form Log IN dengan Html
Membuat Css dari gambar yang sudah tersedia
Source code :
*{ margin: 0; padding: 0; }
body{ font-family: Georgia, serif; background: url(images/login-page-bg.jpg) top center no-repeat #c4c4c4; color: #3a3a3a; }
.clear { clear: both; }
Form { width: 406px; margin: 170px auto 0; }
legend { display: none; }
fieldset { border: 0; }
label { width: 115px; text-align: right; float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px; }
input { width: 220px; display: block; padding: 4px; margin: 0 0 10px 0; font-size: 18px;
color: #3a3a3a; font-family: Georgia, serif;}
input[type=checkbox]{ width: 20px; margin: 0; display: inline-block; }
.button { background: url(images/button-bg.png) repeat-x top center; border: 1px solid #999;
-moz-border-radius: 5px; padding: 5px; color: black; font-weight: bold;
-webkit-border-radius: 5px; font-size: 13px; width: 70px; }
.button:hover { background: white; color: black; }
Pada huruf yang berwarna merah tersebut merupakan gambar yang digunakan sebagai background yang nantinya menjadi tampilan pada form. Untuk membuat form agar tampilan dari Css bisa ditampilkan oleh browser maka sekarang kita harus membuat form dengan Html
Untuk Membuat form dengan Html caranya seperti ini :
Source code
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Login Page</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="login.css" />
</head>
<body>
<form action="do_login.php" method="post">
<fieldset>
<legend>Log in</legend>
<label for="login">Email</label>
<input type="text" name="email"/>
<div class="clear"></div>
<label for="password">Password</label>
<input type="password" name="password"/>
<div class="clear"></div>
<br />
<input type="submit" style="margin: -20px 0 0 287px;" class="button" name="submit" value="Log in"/>
</fieldset>
</form>
</body>
</html>
