Mga Paglilista ng CSS3 Gumawa ng Nice Fade Effect
Mahabang naisin ng mga taga-disenyo ng Web na mas kontrol ang mga pahinang nililikha nila kapag na-hit ng CSS3 ang eksena. Ang mga bagong estilo na ipinakilala sa CSS3 ay nagbigay sa mga propesyonal sa web ng kakayahang magdagdag ng mga epekto ng Photoshop sa kanilang mga pahina. Kasama dito ang mga pag-aari tulad ng drop shadows at glows , bilugan na sulok, at higit pa. Ipinakilala din ng CSS3 ang mga epekto ng animation na maaaring magamit upang lumikha ng magandang interactivity sa mga site.
Isang napakagandang epekto sa visual na maaari mong idagdag sa mga elemento sa iyong website gamit ang CSS3 ay upang mapukaw ang mga ito sa loob at labas gamit ang isang kumbinasyon ng mga katangian para sa opacity at paglipat. Ito ay isang madaling at mahusay na suportadong paraan upang gawing mas interactive ang iyong mga pahina sa pamamagitan ng paglikha ng kupas na mga lugar na dumating sa focus kapag ang isang site ng bisita ay isang bagay, tulad ng pag-hovering sa sangkap na iyon.
Tingnan natin kung gaano kadali idagdag ang nakikitang visual na epekto sa iba't ibang elemento sa iyong mga web page ..
Hayaan ang Baguhin ang Opacity sa Hover
Magsisimula kami sa pamamagitan ng pagtingin sa kung paano baguhin ang opacity ng isang imahe kapag ang isang customer ay pagpasada sa sangkap na iyon. Para sa halimbawang ito (ang HTML ay ipinapakita sa ibaba) Gumagamit ako ng isang imahe na may uri ng katangian ng greydout.
Upang gawing greyed out, idaragdag namin ang sumusunod na mga panuntunan sa estilo sa aming CSS stylesheet:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Ang mga setting ng opacity ay isinasalin sa 25%. Ang ibig sabihin nito ay ipapakita ang imahe bilang 1/4 ng normal na transparency nito. Ang ganap na maliwanag na walang transparency ay magiging 100% habang 0% ay magiging ganap na transparent.
Susunod, upang gawing malinaw ang (o mas tumpak na larawan) upang maging ganap na maliwanag ang imahe kapag ang mouse ay napapalipas nito, idaragdag mo ang: hover pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Mapapansin mo na, para sa mga halimbawang ito, ginagamit ko ang prefix na mga bersyon ng tuntunin ng patakaran upang matiyak ang pabalik na pagkakatugma para sa mas lumang mga bersyon ng mga browser na iyon. Habang ito ay isang mahusay na kasanayan, ang katotohanan ay na ang opacity tuntunin ay ngayon suportado ng mabuti ng mga browser at ito ay medyo ligtas na drop ang mga vendor prefixed linya. Gayunpaman, wala ring dahilan upang hindi isama ang mga prefix na ito kung nais mong tiyakin ang suporta para sa mas lumang mga bersyon ng browser. Tiyaking sundin ang natanggap na pinakamahusay na kasanayan sa pagtatapos ng deklarasyon sa normal, un-prefix na bersyon ng estilo.
Kung inilagay mo ito sa isang site, makikita mo na ang pagsasaayos ng opacity ay isang biglang pagbabago. Una ito ay kulay-abo at pagkatapos ay hindi ito, na walang pansamantalang estado sa pagitan ng dalawang iyon. Ito ay tulad ng isang ilaw switch - on o off. Ito ay maaaring kung ano ang gusto mo, ngunit maaari mo ring nais na mag-eksperimento sa isang pagbabago na mas unti-unti.
Upang magdagdag ng isang magandang epekto at unti-unti itong lumabo, gusto mong idagdag ang pag-aari ng paglipat sa .greydout na klase:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-transition: lahat ng 3s kadalian;
-moz-transition: lahat ng 3s kadalian;
-mga paglipat: lahat ng 3s kadalian;
-o-transition: lahat ng 3s kadalian;
paglipat: lahat ng 3s kadalian;
}
Sa pamamagitan ng code na ito, ang pagbabago ay unti-unting lumipat sa halip na paglipat ng bigla.
Muli, ginagamit namin ang isang bilang ng mga prefix na tuntunin ng vendor dito. Hindi rin sinusuportahan ang transisyon bilang opacity, kaya ang mga prefix na ito ay may kabuluhan.
Ang isang bagay na dapat tandaan habang pinaplano mo ang mga pakikipag-ugnayan na ito ay ang mga aparatong touch screen ay walang "hover" na estado, kaya ang mga epekto ay madalas na nawala sa sinuman gamit ang isang aparatong touch screen tulad ng isang mobile phone. Ang paglipat ay kadalasang nangyayari, ngunit ito ay mabilis na nangyayari na talagang hindi nila makikita. Iyon ay pagmultahin kung idinagdag mo ito bilang isang magandang bonus effect, ngunit maiwasan ang anumang mga pagbabago na kailangan upang makita para sa nilalaman na maunawaan.
Ang pagkawala ng Out ay Posibleng Masyadong
Hindi mo na kailangang magsimula sa isang kupas na imahe, maaari mong gamitin ang mga transition at opacity upang maglaho mula sa isang ganap na hindi maliwanag na imahe. Gamit ang parehong imahe, lamang sa isang klase ng withfadeout:
class = "withfadeout">
Tulad ng dati, binago mo ang opacity gamit ang: hover selector:
.withfadeout {
-webkit-transition: lahat ng 2s kadalian-in-out;
-moz-transition: lahat ng 2s luwag-in-out;
-mga paglipat: lahat ng 2s kadalian-in-out;
-o-transition: lahat ng 2s luwag-in-out;
paglipat: lahat ng 2s kadalian-in-out;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Sa halimbawang ito, ang imahe ay lumipat mula sa ganap na maliwanag sa medyo transparent - ang kabaligtaran ng aming unang halimbawa.
Pupunta na Higit Pa sa Mga Larawan
Mahusay na magagamit mo ang mga visual na transition na ito at lumalabag sa mga imahe, ngunit hindi ka limitado sa paggamit lamang ng mga larawan gamit ang mga epekto ng CSS na ito. Maaari mong madaling gumawa ng CSS-styled na mga pindutan na kumupas kapag nag-click at gaganapin. Gusto mo lamang itakda ang opacity gamit ang: aktibong pseudo-class at ilagay ang paglipat sa klase na tumutukoy sa pindutan. I-click at idiin ang button na ito upang makita kung ano ang mangyayari.
Posible upang gumawa ng mahalagang anumang visual na element fade kapag hovered sa ibabaw o na-click sa. Sa halimbawang ito binago ko ang opacity ng div at ang kulay ng teksto kapag ang mouse ay higit sa ito. Narito ang CSS:
#myDiv {
lapad: 280px;
background-color: # 557A47;
kulay: #dfdfdf;
padding: 10px;
-webkit-transition: lahat ng 4s ay madaling maipakita sa 0s;
-moz-transition: lahat ng 4s ay madali sa 0s;
-mga paglipat: lahat ng 4s ay madaling maipakita sa 0s;
-o-transition: lahat ng 4s madali-out 0s;
Paglipat: lahat ng 4s ay madaling mabawasan;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
kulay: # 000;
}
Mga Menu ng Nabigasyon Maaaring Makinabang mula sa Mga Kulay ng Pagkukulang sa Background
Sa simpleng menu ng nabigasyon ang kulay ng background ay unti-unti nang lumalabas habang pinupunta ko ang mga item sa menu. Narito ang HTML:
- Bahay
- Mga Tutorial sa CSS3
- Mga Katangian ng CSS3
At narito ang CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
display: inline;
lumutang pakaliwa;
padding: 5px 15px;
margin: 0 5px;
-webkit-transition: lahat ng 2s linear;
-moz-transition: lahat ng 2s linear;
-ms-transition: lahat ng 2s linear;
-o-transition: lahat ng 2s linear;
paglipat: lahat ng 2s linear;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: hover {
background-color: # DAF197;
}
Suporta sa Browser
Tulad ng aking hinipo sa ilang beses na, ang mga estilo na ito ay may napakagaling na suporta sa browser, kaya dapat mong huwag mag-atubiling gamitin ang mga ito nang walang anumang pangamba. Ang tanging pagbubukod dito ay mas lumang mga bersyon ng Internet Explorer, ngunit sa kamakailang desisyon ng Microsoft upang wakasan ang suporta para sa lahat ng mga bersyon ng IE sa ibaba 11, ang mga mas lumang browser na ito ay nagiging mas kaunti at mas mababa sa isang isyu - at realistically, kung ang isang mas lumang browser ay hindi tingnan ang lumilipas na paglipat na ito, na hindi dapat maging isang pangunahing problema. Hangga't tinatantya mo ang mga ganitong uri ng mga epekto sa mga kasiya-siyang pakikipag-ugnayan at hindi umaasa sa mga ito upang magmaneho ng pag-andar o magbunyag ng pangunahing nilalaman, pagkatapos ay ang mas lumang mga browser na hindi sumusuporta sa mga epekto ay makakakuha ng mas kaaya-ayang karanasan, ngunit ang mga gumagamit sa mga browser ay hindi kahit na alamin ang pagkakaiba, lalo na kung maaari nilang gamitin ang site bilang normal at makuha ang impormasyon na kailangan nila.
Dagdag na Kasayahan; Pagpalitin ang Dalawang Mga Larawan
Narito ang isang halimbawa kung paano lilipas ang isang imahe sa isa pa. Gamitin ang HTML:
At ang CSS na gumagawa ng isang ganap na transparent habang ang isa ay ganap na hindi kanais-nais at pagkatapos ay ang paglipat ng swap sa dalawa:
.swapMe img {-webkit-transition: lahat ng 1s madaling-in-out; -moz-transition: lahat ng 1s madaling-in-out; -mga paglipat: lahat ng 1s madaling-in-out; -o-transition: lahat ng 1s madaling-in-out; paglipat: lahat ng 1s madaling-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; }