CSS menawarkan berbagai kerangka kerja bagi pemrogram untuk mendesain halaman web dinamis. Ini lebih disukai karena menyediakan semua fitur dan alat penting di satu tempat. Jadi, Anda tidak harus menggunakan framework lain. Framework Tailwind pada CSS adalah yang paling banyak digunakan karena menghemat waktu pengguna dalam menulis CSS yang berlebihan.
Panduan ini menjelaskan penggunaan hover, fokus, dan status lainnya di Tailwind.
Bagaimana Cara Menggunakan Arahkan Arah, Fokus, dan Status Lainnya di Tailwind?
Saat mendesain halaman web, perlu menambahkan elemen dinamis dan menarik untuk menjaga interaktivitas dengan pengguna. Fitur-fitur di Tailwind dapat dimanfaatkan untuk membuat halaman interaktif dan dinamis tanpa perlu menulis CSS khusus tambahan. Beberapa fitur adalah “hover”, “fokus” dan “aktif” yang membantu menambah daya tarik pada desain.
Menggunakan Varian Hover dalam HTML
Properti hover digunakan untuk memberi gaya pada elemen HTML saat pengguna menggerakkan kursor mouse ke elemen tertentu. Ini membantu menyajikan pengalaman yang lancar.
Langkah 1: Terapkan Properti 'hover' dalam HTML
Buat file HTML dan terapkan properti hover ke beberapa elemen dalam kode. Untuk mendapatkan ide, lihat kode yang diberikan di bawah ini:
< tubuh >
< div kelas = 'tengah' >
< tombol kelas = 'bg-green-500 hover:bg-blue-500 teks-font putih-tebal bulat' >
Arahkan Aku!
< / tombol >
< / div >
< / tubuh >
Dalam kode ini:
- Sebuah tombol bernama “ Arahkan Aku! ” dibuat oleh tag tombol.
- “ bg-hijau-500 ” mengatur warna latar belakang tombol menjadi hijau.
- “ arahkan kursor: bg-biru-500 ” mengubah warna tombol dari hijau menjadi biru saat mouse digerakkan di atasnya.
- Teks di tombol berwarna putih “ teks-putih ' Dan ' font-tebal ” membuat font menjadi tebal.
- Bentuk tombol diatur menjadi bulat dengan “ bulat ”.
Langkah 2: Pratinjau Outputnya
Setelah mengeksekusi kode di atas, tampilan akhir akan terlihat seperti ini:
Terlihat bahwa tombol berubah warna ketika kursor mouse digerakkan ke atasnya.
Menggunakan Varian Fokus dalam HTML
Properti fokus digunakan untuk menata elemen HTML sedemikian rupa sehingga ketika pengguna mengklik elemen tersebut, elemen tersebut disorot untuk menarik perhatian pengguna.
Langkah 1: Terapkan Properti Fokus dalam kode HTML
Buat file HTML dan terapkan properti fokus ke beberapa elemen yang diinginkan. Untuk mendapatkan kesan perhatikan kode di bawah ini:
< div >
< / div >
< / tubuh >
Dalam kode ini:
- “ melenturkan ” kelas menciptakan fleksibilitas.
- “ justifikasi-pusat ” membenarkan penyelarasan konten ke tengah.
- “ item-pusat Kelas ” menyesuaikan objek ke tengah layar.
- “ layar-h ” mengatur ukuran layar sesuai dengan area pandang.
- “ bg-biru-200 ” mengatur warna latar belakang menjadi biru.
- Kotak input tipe teks dibuat.
- “ fokus: bg-hijau-300 ” mengubah warna kotak input menjadi hijau ketika diklik oleh pengguna.
- “ w-64 ” mengatur lebarnya menjadi 64px.
- “ jam-10 ” mengatur tingginya menjadi 10px.
- “ piksel-4 ” menambahkan padding 4px ke sisi atas dan kiri.
- “ py-2 ” menambahkan padding 2px ke atas dan bawah.
Langkah 2: Pratinjau Properti Fokus
Simpan kode HTML dan buka halaman web yang dibuat olehnya. Kemudian gerakkan kursor pada kotak input dan klik padanya dan perubahan di bawah ini akan terjadi:
Menggunakan Varian Aktif dalam HTML
Properti ini digunakan untuk memberi gaya pada elemen pada kondisi saat pengguna mengetuk elemen secara dinamis. Keadaan aktif adalah jangka waktu dari tahap aktivasi kursor dan keadaan pelepasannya.
Sintaksis
aktif: { Properti }Properti CSS tertentu diterapkan ke elemen yang dipilih.
Langkah 1: Terapkan Varian Aktif dalam kode HTML
Buat file HTML dan terapkan properti aktif ke beberapa elemen yang dalam kasus di bawah ini adalah tombol:
< div kelas = 'layar-h pusat-item-pusat pembenaran fleksibel' >
< tombol kelas = 'bg-green-600 p-4 round-md transisi-transformasi durasi-400 transformasi aktif: skala-110' >
Klik SAYA!
< / tombol >
< / div >
< / tubuh >
Dalam kode ini:
- “ bg-hijau-600 ” mengatur warna latar belakang menjadi hijau.
- “ hal-4 ” menambahkan padding 4px.
- “ bulat-md ” membuat bentuk tombol menjadi membulat.
- “ transisi-transformasi ” digunakan untuk mengubah tombol dalam durasi waktu kecil yang diatur oleh “ durasi-400 transformasi ”.
- “ aktif: skala-110 ” mengubah tombol menjadi ukuran yang lebih besar.
Langkah 2: Pratinjau Outputnya
Simpan kode di atas dalam file HTML dan pratinjau halaman web yang dibuat olehnya. Halaman web akan terlihat seperti:
Terlihat bahwa ukuran tombol bertambah ketika mouse dipegang dan segera setelah dilepaskan maka kembali ke keadaan semula.
Kesimpulan
Untuk menggunakan hover, fokus, dan status lainnya di Tailwind, gunakan kelas status yang telah ditentukan sebelumnya seperti “hover” dan terapkan beberapa properti gaya ke dalamnya seperti mengubah warna, membuat cincin fokus, dan sebagainya. Utilitas tampilan digunakan untuk menyajikan keluaran yang dapat diskalakan. Tulisan ini telah mendemonstrasikan metode penggunaan hover, fokus, dan status lainnya di Tailwind.