Yenza Ama-Elements Ekhasi leWebhu Aphelelwe Ngaphandle ne-CSS3

Izinguquko ze-CSS3 Zakha imiphumela emihle ye-Fade

Abaqambi bewebhu babekade befisa ukulawula okungaphezulu emakhasini abakhayo lapho i-CSS3 ishaya indawo. Izitayela ezintsha ezethulwa ku-CSS3 zinikeze ochwepheshe bewebhu ikhono lokufaka imiphumela ye-Photoshop-like kumakhasi abo. Lokhu kufaka phakathi izakhiwo ezinjengezithunzi zokudonsa kanye nokuvutha , izingxondorongo ezizungezile, nokuningi. I-CSS3 iphinde ithele imiphumela efana nemifanekiso engasetshenziselwa ukudala ukusebenzisana okuhle kumasayithi.

Umphumela owodwa omuhle kakhulu wokubonwa ongayengeza kuzakhi ezingosini yakho usebenzisa i- CSS3 ukuzenza ziphephe futhi ziphume ngokusebenzisa inhlanganisela yezindawo zokuvula nokuguquguquka. Lena indlela elula futhi exhaswe kahle yokwenza amakhasi akho asebenze ngokwengeziwe ngokudala izindawo eziphelile ezigxila lapho isivakashi sesayithi senza okuthile, njengokungena ngaphezulu kwalowo sici.

Ake sibuke ukuthi kulula kangakanani ukwengeza lokhu kuhlangana okubonakalayo kumakhi ahlukahlukene kumakhasi akho ewebhu.

Vumela & # 39; s Ukuguqulwa kwe-Opacity ku-Hover

Sizoqala ngokubuka ukuthi singashintsha kanjani ukukhanya kwesithombe uma ikhasimende lihambela ngaleyo element. Kulesi sibonelo (i-HTML iboniswe ngezansi) Ngisebenzisa isithombe ngesilinganiso seklasi sokukhishwa.

Ukuze sikhiphe, sengeza isimiso sesitayela esilandelayo kusikripthi sethu sesitayela se-CSS:

.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
i-opacity: 0.25;
}}

Lezi zilungiselelo zokuvula zihumusha ku-25%. Lokhu kusho ukuthi isithombe sizoboniswa njenge-1/4 yokubonakala kwayo okujwayelekile. I-opaque ngokugcwele engekho obala kuyoba yi-100% ngenkathi u-0% uzobe obala.

Okulandelayo, ukwenza isithombe sizwakale (noma ngaphezulu ngokunembile, ukuba u-opaque ngokugcwele) uma igundane liboshwe phezu kwalo, ungangezela: ukuhamba phambili kweklasi:

.Greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
i-opacity: 1;
}}

Uzoqaphela ukuthi, kulezi zibonelo, ngisebenzisa izinguqulo zangaphambili zokuthengisa zomthengisi ukuqinisekisa ukuhambisana okubuyela emuva kwezinguquko ezindala zalezi ziphequluli. Nakuba lokhu kuwumkhuba omuhle, iqiniso liwukuthi ukubusa kwe-opacity manje kusekelwa iziphequluli futhi kuhle kakhulu ukushiya labo abathengisi imigqa yangaphambili. Noma kunjalo, asikho isizathu sokuthi ufake lezi ziqalo uma ufuna ukuqinisekisa ukusekelwa kwezinguqulo zesiphequluli esidala. Vele uqiniseke ukuthi ulandela umkhuba owamukelekile wokuqeda lesi simemezelo ngenguqulo evamile, engafanele kuqala yesitayela.

Uma ususe lokhu kusayithi, uzobona ukuthi lokhu kulungiswa kwe-opacity kuyishintsha kakhulu. Okokuqala igrey futhi akusikho, kungekho zikhathi zesikhashana phakathi kwalabo ababili. Kufana nomshini wokukhanya - on noma ovaliwe. Lokhu kungaba yilokho okufunayo, kodwa ungase ufune nokuzama ukushintsha okwedlula kancane.

Ukwengeza umphumela omuhle ngempela futhi wenze lokhu kufezeke kancane, ufuna ukwengeza impahla yokuguqula ekilasini .Greydout:

.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
i-opacity: 0.25;
-webkit-ushintsho: konke ukukhululeka kuka-3;
-ukushintsha -moz: konke ukukhululeka kuka-3;
-msms-transition: wonke ama-3 alula;
-o-shintsho: konke ku-3s kulula;
Ukuguquka: konke ukukhululeka kuka-3;
}}

Ngalesi khodi, ushintsho lwaluzoshintsha kancane kancane kunokuba luguqule kalula.

Sibuye futhi, sisebenzisa imithetho eminingi ye-prefixed lapha. Ukuguqulwa akusekelwa kahle njenge-opacity, ngakho-ke lezi zibikezelo zenza kahle.

Into eyodwa okumelwe uyikhumbule njengoba uhlela lokhu kusebenzisana yilawo madivaysi esibuko asinayo "isimo sokumisa", ngakho-ke lemiphumela ivame ukulahlekelwa kunoma ubani osebenzisa idivayisi yeskrini yokuthinta njengefoni ephathekayo. Ushintsho luzovame ukwenzeka, kodwa lwenzeka ngokushesha kangangokuthi aluboni ngempela. Lokhu kuhle uma ungeza lokhu njengomphumela omuhle webhonasi, kodwa gwema noma yiziphi izinguquko ezidingekayo ukuthi zibonwe okuqukethwe okumele ziqondwe.

Ukuphuma Kukhona Kungenzeka

