Home CSS HTML STYLE TUTORIAL WEB Cara Membuat Form Login Keren Full CSS + HTML

Friday, December 16, 2016

Cara Membuat Form Login Keren Full CSS + HTML


Cara Membuat Form Login Keren Full CSS + HTML - Dalam tutorial kita kali ini kita akan mencoba membuat Form Login menggunakan CSS dan HTML, dalam pembuatan tutorial ini kita tidak menggunakan JavaScript ataupun jQuery sehingga jika digunakan untuk sebuah web Form Login ini tidak akan mempengaruhi speed loading sebuah web.

Form Login ini memiliki beberapa fitur di dalamnya, diantaranya:
#1. Responsive - Sehingga memiliki tampilan yang luar biasa dibandingkan dengan Form Login yang biasanya.
#2. Disukai Google -  Mempunyai tampilan menarik (Responsive) bukan hanya disukai oleh Google tapi juga disukai oleh pengunjung, sehingga pengunjung akan betah membca artikel - artikel dalam web tersebut.
#3. Logo -  Terdapat sebuah logo di dalam Form Login yang akan kita buat, dan logo itu bukan merupakan (JPG, PNG, ICO, GIF) tapi logo yang kita gunakan Pure CSS.

Cara Membuat Form Login Keren Full CSS + HTML

Untuk memulai pembuatannya silahkan anda membuat 2 file dengan format:
#1. Index.html
#2. Style.css
Gambar 0.1
 Disini saya menggunakan Sublime Text sebagai Text Editor, dan disini saya sudah menyiapkan 2 file dengan format HTML dan CSS.
Baca: 10 Text Editor Terbaik Untuk Pemrograman
Silahkan anda masukan kode HTML dibawah ini di dalam file Index.html dan jangan lupa untuk save filenya.

<!DOCTYPE html>
<html>
<head>
 <title>Cara Membuat Form Login Keren Pure CSS + HTML</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
    <div class="container">
        <h1>RIZKI DESIGN</h1>
        <div class="login-body">
            <div class="top-login">
                <div class="title">
                    Login Form
                </div>
                <div class="line-1"></div>
                <div class="line-2"></div>
                <div class="line-3"></div>
                <div class="line-11"></div>
                <div class="line-22"></div>
                <div class="line-33"></div>
                <div class="line-111"></div>
                <div class="line-222"></div>
                <div class="line-333"></div>
            </div>
            <div class="character-circel">
                <div class="character-body">
                    <div class="head"></div>
                    <div class="hair1"></div>
                    <div class="hair2"></div>
                </div>
            </div>
            <div class="character-bacground"></div>
            <div class="character-bacground2"></div>
            <div class="character-bacground3"></div>
            <div class="character-circle1"></div>
            <div class="character-circle2"></div>

            <div class="login-box">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="morab31"></div>
                <div class="morab32"></div>
                <div class="morab33"></div>
                <div class="morab34"></div>
                <input type="text" placeholder="Username ...">
                <input type="password" placeholder="Password ...">
                <button class="button">Sign in</button>

                <div class="last-info">
                    <div class="one">
                        Remember Me
                        <input type="checkbox" id="thing">
                        <label for="thing"></label>
                    </div>
                    <div class="two">
                        <a href="#">Create Account</a>
                    </div>
                    <div class="three">
                        <a href="#">Forget Password ?</a>
                    </div>
                </div>
            </div>
            <div class="down-login">
            </div>
        </div>
    </div>
</body>
</html>
Langkah selanjutnya silahkan anda masukan kode CSS di bawah ini di dalam file Style.CSS dan jangan lupa untuk di save filenya.

