Membuat Form Login Keren Dengan CSS3 dan HTML Versi Dunia Programming
Dunia Programming - Form Login adalah sebuah tampilan yang digunakan untuk masuk kedalam dashboard akun atau kedalam sebuah website tertentu untuk mengtahui siapa saja ang dapat masuk, dan biasanya dalam Form login ini kita dapat membedakan antara Admin, Operator, Members, atau anggota atau biasa juga disebut pelevelan pada Form Login, nah kali ini saya akan memberikan sedikit tampilan Form Login yang sudah saya buat dengan sedikit sentuhan CSS3.
 |
| Form Login Edit & Desain By Dunia Programming |
Untuk mempelajari tentang property CSS3 lengkap, kalian dapat membaca artikel berikut.
Cara Pembuatan Form Login
Langkah pertama cop pastekan script dibawah ini dengan nama index.html dan simpan kedalam folder yang sudah kalian buat.
Script HTML
<!doctype html>
<html>
<head>
<title>Jobsheet 8</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="form1" class="form1">
<form id="form" name="form" method="get" action="index.html">
<p class="p2">Log In<p>
<p class="p1">Log In Your Account<p>
<div class="foto"><img src="images/foto.png" class="ft">Muhammad Tajuddin</div>
<input type="text" id="nama" name="nama" class="nama" placeholder="Username">
<input type="password" name="password" class="password" placeholder="Password">
<input type="submit" value="Submit" class="button">
</form>
</div>
</body>
</html>
<html>
<head>
<title>Jobsheet 8</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="form1" class="form1">
<form id="form" name="form" method="get" action="index.html">
<p class="p2">Log In<p>
<p class="p1">Log In Your Account<p>
<div class="foto"><img src="images/foto.png" class="ft">Muhammad Tajuddin</div>
<input type="text" id="nama" name="nama" class="nama" placeholder="Username">
<input type="password" name="password" class="password" placeholder="Password">
<input type="submit" value="Submit" class="button">
</form>
</div>
</body>
</html>
Langkah kedua yaitu, cop pastekan script CSS dibawah ini, dan beri nama style.css, da letakkan file CSS ini dalam satu folder dengan file htm tadi.
Script CSS
body {
font-family: Arial;
font-size: 12px;
background:#1f8dd6;
}
img {
width: 200px;
}
.foto {
width: 200px;
height: 230px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: -30px;
float: left;
border: 0px solid black;
color: #e74c3c;
font-size: 1.6em;
text-align: center;
}
.ft {
border-radius: 1000px;
}
.form1 {
margin: auto;
width: 750px;
}
#form {
background: #ffffff;
border-radius: 4px;
height: 340px;
}
.p2 {
font-size: 2.5em;
color: #e74c3c;
text-align: center;
padding-top: 20px;
margin-bottom: -10px;
}
.p1 {
font-size: 1.5em;
color: #c9c9c9;
text-align: center;
padding-top: 0px;
margin-bottom: 30px;
}
label {
display: block;
text-align: right;
width: 140px;
float: left;
margin-left: -8px;
}
.small {
color: #666666;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
width: 140px;
}
input {
font-size: 1.2em;
padding: 2px 2px;
border: 1px solid #aacfe4;
width: 150px;
margin: 0px 0px 20px 45px;
color: #c9c9c9;
}
input.nama {
background: #f9f9f9;
border: 1px solid #cccccc;
border-radius: 3px;
padding: 5px;
padding-left: 35px;
height: 35px;
width: 350px;
background: url("images/user.png") no-repeat 7px 9px;
}
input.password {
background: #f9f9f9;
border: 1px solid #cccccc;
border-radius: 3px;
padding: 5px;
padding-left: 35px;
height: 35px;
width: 350px;
background: url("images/lock.png") no-repeat 7px 9px;
}
#form input.nama:focus {
border: 1px solid #d9ad00;
background: #fff7d7 url("images/user.png") no-repeat 7px 9px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
#form input.password:focus {
border: 1px solid #d9ad00;
background: #fff7d7 url("images/lock.png") no-repeat 7px 9px;
}
input.nama:hover {
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
input.password:hover {
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
input.button {
clear: both;
margin-left: 45px;
width: 392px;
height: 40px;
background: #e74c3c;
border-radius: 4px;
color: #ffffff;
font-size: 1.2em;
text-align: center;
border: 0px;
}
input.button:hover {
background: #3498db;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
font-family: Arial;
font-size: 12px;
background:#1f8dd6;
}
img {
width: 200px;
}
.foto {
width: 200px;
height: 230px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: -30px;
float: left;
border: 0px solid black;
color: #e74c3c;
font-size: 1.6em;
text-align: center;
}
.ft {
border-radius: 1000px;
}
.form1 {
margin: auto;
width: 750px;
}
#form {
background: #ffffff;
border-radius: 4px;
height: 340px;
}
.p2 {
font-size: 2.5em;
color: #e74c3c;
text-align: center;
padding-top: 20px;
margin-bottom: -10px;
}
.p1 {
font-size: 1.5em;
color: #c9c9c9;
text-align: center;
padding-top: 0px;
margin-bottom: 30px;
}
label {
display: block;
text-align: right;
width: 140px;
float: left;
margin-left: -8px;
}
.small {
color: #666666;
display: block;
font-size: 11px;
font-weight: normal;
text-align: right;
width: 140px;
}
input {
font-size: 1.2em;
padding: 2px 2px;
border: 1px solid #aacfe4;
width: 150px;
margin: 0px 0px 20px 45px;
color: #c9c9c9;
}
input.nama {
background: #f9f9f9;
border: 1px solid #cccccc;
border-radius: 3px;
padding: 5px;
padding-left: 35px;
height: 35px;
width: 350px;
background: url("images/user.png") no-repeat 7px 9px;
}
input.password {
background: #f9f9f9;
border: 1px solid #cccccc;
border-radius: 3px;
padding: 5px;
padding-left: 35px;
height: 35px;
width: 350px;
background: url("images/lock.png") no-repeat 7px 9px;
}
#form input.nama:focus {
border: 1px solid #d9ad00;
background: #fff7d7 url("images/user.png") no-repeat 7px 9px;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
#form input.password:focus {
border: 1px solid #d9ad00;
background: #fff7d7 url("images/lock.png") no-repeat 7px 9px;
}
input.nama:hover {
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
input.password:hover {
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
input.button {
clear: both;
margin-left: 45px;
width: 392px;
height: 40px;
background: #e74c3c;
border-radius: 4px;
color: #ffffff;
font-size: 1.2em;
text-align: center;
border: 0px;
}
input.button:hover {
background: #3498db;
transition: 1.5s all;
-webkit-transition: 1.5s all;
-moz-transition: 1.5s all;
-o-transition: 1.5s all;
text-decoration: none;
}
Bagaimana tampilannya..? menarik bukan...? sederhana tapi keren, berikan pendapat dan masukan mengenai desain Form login diatas, atau juga bila mendapatkan masalah kesalahan pada script, silahkan kalian dapat berkomentar dibawah artikel ini. Sekian dan terimakasih.
Belum ada Komentar untuk "Membuat Form Login Keren Dengan CSS3 dan HTML Versi Dunia Programming"
Posting Komentar