Kombinasi Animasi dan Focus pada CSS

14/10/2019    Risman Hakim    189     Website

Kombinasi Animasi dan Focus pada CSS - Ada banyak kombinasi animasi yang bisa kita buat pada suatu elemen, Properti yang bisa digunakan untuk membuat animasi adalah transition, animasi, dan tentunya semua itu bisa kita kombinasikan juga dengan efek lain dengan pada CSS seperti selector focus. Nah, pada kesempatan ini saya akan bagikan tutorial sederhana bagaimana nanti efek dan animasi dikombinasikan menjadi satu. Penasaran seperti apa ? langsung saja simak selengkapnya berikut ini.

Pada kasus yang akan saya buat kali ini adalah kombinasi efek dan animasi pada elemen inputan search, jadi pada saat kita klik inputannya akan ada perubahan ukuran dan efek focus yang akan merubah warna border pada inputannya.

1. Membuat file index.html

Baiklah, kita mulai langkah pertama dengan membuat elemen input terlebih dahulu yang nanti akan dikenai efek dan animasinya. Silahkan kalian bisa ketikan kode HTML berikut ini.

<body>
  <form>
    <input type="text" name="" placeholder="Pencarian...">
  </form>
</body>

2. Membuat efek dan animasi

Setelah membuat struktur HTML seperti diatas, langkah selanjutnya adalah mendesain dan membuat efek serta animasi pada elemen inputan searchnya, oh iya.. jangan lupa tambahkan gambar atau icon search pada elemen inputannya. Silahkan kalian ketikan kode HTML untuk membuat efek dan animasi.

<style> 
  input[type=text] {
    width: 200px;
    box-sizing: border-box;
    border: 2px solid #111111;
    border-radius: 5px;
    font-size: 16px;
    background-image: url('search.png');
    background-size: 21px 21px;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;

    /* Transisi Input */
    transition: width 0.4s ease-in-out;
    transition-duration: 1s;
    transition-delay: 0.2s;
  }

  /*Input On Focus*/
  input[type=text]:focus {
    width: 100%;
    border: 2px solid #00c569;
  }
</style>

Setelah semua kode HTML dan CSS telah diketikan selanjutnya simpan filenya kembali kemudian kalian bisa buka pada browser masing - masing untuk melihat hasil akhirnya.

Baiklah, cukup sekian tutorial sederhana CSS tentang Kombinasi Animasi dan Focus pada CSS, semoga tutorial ini bermanfaat dan selamat mencoba :)

Web Design

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