CSS3 Fivoaran-tarehy dia mamorona vokatra tsara
Ny mpamorona tranonkala dia naniry mafy ny hifehy ny pejin-dry zareo tamin'ny famoronana CSS3. Ny endri-tsoratra vaovao nampidirina tao amin'ny CSS3 dia nanome mpampiasa tranonkala ny fahafahana manampy ireo vokatra Photoshop tahaka ny pejy. Tafiditra ao anatin'izany ny fananana toy ny aloky ny alon-drano sy ny famirapiratana , ny boribory, ary ny maro hafa. Nampidirin'i CSS3 koa ny vokatry ny animation izay azo ampiasaina hamoronana fifampikasohana tsara eo amin'ny toerana.
Zava-mahatalanjona tena tsara iray azonao ampidirina amin'ny singa ao amin'ny tranonkalanao mampiasa CSS3 dia ny mamela azy ireo hivoaka sy hivoaka amin'ny fampifangaroana ny toetra ho an'ny tsy fahampiana sy ny fifindrana. Ity dia fomba tsotra sy tsara tohana mba ahafahanao miara-miditra kokoa ny pejinao amin'ny alàlan'ny famoronana faritra feno ratra izay mifantoka rehefa misy mpitsidika vohikala manao zavatra, toy ny manidintsidina an'io singa io.
Andeha hojerentsika ny fomba hanampiana io fiantraikan'ny maso amin'ny fifandraisana io amin'ireo singa samihafa ao amin'ny pejin'ny tranonkala.
Avelao hanova ny tsy fahampian-tsakafo amin'ny hover
Hanomboka amin'ny fijerena ny fomba hanovana ny endri-tsarin'ny sary rehefa miparitaka eo amin'ny singa iray ny mpanjifa. Ho an'ity ohatra ity (ny HTML dia aseho etsy ambany) dia mampiasa sary iray aho miaraka amin'ny toetra amam-panabeazana.
Mba hampitomboana azy io, dia ampianay ny fitsipika manaraka manaraka ny CSS-stylesheet:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Ireo setroka mivaivay nandika ny 25%. Midika izany fa ny sary dia aseho ho 1/4 amin'ny mangarahara ara-dalàna. Tsy mety amin'ny mangarahara tsy misy mangarahara dia mety ho 100% raha 0% kosa dia mangarahara tanteraka.
Avy eo, mba hahatonga ilay sary ho mazava (na marim-pototra kokoa, ho tonga lafatra tanteraka) rehefa miresaka momba azy ny toto, dia ampianaro ny: pseudo-class hover:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
Ho hitanao fa, noho ireo ohatra ireo dia ampiasaiko ny vendor-pirinty voalazan'ny fitsipika mba ahazoana antoka fa ny fifanarahana ho an'ny dikan-dikan-tranon'ireo browsers taloha. Na dia fomba fanao tsara aza izany, ny zava-misy dia ny fitsipiky ny tsy fanjarian-tsakafo amin'izao fotoana izao no tohanan'ny browsers ary tsara dia tsara ny mametraka ireo mpivarotra efa voafaritra. Na izany aza dia tsy misy antony tokony tsy hampidirina ireo prefixes ireo raha te-hiantohana ny dikan-teny maoderina taloha ianao. Araho tsara ny fanarahana ny fomba fanao tsara indrindra nanaovana ny fanambarana miaraka amin'ny dikan-tsoratra tsotra sy tsy voafaritra.
Raha nampiasa izany tao amin'ny tranokala iray ianao, dia ho hitanao fa fanitsiana tsy misy dikany io fanitsakitsaham-pahalavorary io. Voalohany dia mena izany ary tsy izany, tsy misy antotan-dàlana eo anelanelan'ireo roa ireo. Tahaka ny fiakaran'ny hafanana - na eo. Mety ho izany no tianao, fa mety te hanandrana ihany koa ianao amin'ny fanovana izay mihamitombo kokoa.
Mba hanampiana ny vokatra tena tsara sy hahatonga azy hiova tsikelikely, dia te hampiditra ny fananana tetezamita amin'ny kilasy "grenady" ianao:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-fifindrana: manalefaka ny 3 rehetra;
-moz-teteza: mora foana ny rehetra;
-misy fifindrana: manalefaka ny 3 rehetra;
-o-tetezamita: mora foana ny rehetra;
Tetezamita: mora foana ny rehetra;
}
Amin'ny alalan'ity kaody ity dia hiova tsikelikely ny fanovana, fa tsy hoe midina tampoka fotsiny.
Indray mandeha dia mampiasa fitsipika vitsivitsy voatokana etsy ambany isika eto. Ny tetezamita dia tsy voatery ho fanohanana toy ny tsy fahampian-tsakafo, noho izany dia misy dikany ireo prefixes.
Zavatra iray tokony hotsaroana rehefa manomana ireo fifandraisana ireo ianao fa tsy misy "hover" ny fitaovana fikirakirana ny ordinatera, noho izany, matetika dia very ireo olona ireo amin'ny fampiasana fitaovana mivezivezy toy ny finday. Matetika dia mitranga ny tetezamita, saingy mitranga haingana dia haingana izy ireo ka tsy ho hita. Tsara raha ampidirinao ho toy ny vokatra mahafinaritra mahavariana ity, fa aza manova izay fiovana ilaina mba hahitana ny votoaty azo takarina.
Ny fivilianana dia azo atao koa
Tsy voatery hanomboka amin'ny sary manjavozavo ianao, azonao ampiasaina ny fifindrana sy ny tsy fahampian-tsakafo mba hialana amin'ny sary manjavozavo tanteraka. Ampiasao ny sary iray mitovy ihany, miaraka amin'ny kilasy iray miaraka amin'ny finday ihany:
class = "withfadeout">
Toy ny taloha dia manova ny opacity amin'ny fampiasana ny: selector selector:
.withfadeout {
-webkit-fifindrana: ny 2s mora vidy;
-moz-teteza: ny 2s mora vidy;
-misy fifindrana: ny 2s rehetra miala amin'ny toaka;
-o-tetezamita: ny 2s mora vidy;
Tetezamita: 2s ny fahaleovan-tena rehetra;
}
.withfadeout: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
Amin'ity ohatra ity, ny sary dia hivezivezy tanteraka tsy misy hatak'andro amin'ny mangarahara tsotra - ny ampahany amin'ny ohatra voalohany.
Miala amin'ny sary
Mahafinaritra fa afaka mampihatra ireo fivoarana hita maso ianao ary manjavona sary, saingy tsy voafetra ny fampiasana sary miaraka amin'ireto CSS ireto. Azonao atao mora foana ny manamboatra CSS-styled bokotra izay mipoitra rehefa voahidy sy voatazona. Vao avy nametraka ny opacity ianao amin'ny fampiasana ny: pseudo-active ary mametraka ny fiovan'ny kilasy izay mamaritra ilay bokotra. Tsindrio ity ary tsindrio ity bokotra ity mba hahitana izay mitranga.
Azo atao ny mijery ny singa hita maso rehefa mipaoka na mikaroka. Amin'ity ohatra ity dia manova ny endriky ny div sy ny lokon'ny lahatsoratra raha eo ambonin'ilay totozy. Ity ny CSS:
#myDiv {
width: 280px;
background-color: # 557A47;
loko: #dfdfdf;
padding: 10px;
-webkit-transition: 0s alls 4s easy;
-moz-transition: 0s 4s easy outs;
- Ny fifindrana: ny 4s rehetra fanalefahana 0s;
-o-tetezamita: ny 4s solo-kely rehetra;
Tetezamita: 0s ny 4s fialan-tsasatra rehetra;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
loko: # 000;
}
Ny menokan'ny navigara dia mahazo tombony amin'ny fanimbana ny loko afara
Ao anatin'ity menio fanoratana tsotra ity dia mihalalina tsikelikely ny loko afara rehefa mijery ny singa ao amin'ny sakafo. Indro ny HTML:
- Home
- CSS3 Tutorials
- CSS3 Properties
Ary eto ny CSS:
ul # sampleNav {lis-style: tsy misy; }
ul # sampleNav li {
show: inline;
float: havia;
padding: 5px 15px;
margin: 0 5px;
-webkit-fifindrana: 2s linear rehetra;
-moz-transition: 2s linear rehetra;
-ms-transition: 2s linear rehetra;
-o-tetezamita: 2s linear rehetra;
fiovana: ny 2s linear rehetra;
}
ul # sampleNav li a {lahatsoratra-decoration: none; }
ul # sampleNav li: hover {
background-color: # DAF197;
}
Fanohanana Firefox
Raha efa nokasaina imbetsaka aho dia manana fanohanana tsara amin'ny tranokala ireo tranonkala ireo, noho izany dia tokony hahatsiaro maimaim-poana ny fampiasana azy ireo ianao raha tsy misy fitsangatsanganana. Ny hany afa-tsy amin'izany dia dikan-teny maherin'ny tranonkala Internet Explorer, saingy miaraka amin'ny fanapahan-kevitr'i Microsoft vao haingana hamarana ny fanohanan'ny dikan-teny rehetra ao amin'ny IE eo ambany 11, ireo zokiolona ireo dia nanjary latsaky ny olana iray - ary raha ny marina, jereo ity fifindra-monina ity, izay tsy tokony ho olana lehibe. Raha mbola mamaritra ireo karazana vokatra ireo ho fifandraisana mahafinaritra ianao ary tsy miankina amin'izy ireo amin'ny fampandehanana ny asa aman-draharaham-peo na fanehoana ny votoatiny fototra, ireo mpiblaogy zokiny izay tsy manohana ny vokatra dia hahazo traikefa tsy dia mahafa-po, fa ireo mpampiasa ao amin'ireo navigateur tsy mety Fantaro ny fahasamihafana, indrindra raha afaka mampiasa ilay tranokala ho ara-dalàna izy ireo ary mahazo ny vaovao ilainy.
Fahafatesana fanampiny; Swap roa sary
Ity misy ohatra iray amin'ny fomba hamafana endrika iray amin'ny iray hafa. Ampiasao ny HTML:
Ary ny CSS izay mampivelatra tanteraka tanteraka ny iray ary ny iray hafa dia manjavona tanteraka ary avy eo dia mivadika ho roa ny tetezamita:
.swapMe img {-webkit-transition: all 1s easy-in-out; -moz-tetezamita: 1s easy-in-out; - Ny fifindrana: ny 1s mora vidy; -o-tetezamita: 1s easy-in-out rehetra; Ny fifindrana: ny 1s dia mora foana; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }