 |
| Picture from google |
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');
}
});
