09/04/2018 Risman Hakim 2613 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 pertama untuk membuat animasi placeholder adalah membuat struktur sederhana dengan sintak HTML seperti berikut, kemudian silahkan disimpan dengan nama index.html
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 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.
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 :)
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn MoreMembuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More