Kombinasi Animasi dan Focus pada CSS

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 :)

14 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat