Membuat Animasi Placeholder dengan CSS
09/04/2018 Risman Hakim 791 Website
Membuat Animasi Placeholder dengan CSS - Jika pada umumnya teks placeholder adalah teks yang sifatnya statis namun dengan adanya CSS, tampilan teks placeholder bisa kita kustomisasi menjadi lebih menarik lagi, seperti menambahkan efek ataupun animasi didalamnya. Seperti pada artikel yang akan saya bahas berikut ini yakni Membuat Animasi Placeholder dengan CSS, jika kalian ingin membuat animasi pada tampilan teks placeholder, tidak ada salahnya untuk mencoba tutorial berikut.
Baiklah langsung saja saya akan praktekan bagaimana membuat animasi placeholder berikut ini.
Langkah 1 : Membuat Animasi Placeholder dengan CSS
Langkah pertama untuk membuat animasi placeholder adalah membuat struktur sederhana dengan sintak HTML seperti berikut, kemudian silahkan disimpan dengan nama index.html
<div class="input">
<input type="text" required>
<span class="text">Your Name</span>
</div><br><br>
<div class="input">
<input type="email" required>
<span class="text">Your Email</span>
</div>
</body>
Pada kasus diatas, placeholder yang dibuat tidak seperti kita membuat placeholder biasanya dengan atribut placeholder, akan tetapi kita manipulasi dengan menambahkan tag span span untuk mengganti placeholdernya.
Langkah 2 : Membuat Animasi Placeholder dengan CSS
Langkah selanjutnya, kita akan mengatur layout dan juga manipulasi placeholder untuk dijadikan animasi, untuk itu silahkan kalian ketikan sintak CSS berikut untuk mengatur struktur HTML yang telah dibuat.
padding-top: 20px;
}
.input {
position: relative;
}
.input input {
border: none;
background: none;
width: 180px;
height: 35px;
border-radius: 5px;
border: 1px solid #f90;
padding-left: 15px;
padding-right: 20px;
box-sizing: border-box;
}
.input input:focus {
outline: none;
}
.input .text {
font: 12px/16px 'Helvetica Neue', Arial, sans-serif;
position: absolute;
top: 50%;
left: 15px;
margin-top: -8px;
color: gray;
background-color: inherit;
transition: all .1s linear;
pointer-events: none;
}
.input input:focus + .text, .input input:not(:invalid) + .text {
color: #f90;
top: 0%;
margin-top: -16px;
}
Setelah semua sintak diatas telah diketikan, pastikan sudah tersimpan semua filenya, kemudian silahkan buka pada browser masing - masing dan lihat hasilnya. Maka akan terilihat seperti pada gambar dibawah ini. Jika kalian ketikan sesuatu pada kolom inputan akan terlihat animasi pada placeholder yang naik keatas kolom inputan.
Baik, cukup sekian tutorial sederhana mengenai bagaimana Membuat Animasi Placeholder dengan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More