Cara Membuat Animasi Placeholder dengan CSS

Cara membuat animasi placeholder  Dengan CSS

  Jika pada umumnya teks placeholder adalah teks yang sifatnya statis namun dengan adanya CSS, tampilan teks place-holder bisa kita kostumisasi menjadi lebih menarik lagi, seperti menambahkan efek atau animasi didalamnya. Seperti pada artikel yang akan mimin bahas yakni mem-buat animasi placeholder dengan CSS, jika kalian ingin membuat animasi pada tampi-lan teks placeholder, tidak ada salahnya untuk mencoba tutorial berikut. 

Baiklah langsung saja mimin akan prakte-kan bagaimana membuat animasi placehol-der berikut ini.

Langkah 1:Membuat animasi placeholder dengan CSS

pertama untuk membuat animasi place-holder adalah membuat struktur sederhana dengan sintak HTML seperti berikut kemudian silahkan simpan 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 dibuattidak seperti kita membuat placeholderbiasanya dengan atribut placeholder, tetapi kita manipulsai dengan menambahkan tag spanspan untuk mengganti placeholdernya.

Langkah 2:Membuat animasi placeholder dengan CSS

 Langkah selanjutnya kita akan mengatur layout dan juga manipulasi placeholder 
untuk dijadikan animasi, untuk mengatur Struktur HTML yang telah dibuat.

[
<style type="tex
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 diketikanpastikan sudah tersimpan semua filenya, kemudian silahkan buka oada browser masing-masing dan lihat hasilnya. Maka akan terlihat seperti gambar dibawah ini.

jika kalian ketikan sesuatu pada kolom inputan akan terlihat animasi pada place-
holder yang naik keatas kolom inputan


 Cukup sekian tutorial yang diberikan olehmimin mengenai pembahasan membuat animasi placeholder dengan CSS, semoga tutorial ini bisa bermanfaat dan selamat mencoba :D

(Fathur/Tekloggers)

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Disqus Comments