Thursday, September 7, 2017

Published 9/07/2017 03:50:00 PM by with 0 comment

Cara membuat form keren menggunakan CSS

Nah untuk tutorial kali ini kita akan membahas tentang cara membuat form menggunakan css, ya css berguna untuk memperindah tampilan website tapi ditutorial ini hanya form biasa dan belum di sambungkan dengan php .

Untuk  login form dengan menambahkan validasi mungkin di tutorial berikutnya dan untuk mempersingkat waktu maka kita mulai saja tutor. Yuk simak gusy atau teman - teman bisa langsung DOWNLOAD

1. Pertama buat file html untuk namanya bebas ,misal index.html dan masukan script di bawah 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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Simple Form with css</title>



</head>


<body>

<div id="wrapper">


                <form name="login-form" class="login-form" action="" method="post">


                                <div class="header">

                                <h1>Login Form</h1></center>

                                <span>Login pake form keren</span>

                                </div>


                                <div class="content">

                                <input name="username" type="text" class="input username" placeholder="Username" />

                                <div class="user-icon"></div>

                                <input name="password" type="password" class="input password" placeholder="Password" />

                                <div class="pass-icon"></div>                  

                                </div>


                                <div class="footer">

                                <input type="submit" name="submit" value="Masuk" class="button" />

                                <input type="submit" name="submit" value="Daftar" class="register" />

                                </div>


                </form>


</div>

<div class="gradient"></div>


</body>

</html>

Jalan kan file di atas Dan Hasilnya sepert ini karna belum ditambahkan CSS 



2. Kedua buat file CSS nya untuk namayna bebas,misalnya style.css dan masukan script dibawah ini

::selection {

        color: #fff;

        background: #f676b2; /* Safari */

}

::-moz-selection {

        color: #fff;

        background: #f676b2; /* Firefox */

}

* {

        margin: 0;

        padding: 0;

        border: none;

        outline: none;

}

body {

        background: url('http://www.demo.amitjakhu.com/login-form/images/bg.png');

        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

        font-weight:300;

        text-align: left;

        text-decoration: none;

        height: 500px;

}

#wrapper {

        /* Center wrapper perfectly */

        width: 300px;

        height: 400px;

        margin: 70px auto;

}

/* Download Button (Demo Only) */

.download {

        display: block;

        position: absolute;

        float: right;

        right: 25px;

        bottom: 25px;

        padding: 5px;    

        font-weight: bold;

        font-size: 11px;

        text-align: right;

        text-decoration: none;

        color: rgba(0,0,0,0.5);

        text-shadow: 1px 1px 0 rgba(256,256,256,0.5);

}

.download:hover {

        color: rgba(0,0,0,0.75);

        text-shadow: 1px 1px 0 rgba(256,256,256,0.5);

}

.download:focus {

        bottom: 24px;

}

.gradient {

        /* Center Positioning */

        width: 600px;

        height: 600px;

        position: fixed;

        left: 50%;

        top: 50%;

        margin-left: -300px;

        margin-top: -300px;

        z-index: -2;

        /* Fallback */

        background-image: url(http://www.demo.amitjakhu.com/login-form/images/gradient.png);

        background-repeat: no-repeat;               

        /* CSS3 Gradient */

        background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));

        background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));

        background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));

        background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));

        background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));

}

/*******************

LOGIN FORM

*******************/

.login-form {

        width: 300px;

        margin: 0 auto;

        position: relative;

        background: #f3f3f3;

        border: 1px solid #fff;

        border-radius: 5px;        

        box-shadow: 0 1px 3px rgba(0,0,0,0.5);

        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

}

.login-form .header {

        padding: 40px 30px 30px 30px;

}

.login-form .header h1 {

        font-family: 'Bree Serif', serif;

        font-weight: 300;

        font-size: 28px;

        line-height:34px;

        color: #414848;

        text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

        margin-bottom: 10px;

}

.login-form .header span {

        font-size: 11px;

        line-height: 16px;

        color: #678889;

        text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

}

.login-form .content {

        padding: 0 30px 25px 30px;

}

/* Input field */

.login-form .content .input {

        width: 188px;

        padding: 15px 25px;

        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

        font-weight: 400;

        font-size: 14px;

        color: #9d9e9e;

        text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

        background: #fff;

        border: 1px solid #fff;

        border-radius: 5px;        

        box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);

        -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);

        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);

}

/* Second input field */

.login-form .content .password, .login-form .content .pass-icon {

        margin-top: 25px;

}

.login-form .content .input:hover {

        background: #dfe9ec;

        color: #414848;

}

.login-form .content .input:focus {

        background: #dfe9ec;

        color: #414848; 

        box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);

        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);

        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);

}

.user-icon, .pass-icon {

        width: 46px;

        height: 47px;

        display: block;

        position: absolute;

        left: 0px;

        padding-right: 2px;

        z-index: -1;        

        -moz-border-radius-topleft: 5px;

        -moz-border-radius-bottomleft: 5px;

        -webkit-border-top-left-radius: 5px;

        -webkit-border-bottom-left-radius: 5px;

}

.user-icon {

        top:153px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */

        background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/user-icon.png) no-repeat center;          

}

.pass-icon {

        top:201px;

        background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/pass-icon.png) no-repeat center;

}

.content input:focus + div{

        left: -46px;

}

/* Animation */

.input, .user-icon, .pass-icon, .button, .register {

        transition: all 0.5s ease;

        -moz-transition: all 0.5s ease;

        -webkit-transition: all 0.5s ease;

        -o-transition: all 0.5s ease;

        -ms-transition: all 0.5s ease;

}

.login-form .footer {

        padding: 25px 30px 40px 30px;

        overflow: auto;

        background: #d4dedf;

        border-top: 1px solid #fff;          

        box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);

        -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);

        -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);

}

/* Login button */

.login-form .footer .button {

        float:right;

        padding: 11px 25px;

        font-family: 'Bree Serif', serif;

        font-weight: 300;

        font-size: 18px;

        color: #fff;

        text-shadow: 0px 1px 0 rgba(0,0,0,0.25);

        background: #56c2e1;

        border: 1px solid #46b3d3;

        border-radius: 5px;

        cursor: pointer;

        box-shadow: inset 0 0 2px rgba(256,256,256,0.75);

        -moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);

        -webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);

}



.login-form .footer .button:hover {

        background: #3f9db8;

        border: 1px solid rgba(256,256,256,0.75);             

        box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);

        -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);

        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);

}

.login-form .footer .button:focus {

        position: relative;

        bottom: -1px;

        background: #56c2e1;   

        box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);

        -moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);

        -webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);

}

/* Register button */

.login-form .footer .register {

        display: block;

        float: right;

        padding: 10px;

        margin-right: 20px;

        background: none;

        border: none;

        cursor: pointer;

        font-family: 'Bree Serif', serif;

        font-weight: 300;

        font-size: 18px;

        color: #414848;

        text-shadow: 0px 1px 0 rgba(256,256,256,0.5);

}

.login-form .footer .register:hover {

        color: #3f9db8;

}

.login-form .footer .register:focus {

        position: relative;

        bottom: -1px;

}

23. Ketiga sambungakan file HTML DAN CSS  nya dengan cara menambahkan link yang mengarah ke file css nya dengan script di bawah ini di bagian header nay




              <link rel="stylesheet" href="css1.css">



 
   4. Jalankan File index.html nya dan hasilnya??


nah gimana sob hasilnya kerenkan, terimakasih sudah berkunjung di blog kami dan jangan lupa beri komentar dan like nya ya dan lihat tutor lainnya hanya di di  Mudabeda


 

      edit

0 komentar:

Post a Comment