Peralihan CSS3 Buat Kesan Pudar yang Baik
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 perhatikan betapa mudahnya untuk menambah kesan visual yang berinteraksi kepada pelbagai unsur pada halaman web anda ..
Let's Change Opacity on Hover
Kami akan mulakan dengan melihat cara mengubah kelegapan imej apabila pelanggan melayang ke atas elemen tersebut. Untuk contoh ini (HTML ditunjukkan di bawah) Saya 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 penuh legap) apabila tetikus itu melayang padanya, anda akan menambah: hover pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
kelegapan: 1;
}
Anda akan melihat bahawa, untuk contoh-contoh ini, saya menggunakan versi prefixed 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 berwarna 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 bagus dan membuat pudar ini beransur-ansur, anda mahu menambah harta peralihan ke kelas .greydout:
.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;
}
Dengan kod ini, perubahan itu akan beralih secara beransur-ansur bukan sekadar bertukar tiba-tiba.
Sekali lagi, kami menggunakan beberapa peraturan prevalen vendor di sini. Peralihan tidak disokong sebagai kelegapan, jadi awalan ini masuk akal.
Satu perkara yang harus diingat semasa merancang interaksi ini adalah bahawa peranti skrin sentuh tidak mempunyai keadaan "hover", jadi kesan ini sering hilang pada sesiapa sahaja yang menggunakan peranti skrin sentuh seperti telefon bimbit. Peralihan akan sering berlaku, tetapi ia berlaku dengan cepat sehingga mereka tidak dapat dilihat. Itulah baik jika anda menambah ini sebagai kesan bonus bagus, tetapi elakkan apa-apa perubahan yang PERLU dilihat untuk kandungan yang difahami.
Pudar adalah Kemungkinan Terlalu
Anda tidak perlu memulakan dengan imej pudar, anda boleh menggunakan peralihan dan kelegapan untuk memudar dari imej yang benar-benar legap. Menggunakan imej yang sama, hanya dengan kelas tanpa had:
kelas = "withfadeout">
Sama seperti sebelumnya, anda mengubah kelegapan menggunakan: pemilih hover:
.withfadeout {
-webkit-peralihan: semua 2s mudah masuk-keluar;
-moz-transisi: kesemua 2s mudah masuk;
-ms-peralihan: semua 2s mudah masuk-keluar;
-o-peralihan: semua 2s mudah masuk-keluar;
peralihan: kesemua 2s mudah masuk;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
kelegapan: 0.25;
}
Dalam contoh ini, imej akan beralih dari legap sepenuhnya menjadi agak telus - sebaliknya contoh pertama kami.
Melangkah Lebih Dari Imej
Sangat baik bahawa anda boleh menggunakan peralihan visual ini dan memudar ke imej, tetapi anda tidak terhad hanya menggunakan imej dengan kesan CSS ini. Anda boleh dengan mudah membuat butang gaya CSS yang pudar apabila diklik dan dipegang. Anda hanya akan menetapkan kelegapan menggunakan: kelas pseudo aktif dan meletakkan peralihan pada kelas yang mentakrifkan butang. Klik dan tahan butang ini untuk melihat apa yang berlaku.
Ia boleh dibuat pada dasarnya mana-mana elemen visual pudar apabila berlegar di atas atau diklik. Dalam contoh ini, saya menukar kelegapan div dan warna teks apabila tetikus berada di atasnya. Berikut ialah CSS:
#myDiv {
lebar: 280px;
warna latar belakang: # 557A47;
warna: #dfdfdf;
padding: 10px;
-webkit-transition: semua 4s kemudahan keluar 0s;
-moz-peralihan: semua 4s kemudahan keluar 0s;
-max-peralihan: semua 4s kemudahan keluar 0s;
-o-transisi: semua 4s kemudahan keluar 0s;
peralihan: semua 4s kemudahan keluar 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
kelegapan: 0.25;
warna: # 000;
}
Menu Navigasi Boleh Manfaat dari Warna Latar Belakang Memudar
Dalam menu navigasi mudah ini, warna latar belakang memudar perlahan dan keluar ketika saya mengetikkan item menu. Inilah HTML:
- Rumah
- Tutorial CSS3
- Hartanah CSS3
Dan inilah CSS:
ul # sampleNav {senarai gaya: tiada; }
ul # sampleNav li {
paparan: inline;
terapung: kiri;
padding: 5px 15px;
margin: 0 5px;
-webkit-transisi: semua 2s linear;
-moz-peralihan: semua 2s linear;
-ms-transisi: semua 2s linear;
-o-transisi: semua 2s linear;
peralihan: semua 2s linear;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
warna latar belakang: # DAF197;
}
Sokongan Penyemak Imbas
Seperti yang saya telah menyentuh beberapa kali, gaya ini mempunyai sokongan penyemak imbas yang sangat baik, jadi anda harus berasa bebas untuk menggunakannya tanpa sebarang keraguan. Satu-satunya pengecualian untuk ini adalah versi Internet Explorer yang lebih lama, tetapi dengan keputusan baru-baru ini Microsoft untuk menamatkan sokongan untuk semua versi IE di bawah 11, pelayar lama menjadi kurang dan kurang isu - dan realistik, jika pelayar lama tidak lihat peralihan pudar ini, itu tidak sepatutnya menjadi masalah utama. Selagi anda mengurung jenis kesan ini untuk interaksi yang menyeronokkan dan tidak bergantung kepada mereka untuk memacu fungsi atau mendedahkan kandungan utama, maka penyemak imbas yang lebih lama yang tidak menyokong kesan akan mendapat pengalaman yang kurang menyenangkan, tetapi pengguna pada penyemak imbas itu tidak akan tahu perbezaannya, terutamanya jika mereka boleh menggunakan tapak tersebut sebagai normal dan mendapatkan maklumat yang mereka perlukan.
Keseronokan Tambahan; Tukar Dua Imej
Berikut adalah contoh cara memudar satu imej ke yang lain. Gunakan HTML:
Dan CSS yang membuat satu telus sepenuhnya manakala yang lain adalah sepenuhnya legam dan kemudian peralihan menukar kedua:
.swapMe img {-webkit-transition: all 1s easy-in-out; -moz-peralihan: semua 1-dalam-mudah keluar; -ms-peralihan: kesemua 1s-dalam-keluar; -o-peralihan: semua 1-dalam-mudah keluar; peralihan: kesemua 1-in-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; kelegapan: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; kelegapan: 0; }