CSS3 Kuchinja Kunogadzira Nice Fade Effects
Webhu vakagadziri vave vaida kwenguva yakareba kutonga pamapeji avo aive achigadzira apo CSS3 inotora nzvimbo. Zvitsva zvitsva zvakatangwa muCSS3 zvakapa web professionals kukwanisa kuwedzera Photoshop-sezvakaita mhinduro pamapeji avo. Izvi zvaisanganisira nzvimbo dzakadai semadonhwe emadonzvo nemagetsi , makona akapoteredza, nezvimwe. CSS3 yakatumirawo hupenyu-hwakafanana nemigumisiro inogona kushandiswa kugadzira kunaka kwekushanda kune dzimwe nzvimbo.
Chimwe chinhu chakanakisisa chekuona iwe unogona kuwedzera kune zvimwe zvinhu mu webhusaiti yako kushandisa CSS3 ndekuita kuti vapedze mukati nekunze vachishandisa kusanganiswa kwemamiriro ekugadzirisa uye kushanduka. Iyi inzira iri nyore uye yakatsigirwa yekuita mapeji ako akawanda achibatana nekugadzira zvakashata nzvimbo dzinowanzoisa pfungwa apo mushanyi wepaiti anoita chimwe chinhu, kufanana nekutengesa pamusoro pechinhu ichocho.
Ngatitarisei kuti zviri nyore sei kuwedzera izvi kuwirirana maitiro ezvinhu zvakasiyana pamapeji ewebhu.
Rega & # 39; s Shanduko Tsvina pa Hover
Tichazotanga nokutarisa kuti tingashandura sei kugadzirwa kwechifananidzo apo mutengi ari kutengesa pamusoro pechinhu ichocho. Nokuda kwemuenzaniso uyu (HTML inoratidzwa pasi apa) Ndiri kushandisa mufananidzo uye chikwata cheklasi chekucheka.
Kuti zviite kuti zvivekwe, tinowedzera mitemo yemaitiro inoenderana neCSS yedu yekushongedza:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
kugadzikana: 0.25;
}
Aya maitiro ekugadzirisa anoshandura kusvika ku25%. Izvi zvinoreva kuti chifananidzo chicharatidzwa se 1/4 chekuonekwa kwayo pachena. Kunyanya opaque pasina kujekesa kwaizova 100% asi 0% yaizove yakakwana.
Zvadaro, kuitira kuti chifananidzo chiuye pachena (kana kuti zvakanyatsoenderana, kuti zvive zvakakwana) apo mutsara wacho wakanyanyisa pamusoro payo, unogona kuwedzera: hover pseudo-kirasi:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Iwe uchacherechedza kuti, kune mienzaniso iyi, ndiri kushandisa mutengesi prefixed shanduro dzomutongi kuti uone kushamwaridzana kumashure kwevashanduri vekare vevashandisi ivavo. Kunyange zvazvo ichi chiri chimiro chakanaka, chokwadi ndechokuti kutonga kwakanaka iko zvino kwakatsigirwa zvakanaka nevashandisi uye yakachengeteka kudonhedzera vatengesi vatengesi ve prefixed. Kunyange zvakadaro, hapanawo chikonzero chekusatora aya prefixes kana iwe uchida kuvimbisa kutsigirwa kwevashanduri vekare. Ingova nechokwadi chekutevera tsika yakanakisisa inogamuchirwa yekugumisa chiziviso nechinyakare, un-prefixed version yemutauro.
Kana iwe wakatumira izvi pane imwe nzvimbo, unozoona kuti kuchinja kwekugadzirisa uku ndiko kuchinja kusina kujeka. Chokutanga chave chine grey uye hachisi, uye hapana mamiriro mashoma pakati peaviri. Icho chakaita sechitsinhanho chechiedza - kana chichibva. Izvi zvingave ndizvo zvaunoda, asi iwe unogonawo kuedza kuedza kuchinja kunowedzera zvishoma.
Kuwedzera chimwe chinhu chakanaka uye kuita kuti izvi zvifambe zvishoma nezvishoma, unoda kuwedzera nzvimbo yekuchinja kune kirasi yeGreydout:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
kugadzikana: 0.25;
-webkit-shanduko: zvose 3s nyore;
-moz-shanduko: zvose 3s nyore;
-ms-shanduko: zvose zvitatu zviri nyore;
-o-shanduko: zvose 3s nyore;
shanduko: zvose zvitatu zviri nyore;
}
Neyo code, shanduko yaizochinja zvishoma nezvishoma pane kungochinja pakarepo.
Kamwe zvakare, tiri kushandisa nhamba yevatengesi vatengesa prefixed pano. Kuchinja hakusi kunotsigirwa sekunonoka, saka izvi zvinopedzisira zvine musoro.
Chinhu chimwe chekuyeuka paunenge uchironga kushamwaridzana uku ndechokuti kubata zvishandiso zvishandiso hazvina "hover" mamiriro ezvinhu, saka izvi zvinowanzosara pane chero munhu anoshandisa chipikicha chekuona sefoni. Kuchinja kwacho kunowanzoitika, asi kunoitika zvakakurumidza zvokuti havagone kuonekwa. Izvo zvakanaka kana iwe uri kuwedzera ichi sekanaka bhonasi chaiyo, asi dzivisa chero kuchinja kunofanirwa kuonekwa kuhutano kunzwisiswa.
Kuramba Kunoita Kunogona Kuita
Iwe haufaniri kutanga nemufananidzo wakazara, unogona kushandisa kushanduka uye kushanduka kupera kubva pamufananidzo wakakwana opaque. Kushandisa mufananidzo wakafanana, chete nekirasi yekudzivirira:
kirasi = "kusununguka">
Sezvakaita kare, iwe unoshandura kushandiswa kushandisa kushandisa: hover selector:
.withfadeout {
-webkit-shanduko: zvose 2s nyore-in-out;
-moz-shanduko: zvose 2s nyore-in-out;
-ms-shanduko: zvose 2s nyore-in-out;
-o-shanduko: zvose 2s nyore-in-out;
shanduko: zvose 2s nyore-in-out;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
kugadzikana: 0.25;
}
Mumuenzaniso uyu, chimiro chacho chaizotendeuka kubva pane zvakakwana opaque kuti zvinyatsojeka - kureva kwemuenzaniso wedu wokutanga.
Kuenda Kupfuura Mifananidzo
Zvakakosha kuti iwe unogona kushandisa zvishanduko izvi zvinooneka uye unowedzera kumifananidzo, asi iwe hausi kungoshandisa zvidhori nemigumisiro iyi yeCSS. Iwe unogona nyore nyore kugadzira CSS-styled zvimedu zvinopera kana zvichinyorwa uye zvakabatwa. Iwe unongotanga kuisa ruzivo uchishandisa:: kushingaira kwechikoro-chesi uye kuisa shanduko mukirasi iyo inotsanangura bhatani. Dzvanya uye bata iri bhatani kuti uone zvinoitika.
Zvinogoneka kuita chinhu chaicho chezvinhu zvinotarisa zvinopera kana zvichinyorwa pamusoro kana kuiswa pane. Mumuenzaniso uyu ndinoshandura kujeka kwechi uye ruvara rwemashoko apo mouse inopfuura iyo. Heino CSS:
#myDiv {
kureba: 280px;
background-color: # 557A47;
ruvara: #dfdfdf;
padding: 10px;
-webkit-shanduko: dzose 4s nyore-out 0s;
-moz-shanduko: zvose 4s -se-out 0s;
-ms-shanduko: dzose 4s nyore-out 0s;
-o-shanduko: zvose 4s -se-out 0s;
shanduko: zvose 4s-out 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
kugadzikana: 0.25;
muvara: # 000;
}
Navigation Menus Inogona Kubatsirwa neFading Background Colors
Munharaunda iyi yakanyatsofambisa pakashambadzira ruvara rwemucheto runopera zvishoma nezvishoma mukati nekunze seIndaneti pamusoro pemenyu yezvinhu. Heino ye HTML:
- Musha
- CSS3 Zvidzidzo
- CSS3 Properties
Uye heino CSS:
ul # sampleNav {list-style: none; }
ul # samplesNav li {
kuratidza: inline;
float: left;
padding: 5px 15px;
marginal: 0 5px;
-webkit-shanduko: zvose zvikamu zviviri;
-moz-shanduko: zvose 2s linear;
-muchidimbu-shanduko: zvose zvikamu zviviri;
-o-shanduko: dzose 2s linear;
shanduko: dzose 2s linear;
}
ul # samplesNav li {{text-decoration: none; }
ul # sampleNav li: hover {
mamiriro acho-ruvara: # DAF197;
}
Browser Support
Sezvo ndakabata pane zvishoma zvishoma, maitiro aya ane tsatsiro rakanaka chaizvo rekushandura, saka unofanirwa kunzwa wakasununguka kuzvishandisa usingatyi. Izvo chete kune iyi yakawanda yakawanda shanduro dzeInternet Explorer, asi nechisarudzo chaMicrosoft chazvino kuvhara rubatsiro rwevashanduri vese veIE pasi pe11, vashanduri vakwegura ava vari kudukusa-uye zvechokwadi, kana musikana mukuru ona kuchinja uku kwemafaro, iyo haifaniri kunge iri dambudziko guru. Chero bedzi iwe ukavhara marudzi aya emigumisiro kushamwaridzana kunonakidza uye usavimba navo kuti vateerere kushanda kana kuzarura zvinyorwa zvitsva, zvino vheduti vekare vasingatsigeri nemigumisiro vachawana ruzivo rwusingafadzi, asi vashandisi vevashandisi ivavo havangavi kuziva mutsauko, kunyanya kana vakashandisa shanduro sechinyakare uye kuwana ruzivo rwavanoda.
Zvimwe Kudhura; Shandura Zvifananidzo zviviri
Heano muenzaniso wekuti ungasvibira sei mufananidzo mumwe kune umwe. Shandisa HTML:
Uye iyo CSS iyo inoita kuti zvive zvakajeka zvakakwana apo imwe yacho yakanyatsogadzikana uye zvino shanduko inobvisa maviri acho:
.swapMe img {-webkit-shanduko: zvose 1sase-in-out; -moz-shanduko: zvose 1sase-in-out; -ms-shanduko: zvose 1s-in-out; -o-shanduko: zvose 1 nyore-in-out; shanduko: zvose 1 nyore-in-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }