Membuat Animasi Placeholder dengan CSS

09/04/2018    Risman Hakim    983     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

<body>
    <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.

body {
  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.

Membuat Animasi Placeholder dengan CSS

Baik, cukup sekian tutorial sederhana mengenai bagaimana Membuat Animasi Placeholder dengan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

Web Design, HTML CSS, website

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