Eadar-ghluasadan CSS3 Cruthaich Brathan mì-laghail
Bha dealbhadairean lìn air a bhith ag iarraidh barrachd smachd air na duilleagan a bha iad a 'cruthachadh nuair a bhuail CSS3 an sealladh. Thug na stoidhlichean ùra a thugadh a-steach ann an CSS3 comas do luchd-proifeiseanta lìn a bhith a 'cur buaidh coltach ri Photoshop air na duilleagan aca. Bha seo a 'gabhail a-steach thoglaichean mar shadows drop agus cluaintean , oiseanan cruinn, agus barrachd. Thug CSS3 buaidh coltach ri beothalachd cuideachd a dh'fhaodar a chleachdadh gus eadar-ghnìomhachd snog a dhèanamh air làraichean.
Aon bhuaidh lèirsinneach grinn a dh'fhaodas tu a chur ris na h-eileamaidean anns an làrach-lìn agad le bhith a 'cleachdadh CSS3 gus an toirt air falbh a-mach is a-muigh le bhith a' cleachdadh measgachadh de na togalaichean airson neo - dhlùth agus gluasad. Is e dòigh furasta is thaiceil a tha seo gus do dhuilleagan a dhèanamh nas eadar-ghnìomhach le bhith a 'cruthachadh sgìrean fad-ùine a thig gu fòcas nuair a nì neach-tadhail làrach rudeigin, mar a bhith a' gluasad tron eileamaid sin.
Thoir sùil air cho furasta is a tha e gus an sealladh lèirsinneach eadar-obrachail seo a chur ri diofar eileamaidean air na duilleagan lìn agad ..
Atharraich an t-eadar-dhealachadh a dh 'fhaodadh a bhith air a' chladhach
Tòisichidh sinn le bhith a 'coimhead air mar a dh'atharraicheas tu dè cho domhainn' sa tha ìomhaigh nuair a tha neach-ceannach a 'cromadh thairis air an eileamaid sin. Airson an eisimpleir seo (tha an HTML air a shealltainn gu h-ìosal) Tha mi a 'cleachdadh ìomhaigh leis a' ghnè clas de greydout.
Gus am bi e glasach a-mach, cuiridh sinn na riaghailtean stoidhle a leanas ris an stoidhle CSS againn:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
dìomhaireachd: 0.25;
}
Tha na suidheachaidhean dìomhaireachd sin a 'eadar-theangachadh gu 25%. Tha seo a 'ciallachadh gum bi an ìomhaigh air a shealltainn mar 1/4 de na follaiseachd àbhaisteach aice. Bhiodh e gu math teann nach biodh follaiseachd sam bith 100% agus bhiodh 0% gu tur follaiseach.
An ath rud, gus am bi an ìomhaigh a 'tighinn gu soilleir (no nas mionaidiche, gus a bhith gu tur tearc) nuair a thèid an luchag thairis air, cuiridh tu an t-ainm: seòmar fiadhaich:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
dìomhaireachd: 1;
}
Bheir tu fa-near, airson na h-eisimpleirean sin, tha mi a 'cleachdadh nan tionndaidhean air an ro-mheasadh air an reiceadair air an riaghailt gus dèanamh cinnteach à co-fhreagarrachd air ais airson tionndaidhean nas sine de na brabhsairean sin. Ged a tha seo na dheagh chleachdadh, is e an fhìrinn gu bheil an riaghaltas dìomhaireachd a-nis a 'faighinn deagh thaic bho bhrabhsairean agus gu bheil e gu math sàbhailte na loidhnichean preasantaiche sin a thoirt seachad. Fhathast, chan eil adhbhar ann airson na ro-leasachain sin a ghabhail a-steach ma tha thu airson dèanamh cinnteach gu bheil taic ann airson tionndaidhean nas sine. Feuch gun dèan thu cinnteach gun lean thu na cleachdaidhean as fheàrr a th 'ann gus crìoch a chur air an dearbhadh leis an dreach àbhaisteach, neo-mheasgaichte den stoidhle.
Ma chleachdas tu seo air làrach, chì thu gu bheil an atharrachadh dìomhaireachd seo gu math bochd. An toiseach tha e glas agus an uairsin chan eil sin, gun stàitean eadar-amail eadar an dithis sin. Tha e coltach ri atharrachadh aotrom - air no dheth. Dh'fhaodadh gur e seo na tha thu ag iarraidh, ach is dòcha gum bi thu airson feuchainn ri atharrachadh a tha nas mean air mhean.
Gus buaidh fìor mhath a chur ris agus dèan seo casg mean air mhean, tha thu airson an t-eadar-ghluasad a chur ris a 'chlas .greydout:
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
dìomhaireachd: 0.25;
-webkit-transition: fad 3s furasta;
-moz-transition: fad 3s ease;
-ms-transition: fad 3s furasta;
-o-ghluasad: a h-uile 3 sgìth;
gluasaid: a h-uile trì lag;
}
Leis a 'chòd seo, bhiodh an t-atharrachadh ag atharrachadh mean air mhean seach a bhith a' gluasad gu sgiobalta.
A-rithist, tha sinn a 'cleachdadh riaghailtean de luchd-reic an-seo. Chan eil eadar-ghluasad cho taiceil cho dona, agus mar sin tha na ro-leasachain sin a 'dèanamh ciall.
Aon rud ri chuimhneachadh nuair a tha thu a 'planadh na h-eadar-obrachaidhean sin, chan eil stàit "cromag" aig innealan sgàilean-làimhe, agus mar sin bidh na buaidhean sin gu tric air an call air duine sam bith a' cleachdadh inneal sgrion-touch mar fòn-làimhe. Bidh an gluasad gu math tric a 'tachairt, ach bidh e cho luath agus nach fhaicear iad. Tha sin ceart ma tha thu a 'cur seo a-steach mar èifeachd bòidheach, ach ma thèid atharrachaidhean sam bith a dh'fheumas tu fhaicinn airson susbaint a thuigsinn a sheachnadh.
Tha e comasach do roghainnean atharrachadh aig àm sam bith
Chan fheum thu tòiseachadh le ìomhaigh fad-ùine, faodaidh tu eadar-ghluasadan agus mì-chinnt a chleachdadh airson a bhith a 'sgoltadh a-mach à ìomhaigh gu math tearc. A 'cleachdadh an aon ìomhaigh, a-mhàin le clas de dh' easbhaidh:
class = "withfadeout">
Dìreach dìreach mar a bha e roimhe, bidh thu ag atharrachadh an dìomhaireachd le bhith a 'cleachdadh an: selector hover:
. gun teagamh {
-webkit-transition: a h-uile 2 nas fhasa a-mach;
-moz-transition: a h-uile 2 a tha nas fhasa a-mach;
-ms-transition: a h-uile 2 a tha nas fhasa a-mach;
-o-transition: a h-uile 2 a tha nas fhasa a-mach;
ghluasad: a h-uile 2 a tha nas fhasa a-mach;
}
. gun teagamh: thoir air {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
dìomhaireachd: 0.25;
}
San eisimpleir seo, bhiodh an ìomhaigh a 'gluasad bho bhith gu math tearc gu beagan follaiseach - cùl ar ciad eisimpleir.
A 'Dol thairis air Dealbhan
Tha e sàr-mhath gun urrainn dhut na h-eadar-theangachaidhean lèirsinneach seo a chur gu ìomhaighean, ach chan eil thu cuingealaichte gu dìreach a bhith a 'cleachdadh ìomhaighean leis na buaidhean CSS seo. Faodaidh tu putanan smuaintean CSS a dhèanamh a tha a 'dol à bith nuair a thèid an cliogadh agus a chumail. Dhèanadh tu dìreach an dìomhaireachd le bhith a 'cleachdadh: clas fiadhaich gnìomhach agus cuir an eadar-ghluasad air a' chlas a tha a 'mìneachadh a' phutan. Cliog agus gleidh am putan seo gus faicinn dè thachras.
Tha e comasach dèanamh cinnteach gum bi eileamaid lèirsinneach sam bith a 'cromadh nuair a thèid a tharraing thairis air no briogadh air. Anns an eisimpleir seo tha mi ag atharrachadh cho dona 'sa tha an div agus dath an teacsa nuair a tha an luchag os a chionn. Seo an CSS:
#myDiv {
leud: 280px;
cùl-dath: # 557A47;
dath: #dfdfdf;
gleabadh: 10px;
-webkit-transition: a h-uile 4s eas-falbh 0s;
-moz-transition: all 4s ease-out 0s;
-ms-transition: a h-uile 4s eas-falbh 0s;
-o-transition: a h-uile 4s eas-falbh 0s;
gluasaid: a h-uile 4s nas fhasa a-mach 0s;
}
#myDiv: hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
dìomhaireachd: 0.25;
dath: # 000;
}
Faodaidh clàran-làimhe seòladh buannachdan fhaighinn bho dathan cùl-raoin
Anns a 'chlàr-taice sìmplidh seo tha dath an cùl-raoin a' sìneadh gu mall agus a-mach fhad 'sa tha mi a' luch thairis air na h-irisean. Seo an HTML:
- Dachaigh
- Clasaichean teagaisg CSS3
- Airíonna CSS3
Agus an seo tha an CSS:
ul # sampleNav {liosta-stoidhle: none; }
ul # sampleNav li {
taisbeanadh: in-loidhne;
flùraichean: clì;
gleabadh: 5px 15px;
iomall: 0 5px;
-webkit-transition: a h-uile 2 loidhne;
-moz-transition: a h-uile 2 loidhne;
-ms-transition: loidhne 2 air fad;
-o-transition: loidhne 2 air fad;
gluasaid: loidhne 2 gu lèir;
}
ul # sampleNav li {text-decoration: none; }
ul # sampleNav li: hover {
cùl-dath: # DAF197;
}
Taic Browsair
Seach gu bheil mi air beagan rudan a chur an sàs mu thràth, tha taic fìor mhath aig na stoidhlichean sin, agus mar sin bu chòir dhut a bhith saor an-asgaidh gan cleachdadh gun dragh sam bith. Is e an aon eisdeachd a tha ann an seo mòran de na seann tionndaidhean de Internet Explorer, ach leis a 'cho-dhùnadh mu dheireadh aig Microsoft crìoch a chur air taic airson gach tionndadh de IE gu h-ìosal 11, tha na brabhsairean as sine sin a' fàs nas lugha agus nas lugha de chùis - agus ann an da-rìribh mura h-eil brabhsair nas sine faic an t-eadar-dhealachadh sgìth seo, cha bu chòir a bhith na dhuilgheadas mòr. Cho fad 's a bhios tu a' cur an cèill nan diofar rudan sin gu eadar-obrachail tlachdmhor agus nach bi iad an urra riutha gus dràibheadh a dhìon no a bhith a 'nochdadh prìomh shusbaint, chan fhaigh bhrobhsairean nas sine nach eil a' toirt taic dha na buaidhean eòlas nach eil cho tlachdmhor, ach cha bhi luchd-cleachdaidh air na brabhsairean sin fiù fios a bhith aca air an eadar-dhealachadh, gu h-àraid ma tha iad comasach air an làrach a chleachdadh mar as àbhaist agus am fiosrachadh a tha a dhìth orra fhaighinn.
Spòrs a bharrachd; còmhdach dà ìomhaigh
Seo eisimpleir de mar a dh 'fhàg e aon ìomhaigh ann an tè eile. Cleachd an HTML:
Agus an CSS a tha a 'dèanamh aon làn-fhollaiseach fhad's a tha an còrr gu math tearc agus an uairsin bidh an eadar-ghluasad a' dol an dà chuid:
.swapMe img {-webkit-transition: all 1s ease-in-out; -moz-transition: all 1 ease-in-out; -ms-transition: a h-uile 1 nas fhasa a-mach; -o-ghluasad: a h-uile 1 nas fhasa a-mach; eadar-ghluasad: a h-uile duine nas fhasa a-mach; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; dìomhaireachd: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; dìomhaireachd: 0; }