Transisi CSS3 Nggawe Efek Cerah
Desainer Web wis suwe ngontrol luwih akeh maneh kaca-kaca sing padha digawe nalika CSS3 bisa ngetokake pemandangan kasebut. Gaya anyar sing diidolake ing CSS3 menehi profesional web kemampuan kanggo nambah efek kaya Photoshop menyang halaman kasebut. Iki kalebu properti kaya geni bayangan lan glows , sudhut bunder, lan liyane. CSS3 uga ngenalaken efek kaya animasi sing bisa digunakake kanggo nggawe interaktivitas apik ing situs.
Salah siji efek visual banget sing sampeyan bisa nambah menyang unsur ing situs web sampeyan nggunakake CSS3 kanggo nggawe wong-wong mau mekar lan metu kanthi nggunakake kombinasi sifat opacity lan transisi. Iki minangka cara sing gampang lan uga didhukung kanggo nggawe kaca luwih interaktif kanthi nyiptakake wilayah sing wis dadi burem nalika pengunjung nggoleki, kaya sing nglayang.
Ayo goleki carane gampang kanggo nambah efek visual interaksi kasebut ing macem-macem elemen ing kaca web ..
Ngganti Opacity Ngganti ing Nguripake
Kita bakal miwiti kanthi ndeleng cara ngganti opacity saka gambar nalika customer wis nglayang saka unsur kasebut. Contone iki (HTML ditampilake ing ngisor iki) Aku nggunakake gambar karo kelas atribut greydout.
Kanggo nggawe werna abu-abu, kita nambah aturan gaya ing ngisor iki menyang gaya CSS kita:
.greydout {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0.25;
}
Setelan opacity iki diterjemahake dadi 25%. Iki tegese gambar bakal ditampilake minangka 1/4 saka transparansi normal. Kanthi nyata yen ora transparan bakal 100% nalika 0% bakal dadi transparan.
Sabanjure, kanggo nggawe gambar kasebut cetha (utawa luwih akurat, dadi kebak opoque) nalika mouse ditudhuh, sampeyan bakal nambah: pangkat pseudo-kelas:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Sampeyan bakal sok dong mirsani, kanggo conto iki, aku nggunakake versi prefixed aturan vendor kanggo mesthine kompatibilitas maju kanggo versi lawas saka browser kasebut. Nalika iki minangka praktik sing apik, kasunyatane yaiku aturan opacity saiki uga didhukung dening browser lan cukup aman kanggo ngeculake vendor prefixed garis. Isih, uga ora ana alesan ora nyakup awalan iki yen sampeyan pengin njamin support kanggo versi browser lawas. Mung mesthi ngetutake praktik sing paling apik kanggo mungkasi deklarasi kasebut kanthi versi normal sing un-prefixed saka gaya.
Yen sampeyan nganggo situs iki, sampeyan bakal weruh yen panyimpenan opacity iki minangka owah-owahan banget. Pisanan iku abu-abu lan banjur ora, karo ora ana interim nyatakake antarane loro. Iku kaya lampu - on utawa mati. Iki bisa dadi apa sampeyan pengin, nanging sampeyan uga pengin eksprimen karo owah-owahan sing luwih bertahap.
Kanggo nambah efek sing becik lan nggawe bertahap kanthi cepet, sampeyan pengin nambah properti transisi menyang kelas .greydout:
.greydout {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0.25;
-webkit-transition: kabeh 3s ease;
-moz-transition: kabeh 3s ease;
-ms-transisi: kabeh 3s ease;
-o-transisi: kabeh 3s ease;
transisi: kabeh 3s ease;
}
Kanthi kode iki, owah-owahan transisi mboko sithik tinimbang mung ngganti kanthi tiba-tiba.
Sawise maneh, kita nggunakake sawetara aturan prefixed vendor ing kene. Transisi ora dianjurake minangka opacity, supaya prefiks iki pancen nggawe.
Siji bab sing perlu dingerteni nalika sampeyan ngendhakake interaksi iki yaiku piranti layar tutul ora duwe "hover" negara, supaya efek iki asring ilang sapa nggunakake piranti layar tutul kaya ponsel. Transisi pancen bakal kedadeyan, nanging kedadeyan mangkono supaya ora bisa ditemokake. Sing becik yen sampeyan nambahake iki minangka efek bonus becik, nanging supaya ora ana owah-owahan sing kudu dipirsani kanggo dipahami.
Mudhun metu bisa uga
Sampeyan ora kudu miwiti karo gambar sing burem, sampeyan bisa migunakake transisi lan opacity kanggo mungkasi saka gambar sing temen banget. Nggunakake gambar sing padha, mung karo kelas withfadeout:
kelas = "withfadeout">
Kaya sadurunge, sampeyan ngganti opacity nggunakake: hover selector:
.withfadeout {
-webkit-transition: kabeh 2s ease-in-metu;
-moz-transisi: kabeh 2s ease-in-metu;
-ms-transisi: kabeh 2s ease-in-metu;
-o-transition: kabeh 2s ease-in-out;
transisi: kabeh 2s ease-in-metu;
}
.withfadeout: hover {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0.25;
}
Ing conto iki, gambar bakal transisi saka tondho kanggo mbaka sethithik transparan - mbalikke conto kawitan kita.
Nggoleki Gambar
Iku apik yen sampeyan bisa ngaplikasi transisi visual lan ngalami gambar, nanging sampeyan ora mung nggunakake gambar nganggo efek CSS iki. Sampeyan bisa kanthi gampang nggawe tombol-gaya CSS sing luntur nalika diklik lan dianakake. Sampeyan mung bakal nemtokake opacity nggunakake: pseudo-kelas aktif lan nglebokake kelas transisi sing nemtokake tombol kasebut. Klik terus tombol iki kanggo ndeleng apa sing kedadeyan.
Iku bisa kanggo nggawe atine sembarang unsur visual fade nalika hovered liwat utawa diklik. Ing conto iki aku ngganti opacity div lan werna teks nalika mouse wis liwat. Punika CSS:
#myDiv {
jembaré: 280px;
werna latar mburi: # 557A47;
warna: #dfdfdf;
padding: 10px;
-webkit-transition: kabeh 4s ease-out 0s;
-moz-transition: kabeh 4s ease-out 0s;
-ms-transisi: kabeh 4s ease-out 0s;
-o-transisi: kabeh 4s ease-out 0s;
transisi: kabeh 4s ease-out 0s;
}
#myDiv: hover {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0.25;
werna: # 000;
}
Pandhu Arah Menyang Bisa Mupangat saka Warna Mangsa Rusak
Ing menu pandhu arah prasaja, werna latar mburi alon-alon lan metu nalika aku mouse liwat item menu. Punika ing HTML:
- Ngarep
- Tutorial CSS3
- CSS3 Properties
Lan ing kene ana CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
tampilan: inline;
ngambang: kiwa;
padding: 5px 15px;
watesan: 0 5px;
-webkit-transition: kabeh 2s linear;
-moz-transisi: kabeh 2s linear;
-ms-transisi: kabeh 2s linear;
-o-transisi: kabeh 2s linear;
transisi: kabeh 2s linear;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
werna latar mburi: # DAF197;
}
Dukungan Browser
Kaya sing wis diduweni sawetara wektu, gaya iki nduweni dhukungan browser sing apik banget, supaya sampeyan bebas nggunakake piranti kasebut tanpa trepidation. Kajaba mung kanggo versi iki sing luwih lawas saka Internet Explorer, nanging kanthi kaputusan anyar Microsoft kanggo mungkasi support kanggo kabeh versi IE ing ngisor iki 11, browser lawas iki dadi kurang lan ora ana masalah - lan realistis, yen browser lawas ora ndeleng transisi fade iki, sing ora dadi masalah utama. Sanalika sampeyan ngatasi jinis-jinis efek kasebut kanggo interaksi nyenengake lan ora gumantung ing piranti kasebut kanggo mandu fungsionalitas utawa mbukak kunci, banjur browser lawas sing ora ndhukung efek bakal entuk pengalaman kurang nyenengake, nanging pangguna ing browser kasebut ora bakal ngerti prabédan, utamané yen bisa nggunakake situs kasebut minangka normal lan entuk informasi sing perlu.
Ekstra Fun; Swap Two Images
Punika conto cara kanggo ngowahi siji gambar menyang liyane. Gunakake HTML:
Lan CSS sing ndadekake siji pancen transparan lan sing liyane pancen opaque lan banjur swap transisi loro:
.swapMe img {-webkit-transition: kabeh 1s ease-in-out; -moz-transisi: kabeh 1s ease-in-metu; -ms-transisi: kabeh 1s ease-in-metu; -o-transisi: kabeh 1s ease-in-metu; transisi: kabeh 1s ease-in-metu; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }