FormsLesson 132Preview gratis
Animated Search
Lesson ini bagian dari How To · Semua level
Ringkasan
Animated search adalah kolom pencarian yang melebar saat difokuskan atau diklik. Efeknya dibuat dengan transition pada properti width, sehingga perubahan ukuran terasa halus. Pola ini menghemat ruang di bilah navigasi tanpa menghilangkan fungsi pencarian.
Poin kunci
- transition: width membuat perubahan lebar berjalan halus.
- Selektor :focus atau :focus-within memicu pelebaran input.
- Lebar awal yang kecil dapat membuka ruang bagi elemen lain.
- Tombol ikon pencarian tetap membutuhkan aria-label.
- Jangan menyembunyikan input dengan display: none karena menghilangkan akses keyboard.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.