/*Cara Membuat Form Login Keren Pure CSS + HTML : Rizki Design*/
body {
    margin: 0;
    padding: 0;
    background-color: #3e004d;
    overflow: hidden;
}
.container {
    width: 950px;
    margin: auto;
    overflow: hidden;
}
.container h1 {
    margin-top: 60px;
    font-family: Open Sans;
    font-size: 35px;
    font-weight: 600;
    color: white;
    text-align: center;
}
/* Login Body */
.login-body {
    position: fixed;
    margin-left: 277px;
    width: 400px;
    height: 508px;
    background-color: #2a0138;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0px 13px 33px -10px rgba(0, 0, 0, 0.63);
}
.login-body .top-login {
    background-color: #aa0247;
    width: 420px;
    height: 85px;
    position: absolute;
}
/* LINES LINES LINES + Title */
.top-login .title {
    font-family: Open Sans;
    font-size: 25.5px;
    font-weight: 600;
    color: white;
    text-align: center;
    margin-top: 24px;
}
.line-1 {
    width: 54px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 16px;
    left: 45px;
}
.line-2 {
    width: 10px;
    height: 9px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 16px;
    left: 33px;
}
.line-3 {
    width: 54px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 16px;
    left: -23px;
}
.line-11 {
    width: 44px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 37px;
    left: 30px;
}
.line-22 {
    width: 10px;
    height: 9px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 37px;
    left: 18px;
}
.line-33 {
    width: 54px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 37px;
    left: -37px;
}
.line-111 {
    width: 44px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 60px;
    left: 41px;
}
.line-222 {
    width: 10px;
    height: 9px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 60px;
    left: 30px;
}
.line-333 {
    width: 54px;
    height: 8px;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 20px;
    top: 60px;
    left: -26px;
}
/* LINES LINES LINES */
/* Character */
.login-body .character-circel {
    position: absolute;
    background-color: #aa0247;
    top: 117px;
    border-radius: 50%;
    width: 130px;
    height: 130px;
    left: 125px;
    overflow: hidden;
}
.login-body .character-body {
    position: absolute;
    background-color: #ff7d4a;
    top: 71px;
    width: 72px;
    height: 72px;
    left: 31px;
    border-radius: 25px;
}
.login-body .character-body:before {
    content: "";
    position: absolute;
    background-color: #aa0247;
    top: -7px;
    width: 30px;
    height: 30px;
    left: 48px;
    border-radius: 12px;
}
.login-body .character-body:after {
    content: "";
    position: absolute;
    background-color: #aa0247;
    top: -7px;
    width: 30px;
    height: 30px;
    left: -6px;
    border-radius: 12px;
}
.login-body .character-body .head {
    position: absolute;
    background-color: #ffb03e;
    top: -51px;
    width: 56px;
    height: 56px;
    left: 8px;
    border-radius: 22px;
    z-index: 1;
}
.login-body .character-body .head:before {
    content: "";
    position: absolute;
    background-color: #85ffff;
    top: 18px;
    width: 9px;
    height: 7px;
    left: 36px;
    border-radius: 8px;
    z-index: 1;
}
.login-body .character-body .head:after {
    content: "";
    position: absolute;
    background-color: #85ffff;
    top: 18px;
    width: 9px;
    height: 7px;
    left: 13px;
    border-radius: 8px;
    z-index: 1;
}
.login-body .character-body .hair1 {
    position: absolute;
    background-color: #85ffff;
    width: 8px;
    height: 27px;
    left: 32px;
    border-radius: 8px;
    z-index: 0;
    top: -66px;
}
.login-body .character-body .hair2 {
    position: absolute;
    background-color: #85ffff;
    width: 8px;
    height: 27px;
    left: 36px;
    border-radius: 8px;
    z-index: 0;
    top: -62px;
    -webkit-transform: rotate(-156deg);
    transform: rotate(-156deg);
}
.character-bacground {
    position: absolute;
    background-color: #5f416a;
    width: 230px;
    height: 25px;
    border-radius: 15px;
    top: 128px;
    z-index: -1;
    left: 89px;
}
.character-bacground:before {
    content: "";
    position: absolute;
    background-color: #5f416a;
    width: 44px;
    height: 21px;
    top: 22px;
    left: 15px;
}
.character-bacground:after {
    content: "";
    position: absolute;
    background-color: #2A0138;
    width: 44px;
    height: 21px;
    top: 24px;
    left: -3px;
    border-radius: 15px;
}
.character-bacground2 {
    position: absolute;
    background-color: #5f416a;
    width: 221px;
    height: 23px;
    border-radius: 15px;
    top: 172px;
    z-index: -1;
    left: 71px;
}
.character-bacground2:before {
    content: "";
    position: absolute;
    background-color: #5f416a;
    width: 44px;
    height: 21px;
    top: 22px;
    left: 152px;
}
.character-bacground2:after {
    content: "";
    position: absolute;
    background-color: #2A0138;
    width: 44px;
    height: 21px;
    top: 22px;
    left: 189px;
    border-radius: 11px;
}
.character-bacground3 {
    position: absolute;
    background-color: #5f416a;
    width: 108px;
    height: 23px;
    border-radius: 15px;
    top: 213px;
    z-index: -1;
    left: 223px;
}
.character-circle1 {
    position: absolute;
    background-color: #70557a;
    width: 11px;
    top: 157px;
    left: 112px;
    height: 11px;
    border-radius: 50%;
}
.character-circle1:before {
    content: "";
    position: absolute;
    background-color: #482554;
    width: 11px;
    left: -14px;
    height: 11px;
    border-radius: 50%;
}
.character-circle1:after {
    content: "";
    position: absolute;
    background-color: #401b4c;
    width: 11px;
    left: -28px;
    height: 11px;
    border-radius: 50%;
}
.character-circle2 {
    position: absolute;
    background-color: #401b4c;
    width: 11px;
    top: 199px;
    right: 93px;
    height: 11px;
    border-radius: 50%;
}
.character-circle2:before {
    content: "";
    position: absolute;
    background-color: #482554;
    width: 11px;
    left: -14px;
    height: 11px;
    border-radius: 50%;
}
.character-circle2:after {
    content: "";
    position: absolute;
    background-color: #70557a;
    width: 11px;
    left: -28px;
    height: 11px;
    border-radius: 50%;
}
.login-box {
    position: absolute;
    width: 300px;
    height: 175px;
    top: 264px;
    left: 50px;
}
.login-box .line1 {
    position: absolute;
    width: 260px;
    height: 1px;
    top: 41px;
    background-color: #ff7d4a;
    left: 20px;
}
.login-box .line2 {
    position: absolute;
    width: 260px;
    height: 1px;
    top: 89px;
    background-color: #ff7d4a;
    left: 20px;
}
.login-box .morab31 {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 85px;
    background-color: #FFFFFF;
    left: 16px;
    -webkit-transform: rotate(-64deg);
    transform: rotate(-64deg);
}
.login-box .morab32 {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 85px;
    background-color: #FFFFFF;
    right: 16px;
    -webkit-transform: rotate(-64deg);
    transform: rotate(-64deg);
}
.login-box .morab33 {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 37px;
    background-color: #FFFFFF;
    right: 16px;
    -webkit-transform: rotate(-64deg);
    transform: rotate(-64deg);
}
.login-box .morab34 {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 37px;
    background-color: #FFFFFF;
    left: 16px;
    -webkit-transform: rotate(-64deg);
    transform: rotate(-64deg);
}
.login-box input[type=text] {
    color: #FFFFFF;
    border: none;
    font-family: Open Sans;
    font-size: 15px;
    padding-left: 35px;
    font-weight: 400;
    background-color: transparent;
    margin-top: 13px;
}
.login-box input[type=password] {
    color: #FFFFFF;
    border: none;
    font-family: Open Sans;
    font-size: 15px;
    padding-left: 35px;
    font-weight: 400;
    background-color: transparent;
    margin-top: 24px;
}
.login-box .button {
    font-family: Open sans;
    font-size: 16px;
    font-weight: 400;
    color: white;
    border: none;
    background-color: #aa0247;
    position: absolute;
    top: 113px;
    right: 42px;
    width: 210px;
    height: 47px;
    border-radius: 25px;
    cursor: pointer;
}
.login-box .button:hover {
    font-family: Open sans;
    font-size: 16px;
    font-weight: 400;
    color: #AA0247;
    border: none;
    background-color: #FFFFFF;
    position: absolute;
    top: 113px;
    right: 42px;
    width: 210px;
    height: 47px;
    border-radius: 25px;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.last-info {
    position: absolute;
    width: 400px;
    bottom: 2px;
}
.last-info .one {
    position: absolute;
    bottom: -45px;
    color: white;
    font-family: Open sans;
    font-size: 14px;
    left: -37px;
    width: 119px;
}
.last-info .one:after {
    content: "";
    position: absolute;
    width: 1.2px;
    height: 25px;
    background-color: white;
    color: white;
    font-family: Open sans;
    font-size: 14px;
    right: -6px;
    top: -2px;
}
.last-info .two a {
    position: absolute;
    bottom: -45px;
    font-family: Open sans;
    font-size: 14px;
    left: 100px;
    text-decoration: none;
    color: white;
}
.last-info .two a:after {
    content: "";
    position: absolute;
    width: 1.2px;
    height: 25px;
    background-color: white;
    color: white;
    font-family: Open sans;
    font-size: 14px;
    right: -15px;
    top: -2px;
}
.last-info .three a {
    position: absolute;
    bottom: -45px;
    font-family: Open sans;
    font-size: 14px;
    left: 224px;
    text-decoration: none;
    color: white;
    font-style: italic;
}
input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label {
    top: 4px;
    background: #aa0247;
    height: 13px;
    width: 13px;
    border-radius: 30%;
    display: inline-block;
    padding: 0 0 0 0px;
    cursor: pointer;
    position: absolute;
    right: 5px;
    -webkit-transition: all 1s;
    transition: all 1s;
}
input[type=checkbox]:checked + label {
    top: 4px;
    background: #FFFFFF;
    height: 13px;
    width: 13px;
    border-radius: 30%;
    display: inline-block;
    padding: 0 0 0 0px;
    cursor: pointer;
    position: absolute;
    right: 5px;
}
/* End Character */
/*Rare Down Login */
.down-login {
    position: absolute;
    background-color: #f93854;
    width: 420px;
    height: 10px;
    bottom: 0;
}
/*Rare Down Login*/
/* do not group these rules */
Untuk melihat hasilnya silahkan anda buka di bworser kesayangan anda.
Baca: Cara Membuat Form Login Sederhana Tapi Berkelas
Untuk melihat demonya silakan anda klik tombol di atas.
Jika tutorial ini menurut anda menarik silahkan share agar teman-teman kita tahu Cara Membuat Form Login Keren Full CSS + HTML

Artikel Terkait

Unknown

Next Post
Oldest Page
Subscribe to: Post Comments ( Atom )