Transisi CSS3 Ciptakan Efek Fade yang Bagus
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 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 ..
Biarkan & # 39; Ubah Opacity pada Hover
Kami akan mulai dengan melihat cara mengubah opasitas gambar ketika pelanggan melayang di atas elemen itu. Untuk contoh ini (HTML ditunjukkan di bawah) Saya menggunakan gambar dengan atribut class 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: hover pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Anda akan melihat bahwa, untuk contoh-contoh ini, saya 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 warnanya abu-abu dan kemudian tidak, tanpa status 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 menjadikannya memudar secara bertahap, Anda ingin menambahkan properti transisi ke kelas .greydout:
.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;
}
Dengan kode ini, perubahan akan bertransisi secara bertahap daripada hanya beralih secara tiba-tiba.
Sekali lagi, kami menggunakan sejumlah aturan prefixed vendor di sini. Transisi tidak didukung dengan baik sebagai opasitas, sehingga awalan ini masuk akal.
Satu hal yang harus diingat ketika Anda merencanakan interaksi ini adalah bahwa perangkat layar sentuh tidak memiliki status "hover", jadi efek ini sering hilang pada siapa pun yang menggunakan perangkat layar sentuh seperti ponsel. Transisi akan sering terjadi, tetapi itu terjadi begitu cepat sehingga mereka benar-benar tidak dapat dilihat. Itu bagus jika Anda menambahkan ini sebagai efek bonus yang bagus, tetapi hindari perubahan apa pun yang PERLU dilihat agar konten dipahami.
Memudar Mungkin Juga
Anda tidak harus mulai dengan gambar yang pudar, Anda dapat menggunakan transisi dan opasitas untuk memudar dari gambar yang sepenuhnya buram. Menggunakan gambar yang sama, hanya dengan kelas tanpa kegagalan:
class = "withfadeout">
Sama seperti sebelumnya, Anda mengubah opacity menggunakan: pemilih melayang:
.withfadeout {
-webkit-transisi: semua 2s keluar-masuk;
-moz-transition: semua 2s keluar-masuk;
-ms-transition: semua 2s keluar-masuk;
-o-transition: semua 2s keluar-masuk;
transisi: semua 2s keluar-masuk;
}
.withfadeout: hover {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0,25;
}
Dalam contoh ini, gambar akan bertransisi dari sepenuhnya buram menjadi agak transparan - kebalikan dari contoh pertama kami.
Melampaui Gambar
Sangat bagus bahwa Anda dapat menerapkan transisi visual ini dan memudar ke gambar, tetapi Anda tidak terbatas hanya menggunakan gambar dengan efek CSS ini. Anda dapat dengan mudah membuat tombol bergaya CSS yang memudar ketika diklik dan ditahan. Anda hanya akan mengatur opacity menggunakan: pseudo-kelas aktif dan menempatkan transisi pada kelas yang mendefinisikan tombol. Klik dan tahan tombol ini untuk melihat apa yang terjadi.
Ini mungkin untuk membuat dasarnya elemen visual yang memudar ketika melayang atau diklik. Dalam contoh ini saya mengubah opacity dari div dan warna teks ketika mouse melewatinya. Berikut ini CSS-nya:
#myDiv {
width: 280px;
background-color: # 557A47;
warna: #dfdfdf;
padding: 10px;
-webkit-transisi: semua 4s memudahkan 0s;
-moz-transition: semua 4s memudahkan 0s;
-ms-transition: semua 4s memudahkan 0s;
-o-transition: semua 4s keluar-keluar 0s;
transisi: semua 4s memudahkan 0s;
}
#myDiv: hover {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0,25;
warna: # 000;
}
Navigasi Menu Dapat Manfaat dari Memudar Warna Latar Belakang
Dalam menu navigasi sederhana ini warna latar belakang memudar perlahan masuk dan keluar saat saya mengarahkan mouse ke item menu. Berikut ini HTML-nya:
- Rumah
- Tutorial CSS3
- Properti CSS3
Dan di sini adalah CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
display: inline;
float: kiri;
padding: 5px 15px;
margin: 0 5px;
-webkit-transisi: semua 2s linear;
-moz-transisi: semua 2s linear;
-ms-transition: semua 2s linear;
-o-transisi: semua 2s linear;
transisi: semua 2s linear;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
warna latar belakang: # DAF197;
}
Dukungan Browser
Seperti yang sudah saya singgung beberapa kali, gaya ini memiliki dukungan browser yang sangat baik, jadi Anda harus merasa bebas untuk menggunakannya tanpa keraguan. Satu-satunya pengecualian untuk ini adalah versi Internet Explorer yang jauh lebih tua, tetapi dengan keputusan Microsoft untuk mengakhiri dukungan untuk semua versi IE di bawah 11 tahun, peramban yang lebih tua ini menjadi kurang dan kurang dari masalah - dan secara realistis, jika peramban yang lebih lama tidak melihat transisi pudar ini, yang seharusnya tidak menjadi masalah besar. Selama Anda membatasi jenis efek ini untuk interaksi yang menyenangkan dan tidak bergantung pada mereka untuk mendorong fungsi atau mengungkapkan konten utama, maka browser yang lebih lama yang tidak mendukung efek akan mendapatkan pengalaman yang kurang menyenangkan, tetapi pengguna di browser tersebut bahkan tidak akan mengetahui perbedaannya, terutama jika mereka dapat menggunakan situs seperti biasa dan mendapatkan informasi yang mereka butuhkan.
Ekstra Menyenangkan, Tukar Dua Gambar
Berikut ini contoh cara memudarkan satu gambar ke gambar lainnya. Gunakan HTML:
Dan CSS yang membuat satu sepenuhnya transparan sementara yang lain sepenuhnya buram dan kemudian transisi swap keduanya:
.swapMe img {-webkit-transition: semua kemudahan 1-in-out; -moz-transition: semua 1s kemudahan-keluar; -ms-transition: semua 1s kemudahan-keluar; -o-transition: semua 1s kemudahan-dalam-keluar; transisi: semua 1-keluar-masuk; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }