Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

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>

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;
}

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.

2 comments for "Membuat Form Login Keren Dengan CSS3 dan HTML Versi Dunia Programming"

  1. mantap jiwa tutornya , di cobain deh , lumayan .. btw cara nyimpen datanya gimana?

    ReplyDelete
    Replies
    1. Nah, untuk cara nyimpen datanya bisa ditunggu tutorial Berikutnya mas :)

      Delete