Pereka laman web telah lama menginginkan lebih banyak kawalan ke atas halaman yang mereka buat ketika CSS3 melanda tempat kejadian. Gaya baru yang diperkenalkan dalam CSS3 memberikan profesional web keupayaan untuk menambah kesan seperti Photoshop ke halaman mereka. Ini termasuk hartanah seperti bayang-bayang drop dan bersinar, sudut bulat, dan banyak lagi. CSS3 juga memperkenalkan kesan seperti animasi yang boleh digunakan untuk mewujudkan interaktiviti yang bagus di laman web.
Satu kesan visual yang sangat bagus yang boleh anda tambahkan ke elemen dalam laman web anda menggunakan CSS3 adalah untuk menjadikannya pudar masuk dan keluar dengan menggunakan gabungan sifat untuk kelegapan dan peralihan. Ini adalah cara yang mudah dan disokong untuk menjadikan laman anda lebih interaktif dengan mewujudkan kawasan pudar yang menjadi tumpuan apabila pengunjung laman melakukan sesuatu, seperti melayang di atas elemen tersebut.
Mari kita lihat betapa mudahnya untuk menambah kesan visual interaksi ini kepada pelbagai elemen pada halaman web anda.
Ubah Kelegapan di Hover
Kami akan mulakan dengan melihat cara mengubah kelegapan imej apabila pelanggan melayang ke atas elemen tersebut. Untuk contoh ini (HTML ditunjukkan di bawah) kami menggunakan imej dengan atribut kelas
greydout.
Untuk menjadikannya berwarna, kami menambah peraturan gaya berikut kepada lembaran gaya CSS kami: .greydout {-webkit-opacity: 0.25;-moz-opacity: 0.25;kelegapan: 0.25;}
Tetapan opacity ini diterjemahkan ke 25%. Ini bermakna imej akan ditunjukkan sebagai 1/4 dari ketelusan yang biasa. Terlarang sepenuhnya tanpa ketelusan akan 100% manakala 0% akan benar-benar telus. Seterusnya, untuk membuat imej menjadi jelas (atau lebih tepat, menjadi legap sepenuhnya) apabila tetikus itu melayang di atasnya, anda akan menambah : hoverpseudo-class: .greydout: hover {-webkit-opacity: 1;-moz-opacity: 1;kelegapan: 1;}
Anda akan melihat bahawa, untuk contoh-contoh ini, kami menggunakan versi pra-peraturan vendor untuk memastikan keserasian ke belakang untuk versi lama penyemak imbas tersebut. Walaupun ini adalah amalan yang baik, hakikatnya ialah peraturan opacity kini disokong dengan baik oleh penyemak imbas dan ia sangat selamat untuk menjatuhkan barisan vendor yang sedia ada. Namun, tidak ada alasan untuk tidak memasukkan awalan ini jika anda ingin memastikan sokongan untuk versi penyemak imbas yang lebih lama. Pastikan anda mengikuti amalan terbaik yang diterima untuk mengakhiri perisytiharan itu dengan versi gaya biasa dan un-prefixed. Jika anda menggunakan ini di tapak, anda akan melihat bahawa pelarasan kelegapan ini adalah perubahan yang sangat mendadak. Pertama, ia adalah kelabu dan kemudian ia tidak, tanpa negeri sementara antara kedua-dua mereka. Ia seperti suis lampu - hidup atau mati. Ini mungkin apa yang anda mahukan, tetapi anda juga mungkin mahu mencuba perubahan yang lebih beransur-ansur. Untuk menambah kesan yang sangat baik dan membuat pudar ini beransur-ansur, anda mahu menambah peralihan
harta kepada .greydoutkelas: .greydout {-webkit-opacity: 0.25;-moz-opacity: 0.25;kelegapan: 0.25;-webkit-transisi: semuanya mudah 3s;-moz-peralihan: semua mudah 3s;-ms-peralihan: kesemua 3s;-o-peralihan: semua 3s mudah;peralihan: semua 3s mudah;}
