Bagaimana Cara Memperindah Input Teks Menggunakan Transition Css3

Picture from google

Bagaimana Cara Memperindah Input Teks Menggunakan Transition Css3 - Halo teman - teman semua, setelah sekian lama saya tidak posting apa - apa diblog ini sekarang saya kembali dengan membagikan tutorial sederhana untuk memperindah input teks yang biasa - biasa saja menjadi sedikit lebih dari biasa,haha. Dengan menggunakan css3 transition dan juga pseudo element. Berikut saya sertakan demonya.

Saya membuat tiga efek yang berbeda, teman - teman bisa mengembangkannya lagi menjadi versi teman - teman sekalian.

The Markup

<section id="bg_1">
                <h2>Effect 1</h2>
                <div class="container">
                    <ul class="wrap_input">
                        <li>
                            <span class="input input_1">
                                <input type="text" id="first_name" class="input_field input_field_1"/>
                                <label class="input_label input_label_1" for="first_name">
                                    <span class="input_label_content input_label_content_1">First Name</span>
                                </label>
                            </span>
                        </li>
                        <li>
                            <span class="input input_1">
                                <input type="text" id="last_name" class="input_field input_field_1"/>
                                <label class="input_label input_label_1" for="last_name">
                                    <span class="input_label_content input_label_content_1">Last Name</span>
                                </label>
                            </span>
                        </li>
                        <li>
                            <span class="input input_1">
                                <input type="text" id="username" class="input_field input_field_1"/>
                                <label class="input_label input_label_1" for="username">
                                    <span class="input_label_content input_label_content_1">Username</span>
                                </label>
                            </span>
                        </li>
                    </ul>
                </div>
            </section>

Tambahkan kode css berikut untuk merapikan input teks

*{
    margin : 0;
    padding : 0;
    box-sizing : border-box;
    font-family: 'Lato', sans-serif;
}

span{
    font-family: fontAwesome;
}

.input_label_content{
    font-family: 'Lato', sans-serif;
}

ul,ol{
    list-style: none;
}

a{
    text-decoration: none;
}

body{
    background-color: #cfd8dc;
}

h1,h2,p{
    text-align: center;
}

h1{
    color: #607d8b;
    font-size: 50px;
}

h2{
    color: #455a64;
    font-size: 30px;
}

p{
    color: #6d4c41;
    font-size: 20px;
}

section h2{
    margin-bottom: 50px;
}

section{
    padding: 40px;
}

.input_field:focus{
    outline:none;
}




.wrap_input .input{
    position: relative;
    display: inline-block;
    width: 350px;
}

.wrap_input .input .input_field{
    display: block;
    float: right;
    padding: 10px;
    height: 45px;
    font-size: 20px;
}

.wrap_input .input .input_label{
    position: absolute;
    pointer-events: none;
    padding: 0 10px;
    text-align: left;
    font-size: 20px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.wrap_input .input .input_label .input_label_content{
    position: relative;
    display: block;
}

Kode css berikut adalah untuk memberikan efek animasi pada input teks pada saat cursor fokus ke input teks

.input_label_1:before,
.input_label_1:after{
    content: '';
    width: 100%;
    height: 4px;
    position: absolute;
    background-color: #3e2723;
    left: 0;
}

.input_field_1{
    background-color: transparent;
    width: 100%;
    border: none;
}

.input_label_1{
    color: #5d4037;
    width: 100%;
}

.input_label_1:before{
    top: -50%;
}

.input_label_1:after{
    bottom: -50%;
}

.input_label_content_1{
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.input_field_1:focus + .input_label_1 .input_label_content_1,
.filled{
    -moz-transform: translateY(150%);
    -webkit-transform: translateY(150%);
    transform: translateY(150%);
    font-size: 15px;
}

pseudo element (:before, :after) saya gunakan untuk membuat border pada input teks, jadi border atas dan bawah bukan berasal dari border input teks, melainkan objek dari pseudo element itu sendiri.

Sejauh ini input teks sudah berjalan dengan baik, hanya saja terjadi masalah pada saat input teks sudah terisi dan cursor berpindah ke input teks yang lain, maka label akan kembali keposisi semula dan menimpa input teks yang sudah diisi. Saya mensiasatinya dengan menggunakan jquery, jadi logikanya adalah :

jika input teks tidak sama dengan kosong, maka tambahkan class filled pada label, selain itu hapus class filled pada label

$('.input_field_1').blur(function(){
                    if($(this).val() !== ''){
                        $(this).next().find('span').addClass('filled');
                    }
                    else{
                        $(this).next().find('span').removeClass('filled');
                    }
                });

Sampai dengan ini input teks berjalan sempurna dan menjadi lebih indah dan lebih interaktif dari input teks yang biasanya. Demikian tutorial singkat kali ini, semoga bisa dipraktekkan dengan mudah dan jika ada kendala bisa langsung didiskusikan pada kolom komentar dibawah, terima kasih.