Para perancang web telah lama menginginkan lebih banyak kontrol atas halaman-halaman yang mereka ciptakan ketika CSS3 menghantam tempat kejadian. Gaya baru yang diperkenalkan di CSS3 memberi para profesional web kemampuan untuk menambahkan efek seperti Photoshop ke halaman mereka. Ini termasuk properti seperti bayangan dan kilau, sudut membulat, dan banyak lagi. CSS3 juga memperkenalkan efek seperti animasi yang dapat digunakan untuk menciptakan interaktivitas yang bagus di situs.
Satu efek visual yang sangat bagus yang dapat Anda tambahkan ke elemen di situs web Anda menggunakan CSS3 adalah untuk membuatnya memudar masuk dan keluar menggunakan kombinasi properti untuk opasitas dan transisi. Ini adalah cara yang mudah dan didukung dengan baik untuk membuat halaman Anda lebih interaktif dengan membuat area pudar yang menjadi fokus ketika pengunjung situs melakukan sesuatu, seperti melayang di atas elemen itu.
Mari kita lihat betapa mudahnya menambahkan efek visual yang berinteraksi ini ke berbagai elemen di halaman web Anda.
Ubah Opacity on Hover
Kami akan mulai dengan melihat cara mengubah opasitas gambar ketika pelanggan melayang di atas elemen itu. Untuk contoh ini (HTML ditunjukkan di bawah) kami menggunakan gambar dengan atribut class dari
greydout.
Untuk menjadikannya abu-abu, kami menambahkan aturan gaya berikut ke stylesheet CSS kami: .greydout {-webkit-opacity: 0,25;-moz-opacity: 0,25;opacity: 0,25;}
Pengaturan opasitas ini diterjemahkan ke 25%. Ini berarti bahwa gambar akan ditampilkan sebagai 1/4 dari transparansi normalnya. Sepenuhnya buram tanpa transparansi akan 100% sementara 0% akan benar-benar transparan. Selanjutnya, untuk membuat gambar menjadi jelas (atau lebih akurat, untuk menjadi sepenuhnya buram) ketika mouse melayang di atasnya, Anda akan menambahkan : hoverpseudo-class: .greydout: hover {-webkit-opacity: 1;-moz-opacity: 1;opacity: 1;}
Anda akan melihat bahwa, untuk contoh ini, kami menggunakan versi awal dari aturan vendor untuk memastikan kompatibilitas ke belakang untuk versi lama dari browser tersebut. Meskipun ini adalah praktik yang baik, kenyataannya adalah bahwa aturan opacity sekarang didukung dengan baik oleh browser dan cukup aman untuk menjatuhkan garis prefixed vendor. Namun, tidak ada alasan untuk tidak menyertakan awalan ini jika Anda ingin memastikan dukungan untuk versi browser yang lebih lama. Pastikan untuk mengikuti praktik terbaik yang disetujui untuk mengakhiri deklarasi dengan versi normal dan tidak dipre-prefiks. Jika Anda menerapkan ini di situs, Anda akan melihat bahwa pengaturan opasitas ini adalah perubahan yang sangat mendadak. Pertama, abu-abu dan kemudian tidak, tanpa negara sementara di antara keduanya. Itu seperti tombol lampu - hidup atau mati. Ini mungkin yang Anda inginkan, tetapi Anda juga mungkin ingin bereksperimen dengan perubahan yang lebih bertahap. Untuk menambahkan efek yang sangat bagus dan membuat ini memudar secara bertahap, Anda ingin menambahkan transisi
properti ke .greydoutclass: .greydout {-webkit-opacity: 0,25;-moz-opacity: 0,25;opacity: 0,25;-webkit-transisi: semua 3s mudah;-moz-transition: semua 3s mudah;-ms-transition: semua 3s mudah;-o-transisi: semua 3s mudah;transisi: semua 3s mudah;}