Akudingeki uqale ngesithombe esiphelile, ungasebenzisa ukuguqulwa nokuvuleka kokuphelelwa yisikhathi esivela esithombeni ngokugcwele. Ukusebenzisa isithombe esifanayo, kuphela ngeklasi lokususa:

isigaba = "ukushiya">

Njengalapho ngaphambili, ushintsha i-opacity usebenzisa i-hover selector:

.Ngokuphuma {
-webkit-ushintsho: konke oku-2 kulula ukuphuma;
-ukuguquguquka kwemimoya: konke okubili okulula-okuphumayo;
-msms-transition: konke oku-2 kulula ukuphuma;
-o-ushintsho: konke oku-2 kulula ukuphuma;
ukuguqulwa: konke oku-2s kulula ukuphuma;
}}
.suka kokuphuma: i-hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
i-opacity: 0.25;
}}

Kulesi sibonelo, isithombe singashintsha kusuka opaque ngokugcwele kuze kube sobala - okuphambene nesibonelo sethu sokuqala.

Ukuhamba Ngaphandle Kwezithombe

Kuhle kakhulu ukuthi ungasebenzisa lezi zinguquko ezibukwayo futhi ufinyelele ezithombeni, kodwa awugcini nje ukusebenzisa izithombe ngalezi zici ze-CSS. Ungenza kalula izinkinobho ze-CSS-styled eziphelile uma zichofoziwe futhi zigcinwe. Ungabeka nje i-opacity usebenzisa: i-classic pseudo-class bese ubeka ushintsho ekilasini elichaza inkinobho. Chofoza bese ubamba le nkinobho ukubona ukuthi kwenzekani.

Kungenzeka ukwenze noma yikuphi okubonakalayo okubonakalayo kuphelile uma kukhishwa ngaphezulu noma kuchofoziwe. Kulesi sibonelo ngishintsha ukukhanya kwe-div nombala wombhalo lapho igundane liphezu kwalo. Nansi i-CSS:

#myDiv {
ububanzi: 280px;
umbala ongemuva: # 557A47;
umbala: #dfdfdf;
i-padding: 10px;
-webkit-ushintsho: konke okungama-4 okukhululeka oku-0s;
-kuguquguquka kwemimoya: konke okungama-4 okukhululeka oku-0s;
-msms-transition: wonke ama-4 aqedile ukuphuma-0;
-o-ishintsho: zonke izinto ezingu-4 zikhululekile-zi-0s;
ukuguqulwa: konke okungu-4 okukhishwa okungu-0;
}}
#myDiv: i-hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
i-opacity: 0.25;
umbala: # 000;
}}

Imenyu Yokuzula Ingathola Inzuzo Yezingqikithi Zemvelaphi Edelayo

Kule menyu elula yokuzulazula umbala wangemuva uhamba kancane kancane nangaphandle njengoba mina ngigundane phezu kwemenyu yemenyu. Nasi i-HTML:

Futhi nansi i-CSS:

isampuli # #Nav {uhlu lwesitayela: akukho; }}
isampuli ye-ul #avn li {
ukubonisa: inline;
faka: kwesokunxele;
i-padding: 5px 15px;
umkhawulo: 0 5px;
-webkit-ushintsho: konke oku-2s linear;
-ukuguquguquka kwemimoya: konke oku-2s linear;
-msms-transition: konke oku-2s linear;
-o-ushintsho: konke oku-2s linear;
ukuguqulwa: konke oku-2s linear;
}}
isampula # #Nav li a {umbhalo-umhlobiso: akekho; }}
isampuli # #Nav li: hover {
umbala wangemuva: # DAF197;
}}

Ukusekelwa kwesiphequluli

Njengoba ngithinte izikhathi ezimbalwa kakade, lezi zitayela zinokusekelwa okuhle kwesiphequluli, ngakho kufanele uzizwe ukhululekile ukuyisebenzisa ngaphandle kokuthuthumela. Okuhlukile kuphela kulezi zinguqulo ezindala ze-Internet Explorer, kodwa ngesinqumo sikaMicrosoft samuva sokuqeda ukwesekwa kwazo zonke izinguqulo ze-I ngezansi kwe-11, lezi ziphequluli ezindala ziba yingxabano encane - futhi ngokuqinisekile, uma isiphequluli esidala singenzi bheka lokhu kuguquka kwesibindi, akufanele kube inkinga enkulu. Uma nje uvale lezi zinhlobo zokubambisana ukuze ujabulele futhi ungazithembi kuzo ukushayela ukusebenza noma ukudalula okuqukethwe okubalulekile, iziphequluli ezindala ezingasisekeli imiphumela zizothola isipiliyoni esincane kakhulu, kepha abasebenzisi kulawo mabheki ngeke baze wazi umehluko, ikakhulukazi uma bengasebenzisa lesi siza njengesijwayelekile futhi bathole ulwazi oludingayo.

Ukuzijabulisa okwengeziwe; Shintsha izithombe ezimbili

Nasi isibonelo sokuthi ufeze isithombe esisodwa sibe sesinye. Sebenzisa i-HTML:

Futhi i-CSS eyenza i-transparent ngokugcwele ngenkathi enye i-opaque ngokugcwele bese ushintsho lushintsha lezi ezimbili:

.swapMe img {-webkit-transition: konke oku-1 ku-out-out; -kuguquguquka kwemimoya: konke oku-1 okulula ukuphuma; -msms-transition: konke oku-1 kulula ukuphuma; -o-shintsho: konke oku-1 kulula ukuphuma; ukuguquka: konke oku-1 kukhululekile; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; i-opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; i-opacity: 0; }}