CSS3 Canje-canje Samar da Fure Effects
Masu zane-zane na yanar gizo sun bukaci karin kulawa a kan shafukan da suka kirkiro lokacin da CSS3 suka shiga wurin. Sabbin hanyoyi da aka gabatar a CSS3 sun ba masu kwararru na yanar gizo damar da za su iya inganta abubuwan da suka shafi Photoshop zuwa shafukan su. Wannan ya hada da kaddarorin kamar inuwa mai haske da kuma haskakawa , sasanninta, da sauransu. CSS3 kuma ya gabatar da irin abubuwan da suka shafi irin abubuwan da ke faruwa kamar yadda ake amfani da ita don yin tasiri a kan shafuka.
Wani sakamako mai kyau na gani wanda za ka iya ƙarawa zuwa abubuwa a cikin shafin yanar gizonka ta amfani da CSS3 shine sa su suyi ciki da waje ta amfani da haɗin dukiya don opacity da miƙa mulki. Wannan hanya ce mai sauƙi da kuma goyan baya don inganta shafukan yanar gizonku ta hanyar ƙirƙirar yankunan da ba su da ƙwarewa da suka shiga cikin sa ido lokacin da mai baƙo na yanar gizo ya yi wani abu, kamar yadda yake aukuwa akan wannan ɓangaren.
Bari mu dubi yadda sauƙi ne don ƙara wannan hulɗar tasirin gani ga abubuwa daban-daban a shafukan yanar gizonku.
Ka Sauya Opacity a kan Gwangwani
Za mu fara ne ta hanyar kallo yadda za a canza opacity na hoton lokacin da abokin ciniki yake tafiya akan wannan kashi. Don wannan misali (ana nuna HTML a ƙasa) Ina amfani da hoto tare da sifa na greydout.
Don sanya shi farin ciki, mun ƙara dokokin da aka biyo baya zuwa ga CSS stylesheet:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Wadannan saitunan opacity suna fassara zuwa 25%. Wannan yana nufin cewa za a nuna hoton a matsayin 1/4 na gaskiya. Cikakken kullun ba tare da nuna gaskiya ba zai zama 100% yayin da 0% zai kasance cikakke.
Bayan haka, don ganin hoton ya bayyana (ko fiye da haka, ya zama cikakke) lokacin da aka rufe linzamin kwamfuta a kan shi, za ku ƙara da cewa:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Za ka lura cewa, ga waɗannan misalai, Ina amfani da sigogin sifofin da aka riga aka tsara don tabbatar da daidaiton baya ga tsofaffi na masu bincike. Duk da yake wannan kyakkyawan aiki ne, gaskiyar ita ce, sararin samaniya na tallafawa yanzu yana goyon bayan masu bincike kuma yana da kariya sosai don sauke wadanda aka sayar da su. Duk da haka, babu wani dalili ba tare da haɗa waɗannan shafuka ba idan kana son tabbatar da goyan baya ga sassan binciken tsofaffi. Tabbatacce ne kawai ku bi hanyar da aka yarda da ita don kawo ƙarshen sanarwar tare da fasali, wanda ba a taɓa sa shi ba.
Idan ka tura wannan a kan wani shafin, za ka ga cewa wannan gyaran opacity wani canji ne mai saurin gaske. Na farko shi ne launin toka kuma ba haka ba, ba tare da jihohin lokaci ba tsakanin waɗannan biyu. Yana kama da sauya mai haske - a kunne ko a kashe. Wannan yana iya zama abin da kake so, amma zaka iya so suyi gwaji tare da canjin da ya fi sauƙi.
Don ƙara wani sakamako mai kyau da kuma yin wannan ƙananan matakan, kuna so ku ƙara kayan haɓaka zuwa ga ƙungiyar .greydout:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-miƙa mulki: dukan 3s sauƙi;
-moz-transition: dukkan 3s sauƙi;
-ms-miƙa mulki: dukkan 3s sauƙi;
-o-miƙa mulki: duk 3s sauƙi;
Tsarin mulki: dukkan 3s sauƙi;
}
Tare da wannan lambar, sauyawa zai sauya hankali fiye da kawai sauyawa ba da gangan ba.
Bugu da ƙari, muna amfani da wasu masu sayarwa da aka riga aka tsara a nan. Ba a tallafawa juyin juya halin ba kamar yadda opacity, don haka waɗannan prefixes suna da hankali.
Abu daya da za a tuna yayin da kake shirya waɗannan haɗin kai shine cewa kayan na'urorin allon garkuwa ba su da wata hanyar "hover", saboda haka waɗannan abubuwa sukan rasa kan kowa ta amfani da na'urar allon touch kamar na'urar hannu. Tsarin mulki zai faru sau da yawa, amma ya faru da sauri cewa ba za a iya gani ba. Wannan yana da kyau idan kun ƙara wannan a matsayin sakamako mai kyau, amma ku guji duk wani canje-canje da ake bukata don ganin an fahimci abubuwa.
Fading Out ne Mai yiwuwa Too
Ba dole ba ne ka fara da hoton da ba ya da kyau, za ka iya amfani da fassarori da kuma opacity don fadewa daga siffar cikakken bayani. Yin amfani da wannan hoton, kawai tare da nau'i na kayan aiki:
class = "withfadeout">
Kamar dai dā, za ku canza opacity ta hanyar amfani da: zaɓin sakonni:
.withfadeout {
-wallafin-intanet: duk 2s sauƙi-in-out;
-moz-transition: duk 2s sauƙi-in-out;
-ms-miƙa mulki: duk 2s sauƙi-in-out;
-o-miƙa mulki: duk 2s sauƙi-in-out;
Tsarin mulki: duk 2s sauƙi-in-out;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
A cikin wannan misali, hotunan zai canja daga cikakken sassauci zuwa wani abu mai sauƙi - a baya na misalin farko.
Going Beyond Images
Yana da kyau kwarai cewa za ku iya amfani da waɗannan hanyoyi na gani da kuma faduwa zuwa hotuna, amma ba'a iyakance ku ba kawai don yin amfani da hotuna tare da waɗannan abubuwan CSS. Kuna iya yin maɓalli CSS-styled wanda ya fadi lokacin da aka danna kuma aka gudanar. Za ku kawai saita opacity ta hanyar amfani da: jakar aiki mai rikitarwa kuma sanya matsakaici a kan aji wanda ya bayyana maɓallin. Latsa ka riƙe wannan maɓallin don ganin abin da ya faru.
Yana yiwuwa a yi ainihin duk wani ɓangaren gani na fade lokacin da aka rufe ko danna. A cikin wannan misali na canza canji na launi da launi na rubutun lokacin da linzamin kwamfuta yake kan shi. Ga CSS:
#myDiv {
nisa: 280px;
launin launi: # 557A47;
launi: #dfdfdf;
Dama: 10px;
-dabar-sauke-sauke: duk 4s sauƙi-fita 0s;
-moz-transition: duk 4s sauƙi-out 0s;
-ms-miƙa mulki: duk 4s sauƙi-fita 0s;
-o-miƙa mulki: duk 4s sauƙi-fita 0s;
Tsarin mulki: duk 4s sauƙi-fita 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
launi: # 000;
}
Maɓallin Intanit Za a iya Amfani daga Launin Fading Background Launuka
A cikin wannan maɓallin menu mai sauƙi launi na baya ya ɓacewa a hankali kuma ya fita yayin da nake linzamin kayan aiki. A nan ne HTML:
- Home
- CSS3 Tutorials
- CSS3 Properties
Kuma a nan ne CSS:
ul # sampleNav {jerin-jerin: babu; }
ul # saminNav li {
Nuna: madogara;
taso kan ruwa: hagu;
Kusawa: 5px 15px;
gefe: 0 5px;
-wallafin-intanet: dukkanin layi 2s;
-moz-matsakaici: dukkanin layi 2s;
-ms-miƙa mulki: duk 2s linear;
-o-miƙa mulki: dukkanin layi 2s;
Tsarin mulki: dukkanin layi 2s;
}
ul # sampleNav a {rubutu-kayan ado: babu; }
ul # saminNav li: hover {
launin launi: # DAF197;
}
Taimako na Bincike
Kamar yadda na taɓa kan wasu 'yan lokutan, waɗannan nau'o'in suna da tallafi mai kyau, don haka ya kamata ku ji kyauta don kuyi amfani da su ba tare da jin tsoro ba. Abinda kawai ya saba da wannan shine tsofaffi iri na Internet Explorer, amma tare da shawarar da Microsoft ya yanke na kwanan nan don ƙare goyan baya ga dukan sassan IE a ƙasa da 11, waɗannan masu bincike masu tsofaffi sun zama ƙasa da kasa da batun - da kuma ainihin, idan tsohuwar mai bincike ba ta duba wannan rikice-rikice, wanda bai zama babban matsala ba. Duk lokacin da ka kare waɗannan nau'o'in don yin hulɗa da kyau kuma kada ka dogara garesu don fitar da aiki ko bayyana abinda ke ciki, to, masu bincike masu tsofaffi waɗanda ba su goyi bayan sakamakon ba zasu sami kwarewa mai sauki, amma masu amfani a kan waɗannan masu bincike basu ma san bambanci, musamman ma idan suna iya amfani da shafin kamar al'ada kuma suna samun bayanin da suke bukata.
Ƙara Ƙari; Swap Biyu Images
Ga misali na yadda za a zubar da hoto guda cikin wani. Yi amfani da HTML:
Kuma CSS wanda ke sa mutum ya kasance cikakke yayin da sauran ke da cikakkiyar matsayi kuma sai sauyi ya swaps biyu:
.swapMe img {-webkit-transition: duk 1s sauƙi-in-out; -moz-transition: duk 1s sauƙi-in-out; -ms-miƙa mulki: duk 1s sauƙi-in-out; -o-miƙa mulki: duk 1s sauƙi-in-out; Tsarin mulki: duk 1s sauƙi-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; }