Uhamisho wa CSS3 Unda Athari Bora za Fade
Wasanidi wa wavuti kwa muda mrefu walitaka udhibiti zaidi juu ya kurasa ambazo walikuwa wakiunda wakati CSS3 ilipiga eneo. Mitindo mpya iliyoletwa katika CSS3 iliwapa waalimu wa mtandao uwezo wa kuongeza athari za Photoshop-kama kwenye kurasa zao. Hii ilijumuisha mali kama vivuli vya kuacha na vito , pembe za pande zote, na zaidi. CSS3 pia ilianzisha athari za uhuishaji ambazo zinaweza kutumiwa kuunda interactivity nzuri kwenye maeneo.
Jitihada moja nzuri sana ya kuona unaweza kuongeza kwenye vipengee kwenye tovuti yako kwa kutumia CSS3 ni kuifanya kuingia na nje kwa kutumia mchanganyiko wa mali kwa opacity na mabadiliko. Hii ni njia rahisi na iliyohifadhiwa ili kuunda kurasa zako zaidi kwa kuunda maeneo yaliyotafsiriwa yanayotajwa wakati mgeni wa tovuti anafanya jambo fulani, kama kutembea juu ya kipengele hiki.
Hebu tuangalie ni rahisi jinsi ya kuongeza hii athari ya kuona ya kuingiliana kwa vipengele mbalimbali kwenye kurasa zako za wavuti.
Hebu & # 39; s Badilisha Opacity juu ya Hover
Tutaanza kwa kuangalia jinsi ya kubadilisha opacity ya picha wakati mteja anapoingia juu ya kipengele hiki. Kwa mfano huu (HTML inavyoonyeshwa hapa chini) Ninatumia picha na sifa ya darasa ya greydout.
Ili kuifanya kufutwa, tunaongeza kanuni za mtindo zifuatazo kwa stylesheet yetu ya CSS:
.greydout {
-blog-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Mipangilio hii ya opacity inatafsiri hadi 25%. Hii inamaanisha kwamba picha itaonyeshwa kama 1/4 ya uwazi wake wa kawaida. Kikamilifu opaque bila uwazi itakuwa 100% wakati 0% itakuwa wazi kabisa.
Kisha, ili kufanya picha ije wazi (au zaidi kwa usahihi, kuwa opaque kikamilifu) wakati panya itapigwa juu yake, utaongeza: hover pseudo darasa:
.greydout: hover {
-bubu-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Utaona kwamba, kwa mifano hii, ninatumia matoleo ya prefixed ya utawala ili kuhakikisha utangamano wa nyuma kwa matoleo ya zamani ya vivinjari hivi. Ingawa hii ni mazoezi mazuri, ukweli ni kwamba utawala wa opacity sasa unasaidiwa na browsers na ni salama sana kuacha mistari hiyo ya prefixed mistari. Bado, pia hakuna sababu ya kuingiza hizi prefixes kama unataka kuhakikisha usaidizi wa matoleo ya kivinjari ya zamani. Hakikisha tu kufuata mazoezi bora ya kumaliza tamko kwa kawaida, isiyo ya prefixed version ya mtindo.
Ikiwa ulitumia hii kwenye tovuti, utaona kwamba marekebisho haya ya opacity ni mabadiliko mabaya sana. Kwanza ni kijivu na kisha sio, na hakuna mataifa ya muda mfupi kati ya hizo mbili. Ni kama kubadili kwa mwanga - juu au kuzima. Hii inaweza kuwa nini unachotaka, lakini pia ungependa kujaribu majaribio ambayo yanapungua kwa kasi.
Ili kuongeza athari nzuri sana na kuifanya hii ipunguke, unataka kuongeza mali ya mpito kwenye darasa la greydout:
.greydout {
-blog-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-badiliko la kiti: kila 3s urahisi;
-moz-mpito: wote 3s urahisi;
-ms-mpito: wote 3s urahisi;
-o-mpito: wote 3s urahisi;
mpito: wote 3s urahisi;
}
Kwa msimbo huu, mabadiliko yangebadilika kwa hatua kwa hatua badala ya kubadili ghafla.
Mara nyingine tena, tunatumia sheria kadhaa za prefixed hapa. Uhamisho sio pia unasaidiwa kama opacity, hivyo prefixes haya kufanya mantiki.
Kitu kimoja cha kukumbuka unapopanga uingiliano huu ni kwamba vifaa vya skrini za kugusa hazina hali ya "hover", hivyo madhara haya mara nyingi hupotea kwa yeyote anayetumia kifaa cha skrini ya kugusa kama simu ya mkononi. Mpito huo utatokea mara nyingi, lakini hutokea kwa haraka sana kwamba hawezi kuonekana. Hiyo ni nzuri ikiwa unaongeza hii kama athari nzuri ya bonus, lakini uepuke mabadiliko yoyote ambayo inahitajika kuonekana kwa maudhui yaliyoeleweka.
Kuondoka ni Kunawezekana
Huna haja ya kuanza na picha iliyosafishwa, unaweza kutumia mabadiliko na opacity kufuta kutoka picha kamili ya opaque. Kutumia picha hiyo, tu kwa darasa la kufuta:
darasa = "kufuta">
Kama ilivyo hapo awali, unabadilisha opacity kwa kutumia: Mchaguaji wa hover:
.kifunguliwa {
-badilisha-ubadilishaji: kila 2s urahisi-nje-nje;
-moz-mpito: wote 2s urahisi-out-out;
-mu-mpito: kila 2s urahisi-out-out;
-o-mpito: kila 2s urahisi-out-out;
mpito: wote wawili wa urahisi-nje-nje;
}
.kifungua: hover {
-blog-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Katika mfano huu, picha itakuwa mpito kutoka opaque kikamilifu kwa uwazi fulani - kinyume cha mfano wetu wa kwanza.
Kwenda Zaidi ya Picha
Ni bora sana kwamba unaweza kutumia mabadiliko haya ya visual na unafanana na picha, lakini sio tu kutumia picha na madhara haya ya CSS. Unaweza urahisi kufanya vifungo vya CSS-styled ambavyo vinakufa wakati unapobofya na uliofanyika. Ungependa tu kuweka opacity kwa kutumia: kazi pseudo-darasa na kuweka mpito katika darasa kwamba kufafanua kifungo. Bofya na ushikilie kifungo hiki ili uone kinachotokea.
Inawezekana kufanya kimsingi kipengele chochote cha kuona kinapotea wakati unapozidi juu au kubonyeza. Katika mfano huu mimi kubadili opacity ya div na rangi ya maandiko wakati mouse ni juu yake. Hapa ni CSS:
#myDiv {
upana: 280px;
rangi ya background: # 557A47;
rangi: #dfdfdf;
padding: 10px;
-babiki-mpito: kila 4s urahisi-out 0s;
-moz-mpito: kila 4s urahisi-out 0s;
-mu-mpito: kila 4s urahisi-out 0s;
-o-mpito: kila 4s urahisi-out 0s;
mpito: wote 4s urahisi-out 0s;
}
#myDiv: hover {
-blog-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
rangi: # 000;
}
Menus Navigation Inaweza kufaidika na Rangi za Fading Background
Katika orodha hii rahisi ya urambazaji rangi ya asili inafungua polepole ndani na nje kama mimi panya juu ya vitu vya menyu. Hapa ni HTML:
- Nyumbani
- Tutorials za CSS3
- Mali CSS3
Na hapa ni CSS:
sampuli ya #Nav {orodha ya mtindo: hakuna; }
sampuli # yaNav li {
kuonyesha: inline;
kuelea: kushoto;
padding: 5px 15px;
margin: 0 5px;
mabadiliko ya -kitabu: kila 2s linear;
-muzi wa mpito: wote wawili wa mstari;
-mu-mpito: kila 2s linear;
-o-mpito: wote wawili wa mstari;
mpito: wote wawili wa mstari;
}
sampuli ya #Nama ya {mapambo ya maandishi: hapana; }
Sampuli ya #Ni li: hover {
rangi ya nyuma: # DAF197;
}
Msaada wa Vivinjari
Kama nilivyogusa mara chache tayari, mitindo hii ina msaada mzuri sana wa kivinjari, kwa hiyo unapaswa kujisikia huru kutumia hiyo bila dhiki yoyote. Kitu cha pekee kwa hii ni matoleo makubwa zaidi ya Internet Explorer, lakini kwa uamuzi wa hivi karibuni wa Microsoft wa kumaliza msaada kwa matoleo yote ya IE chini ya 11, browsers hizi za zamani zinakuwa suala la chini na chini - na kwa kweli, kama kivinjari cha zamani haipaswi angalia mabadiliko haya ya fade, ambayo haipaswi kuwa tatizo kubwa. Kwa muda mrefu kama unazuia aina hizi za madhara kwa ushirikiano wa kufurahisha na usiwe na kutegemea kuendesha kazi au kufungua maudhui muhimu, basi browsers wakubwa ambazo haziunga mkono athari zitapata uzoefu usio na furaha, lakini watumiaji kwenye vivinjari hao hata hata kujua tofauti, hasa kama wanaweza kutumia tovuti kama kawaida na kupata taarifa wanayohitaji.
Furaha ya ziada, Badilisha Mbili Picha
Hapa ni mfano wa jinsi ya kufuta picha moja hadi nyingine. Tumia HTML:
Na CSS ambayo inafanya moja kwa uwazi kikamilifu wakati mwingine ni opaque kikamilifu na kisha mpito swaps mbili:
.swapMe img {-webkit-mpito: yote 1 ya urahisi-nje-nje; -mozi-mpito: yote 1 ya urahisi-out-out; -mu-mpito: kila 1 ya urahisi-nje-nje; -o-mpito: yote 1 ya urahisi-nje-nje; mpito: yote 1 ya urahisi-nje-nje; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }