Pagbalhin sa CSS3 Paghimo og Maayo nga mga Epekto sa Paglihok
Ang mga tigdisenyo sa Web dugay nang nagtinguha nga mas kontrolon ang mga panid nga ilang gimugna sa dihang ang CSS3 naigo sa talan-awon. Ang bag-ong mga estilo nga gipaila sa CSS3 naghatag sa mga propesyonal sa web nga abilidad sa pagdugang sa mga epekto sa Photoshop ngadto sa ilang mga panid. Kini naglakip sa mga propyedad sama sa mga landong sa pagbutang ug mga panagsama , mga nagkalayo nga mga kanto, ug daghan pa. Gipaila usab sa CSS3 ang mga epekto sa animation nga mahimong gamiton sa paghimo og maayong interactivity sa mga site.
Usa ka nindot kaayo nga visual effect nga mahimo nimong idugang sa mga elemento sa imong website gamit ang CSS3 mao ang paghimo kanila nga mag-uswag sa paggamit gamit ang kombinasyon sa mga kabtangan alang sa opacity ug transisyon. Kini usa ka sayon ug sustenido nga paagi sa paghimo sa imong mga panid nga labaw'g makalingaw pinaagi sa pagmugna og mga lungag nga mga dapit nga nag-focus sa diha nga ang usa ka bisita sa bisita adunay usa ka butang, sama sa paglupad sa ibabaw niana nga elemento.
Atong tan-awon kung unsa ka sayon kini mao ang pagdugang niini nga mga interacting visual effect sa nagkalain-laing mga elemento sa imong mga web pages ..
Tuguti ang Pagbag-o sa Pagbag-o sa Hover
Atong sugdan pinaagi sa pagtan-aw kon unsaon pag-usab ang opacity sa usa ka imahe sa diha nga ang usa ka customer nga naglihok ibabaw sa nga elemento. Kay kini nga pananglitan (ang HTML gipakita sa ubos) Naggamit ako og usa ka hulagway nga adunay hiyas sa klase sa greydout.
Aron mahimo kini nga greyed out, among idugang ang mosunod nga mga lagda sa istilo sa among CSS stylesheet:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Kini nga mga opacity setting mahubad ngadto sa 25%. Kini nagpasabot nga ang imahe ipakita ingon nga 1/4 sa iyang normal nga transparency. Ang bug-os nga opaque nga walay transparency nga mahimong 100% samtang 0% mahimong hingpit nga transparent.
Sunod, aron maplantad ang hulagway (o mas tukma, aron mahimong bug-os nga dili patas) sa dihang ang mouse anaa sa ibabaw niini, imong idugang ang: hover pseudo-klase:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Imong mamatikdan nga, alang niining mga pananglitan, akong gigamit ang prefix nga bersyon sa pagmando sa vendor aron maseguro ang atrasado nga pagkasibo sa mas karaan nga mga bersyon sa mga browser. Samtang kini usa ka maayo nga praktis, ang kamatuoran mao nga ang opacity nga pagmando karon gipaluyohan sa mga browsers ug kini luwas nga ibutang ang mga prefix nga linya sa vendor. Bisan pa, walay rason usab nga dili i-apil ang mga prefix kung buot nimo nga maseguro ang suporta alang sa mas daan nga mga bersyon sa browser. Siguruha nga sundon ang gidawat nga labing maayo nga praktis sa pagtapos sa deklarasyon uban sa normal, wala-prefix nga bersyon sa estilo.
Kon imong ipadala kini sa usa ka site, imong makita nga kini nga pagpasibo sa opacity usa ka kalit nga pagbag-o. Una kini nga abohon ug dayon dili, nga walay mga interim nga estado tali sa duha. Kini sama sa usa ka suga nga switch o padayon. Tingali kini ang imong gusto, apan gusto ka usab nga mag-eksperimento sa usa ka pagbag-o nga mas hinay-hinay.
Aron makadugang sa usa ka talagsaon nga epekto ug hinay-hinay nga nahimo kining paglurang, gusto nimong idugang ang kabtangan sa transisyon ngadto sa .greydout nga klase:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-transition: tanan 3s kasayon;
-moz-transition: tanan 3s kasayon;
-mga transisyon: ang tanan 3s kasayon;
-o-transition: tanan nga 3s kasayon;
transisyon: tanan nga 3s kasayon;
}
Uban niini nga kodigo, ang pagbag-o anam-anam nga pagbag-o kay sa paglipat lang dayon.
Sa makausa pa, kami naggamit sa usa ka ubay-ubay nga vendor prefix nga lagda dinhi. Ang transisyon wala usab gisuportahan ingon nga opacity, busa kini nga mga prefix masabtan.
Usa ka butang nga hinumdum samtang imong giplano ang mga pakigsinabtanay mao nga ang mga touch screen nga mga device wala'y "hover" nga estado, busa kini nga mga epekto sa kasagaran nawala sa bisan kinsa nga naggamit sa touch screen device sama sa usa ka mobile phone. Ang pagbag-o sagad mahitabo, apan kini dali nga mahitabo nga dili gayud sila makita. Maayo kana kon imong idugang kini ingon nga usa ka nindot nga bonus nga epekto, apan likayi ang bisan unsang mga kausaban nga gikinahanglan aron makita ang sulod nga masabtan.
Ang pagkawala sa posible mahimo usab
Dili kinahanglan nga magsugod ka uban sa usa ka kupas nga larawan, mahimo nimong gamiton ang mga pagbag-o ug mga opacity nga mawala gikan sa usa ka hingpit nga dili masabtan nga hulagway. Gigamit ang sama nga larawan, sa usa lamang ka klase nga wala'y mahimo:
class = "withfadeout">
Sama kaniadto, imong giusab ang opacity gamit ang: hover selector:
.withfadeout {
-webkit-transition: tanan nga 2s nga kasayon-sa-out;
-moz-transition: tanan nga 2s sa kasayon-sa-out;
-mga transisyon: tanan nga 2s sa kasayon-sa-out;
-o-transition: tanan nga 2s sa kasayon-sa-out;
pagbalhin: tanan nga 2s sa kasayon-sa-out;
}
.paglabay: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Niini nga pananglitan, ang hulagway maglisod gikan sa hingpit nga pagkalibut ngadto sa medyo transparent - ang kausaban sa atong unang panig-ingnan.
Nag-uswag sa Imahe
Kini maayo kaayo nga imong magamit ang mga pagbag-o nga mga kausaban ug mahanaw sa mga hulagway, apan dili ka limitado sa paggamit lamang sa mga hulagway nga adunay mga epekto sa CSS. Dali ka makahimo sa CSS-styled nga mga buton nga mag-anam kung gikuha ug gikuptan. Gipahimutang nimo ang opacity gamit ang: aktibo nga pseudo-klase ug gibutang ang transisyon sa klase nga naghubit sa buton. I-klik ug hupti kini nga buton aron makita kung unsay mahitabo.
Posible nga ang bisan unsa nga elemento sa panumduman mag-anam kung mahuman o mag-klik. Sa niini nga panig-ingnan akong giusab ang kahayag sa div ug ang kolor sa teksto sa diha nga ang mouse anaa sa ibabaw niini. Ania ang CSS:
#myDiv {
lapad: 280px;
background-color: # 557A47;
kolor: #dfdfdf;
padding: 10px;
-webkit-transition: tanan nga mga 4s kas-a sa mga 0s;
-moz-transition: tanan nga mga 4s kas-a sa mga 0s;
-mga transisyon: tanan nga 4s nga kasayon;
-o-transition: tanan nga 4s nga kasayon sa 0s;
transisyon: tanan nga 4s nga kasayon;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
kolor: # 000;
}
Ang Navigation Menus Makabenepisyo gikan sa nagkalayo nga mga Koloranan sa Background
Sa niining yano nga menu sa navigation ang lingin nga background nagdan-ag sa hinay-hinay sa sulod ug sa gawas sa akong mouse ibabaw sa mga butang sa menu. Ania ang HTML:
- Panimalay
- CSS3 Tutorials
- CSS3 Properties
Ug ania ang CSS:
ul # sampleNav {list-style: wala; }
ul # sampleNav li {
pagpasundayag: inline;
float: left;
padding: 5px 15px;
margin: 0 5px;
-webkit-transition: tanan nga 2s linear;
-moz-transition: ang tanan 2s linear;
-ms-transition: tanan nga 2s linear;
-o-transition: ang tanan 2s linear;
transisyon: ang tanan 2s linear;
}
ul # sampleNav li a {text-decoration: wala; }
ul # sampleNav li: hover {
background-color: # DAF197;
}
Suporta sa Browser
Ingon nga akong natandog sa pipila na ka higayon, kini nga mga estilo dunay maayo nga suporta sa browser, mao nga kinahanglan nimo nga magamit nga libre kini nga walay bisan unsang kahadlok. Ang bugtong eksepsiyon niini mao ang mas karaan nga bersyon sa Internet Explorer, apan sa bag-o nga desisyon sa Microsoft nga taposon ang suporta alang sa tanang bersyon sa IE ubos sa 11, kining mga daan nga mga browser nagkagamay ug dili kaayo usa ka isyu - ug realistically, kung ang usa ka daan nga browser dili tan-awa kini nga lakang sa paglabay, nga dili usa ka dakong problema. Hangtud nga makontrol nimo kini nga mga matang sa mga epekto ngadto sa makalingaw nga mga pakig-uban ug dili magsalig kanila sa pagpalihok o pagpadayag sa mahinungdanon nga sulod, ang mga daan nga mga browser nga wala mosuporta sa mga epekto makadawat og dili kaayo makalingaw nga kasinatian, apan ang mga tiggamit sa mga browser dili gani mahibal-an ang kalainan, ilabi na kung mahimo nila gamiton ang site ingon nga normal ug makuha ang kasayuran nga ilang gikinahanglan.
Dugang nga Kalingawan; Pagpangita og Duha ka mga Imahe
Ania ang usa ka panig-ingnan kon unsaon paglubad sa usa ka larawan ngadto sa lain. Gamita ang HTML:
Ug ang CSS nga naghimo sa usa ka bug-os nga transparent samtang ang usa usa ka bug-os nga opaque ug unya ang transisyon nagbutang sa duha:
.swapMe img {-webkit-transition: tanan nga 1s sa kasayon-sa-out; -moz-transition: tanan nga 1s sa kasayon-sa-out; -mga transisyon: ang tanan nga 1 sa kasayon-sa-out; -o-transition: tanan nga 1s sa kasayon-sa-out; pagbag-o: tanan nga 1 sa kasayon-sa-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; }