Itu gaya baru diperkenalkan di CSS3 memberi para profesional web kemampuan untuk menambahkan efek seperti Photoshop ke halaman mereka. Satu efek visual yang dapat Anda tambahkan menggunakan CSS3 adalah membuat halaman web menjadi interaktif dengan membuat area pudar yang menjadi fokus saat pengunjung situs melakukan sesuatu, seperti mengarahkan kursor ke elemen tersebut. Efek ini menggunakan kombinasi dari kegelapan dan transisi.
Ubah Opacity saat Arahkan kursor
Salah satu elemen interaktif adalah mengubah opasitas gambar saat pelanggan mengarahkan kursor ke elemen tersebut. Untuk contoh ini (HTML ditampilkan di bawah), kami menggunakan gambar dengan atribut kelas dari abu-abu.
Untuk membuatnya berwarna abu-abu, tambahkan aturan gaya berikut ke lembar gaya CSS Anda:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0,25;
opasitas: 0,25;
}
Pengaturan opacity ini diterjemahkan menjadi 25 persen. Ini berarti bahwa gambar akan ditampilkan sebagai 1/4 dari transparansi normalnya. Sepenuhnya buram tanpa transparansi akan menjadi 100 persen, sedangkan 0 persen akan sepenuhnya transparan.
Selanjutnya, untuk membuat gambar menjadi jelas (atau lebih tepatnya, menjadi buram sepenuhnya) saat mouse melayang di atasnya, Anda akan menambahkan yang berikut:
.greydout: arahkan {
-webkit-opacity: 1;
-moz-opacity: 1;
opasitas: 1;
}
Lebih Banyak Penyesuaian Opacity
Anda akan melihat bahwa, untuk contoh ini, kami menggunakan versi aturan yang diawali vendor untuk memastikan kompatibilitas mundur untuk versi lama dari browser tersebut. Meskipun ini adalah praktik yang baik, aturan opacity didukung dengan baik oleh browser, dan aman untuk menghapus baris yang diawali vendor tersebut.
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 diterima untuk mengakhiri deklarasi dengan versi gaya yang normal dan tidak diawali.
Saat diterapkan di situs, penyesuaian opasitas ini merupakan perubahan mendadak. Pertama, itu abu-abu, dan kemudian tidak, tanpa status sementara di antara keduanya. Ini seperti saklar lampu—hidup atau mati. Ini mungkin yang Anda inginkan, tetapi Anda mungkin juga ingin bereksperimen dengan perubahan yang lebih bertahap.
Untuk menambahkan efek yang bagus dan membuat ini memudar secara bertahap, tambahkan transisi Properti:
.greydout
kelas:.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0,25;
opasitas: 0,25;
-webkit-transisi: semua 3s mudah;
-moz-transisi: semua 3s mudah;
-ms-transisi: semua 3s mudah;
-o-transisi: semua 3s mudah;
transisi: semua 3s mudah;
}