CSS3 yfirfærslur Búðu til fínn fadeffekter
Vefhönnuðir höfðu lengi óskað eftir meiri stjórn á síðum sem þeir voru að búa til þegar CSS3 lenti á svæðið. Hin nýja stíll kynntur í CSS3 gaf vefþjónum möguleika á að bæta Photoshop-eins og áhrifum á síðurnar sínar. Þetta felur í sér eiginleika eins og dropaskugga og glósa , ávalar horn og fleira. CSS3 kynnti einnig fjör-eins áhrif sem hægt er að nota til að búa til gott gagnvirkni á vefsvæðum.
Ein mjög góð sjónræn áhrif sem þú getur bætt við þætti á vefsíðunni þinni með því að nota CSS3 er að gera þau hverfa inn og út með því að nota samsetningu eiginleika fyrir ógagnsæi og umskipti. Þetta er auðveld og vel studd leið til að gera síðurnar þínar gagnvirkari með því að búa til svolítið svæði sem koma í brennidepli þegar síða gestur gerir eitthvað, eins og sveima yfir þann þátt.
Skulum líta á hversu auðvelt það er að bæta þessum samspili sjónræn áhrif við ýmsa þætti á vefsíðum þínum ..
Leyfðu að breyta ógagnsæi á sveiflu
Við munum byrja með að skoða hvernig á að breyta ógagnsæi myndar þegar viðskiptavinur er að sveima yfir þann þátt. Fyrir þetta dæmi (HTML er sýnt hér að neðan) er ég að nota mynd með bekkjargetu greydout.
Til að gera það greyed út bætum við eftirfarandi stílreglum við CSS stílblöð okkar:
.greydout {
-webkit-ógagnsæi: 0,25;
-moz-ógagnsæi: 0,25;
ógagnsæi: 0,25;
}
Þessar ógagnsæjarstillingar þýða í 25%. Þetta þýðir að myndin verður sýnd sem 1/4 af eðlilegri gagnsæi. Alveg ógagnsæ án gagnsæis væri 100% en 0% væri alveg gagnsæ.
Næst, til að gera myndina ljóst (eða nákvæmara, að verða fullkomlega ógagnsæ) þegar músin er sveiflast yfir það, myndirðu bæta við: sveima gervitungl:
.greydout: sveima {
-webkit-ógagnsæi: 1;
-moz-ógagnsæi: 1;
ógagnsæi: 1;
}
Þú munt taka eftir því að fyrir þessa dæmi notar ég seljanda fyrirfram skilgreindar útgáfur reglunnar til að tryggja afturvirkni í eldri útgáfum af þessum vöfrum. Þó að þetta sé gott starf, þá er raunin sú að ógagnsæmisreglan sé vel studd af vöfrum og það er frekar óhætt að sleppa þessum seljanda fyrirfram ákveðnum línum. Enn er engin ástæða til að innihalda þessar forskeyti ef þú vilt tryggja stuðning við eldri útgáfur vafrans. Réttlátur vera viss um að fylgjast með samþykktum bestu starfsvenjum við að ljúka yfirlýsingunni með eðlilegu, ótilgreindri útgáfu af stíl.
Ef þú hefur sent þetta á síðuna, þá ættir þú að sjá að þessi ógagnslegur aðlögun er mjög skyndileg breyting. Fyrst er það grátt og þá er það ekki, án tímabundinna ríkja milli þessara tveggja. Það er eins og ljósrofi - kveikt eða slökkt. Þetta gæti verið það sem þú vilt, en þú gætir líka viljað gera tilraunir með breytingum sem eru smám saman.
Til að bæta virkilega góðum árangri og gera þetta hverfa smám saman, viltu bæta við umskiptareigninni við .greydout bekkinn:
.greydout {
-webkit-ógagnsæi: 0,25;
-moz-ógagnsæi: 0,25;
ógagnsæi: 0,25;
-webkit-umskipti: allt 3s vellíðan;
-moz-umskipti: allt 3s vellíðan;
-ms-umskipti: allir 3s vellíðan;
-o-umskipti: allir 3s vellíðan;
umskipti: allt 3s vellíðan;
}
Með þessum kóða myndi breytingin breytast smám saman frekar en bara að skipta skyndilega.
Enn og aftur, við erum að nota fjölda fyrirfram ákveðinna reglna hér. Yfirfærsla er ekki eins vel studd og ógagnsæi, svo þessi forskeyti gera það skynsamlegt.
Eitt sem þarf að hafa í huga þegar þú skipuleggur þessar milliverkanir er að snertiskjábúnaðurinn er ekki með "sveima" ástand, þannig að þessi áhrif eru oft glatað á einhver sem notar snerta skjár tæki eins og farsíma. Yfirfærslan mun oft gerast, en það gerist svo hratt að þeir geti ekki séð það. Það er allt í lagi ef þú bætir þessu við sem gott bónusáhrif, en forðast allar breytingar sem þurfa að vera áberandi fyrir að skilja efni.
Fading Out er mögulegt líka
Þú þarft ekki að byrja með blek mynd, þú getur notað umbreytingar og ógagnsæi til að hverfa úr fullkomnu ógegnsæri mynd. Notkun sömu myndar, aðeins með bekknum withfadeout:
class = "withfadeout">
Rétt eins og áður breytir þú ógagnsæi með því að nota: sveima val:
.withfadeout {
-webkit-umskipti: allt 2s vellíðan-í-út;
-moz-umskipti: allt 2s vellíðan-í-út;
-ms-umskipti: allt 2s vellíðan-í-út;
-o-umskipti: allt 2s vellíðan-í-út;
yfirfærsla: allt 2s vellíðan-í-út;
}
.withfadeout: sveima {
-webkit-ógagnsæi: 0,25;
-moz-ógagnsæi: 0,25;
ógagnsæi: 0,25;
}
Í þessu dæmi myndi myndin breytast úr fullkomlega ógagnsæjum og nokkuð gagnsæjum - hið gagnstæða fyrsta dæmi okkar.
Fara út fyrir myndir
Það er frábært að þú getur sótt um þessar sjónrænar umbreytingar og hverfur í myndir, en þú takmarkast ekki við að nota myndir með þessum CSS áhrifum. Þú getur auðveldlega búið til CSS-hnappana sem hverfa þegar smellt er á og haldið. Þú vildi bara setja ógagnsæi með: virka gerviklasanum og setja umskipti á bekkinn sem skilgreinir hnappinn. Smelltu og haltu þessari hnapp til að sjá hvað gerist.
Það er hægt að gera í raun einhver sjónræn þáttur hverfa þegar sveiflast yfir eða smellt á. Í þessu dæmi breytir ég ógagnsæi div og lit textans þegar músin er yfir því. Hér er CSS:
#myDiv {
breidd: 280px;
bakgrunnslit: # 557A47;
litur: #dfdfdf;
padding: 10px;
-webkit-umskipti: öll 4s auðvelda út 0s;
-moz-umskipti: öll 4s auðvelda út 0s;
-ms-umskipti: öll 4s auðvelda út 0s;
-ó-umskipti: öll 4s auðvelda út 0s;
umskipti: öll 4s vellíðan 0s;
}
#myDiv: sveima {
-webkit-ógagnsæi: 0,25;
-moz-ógagnsæi: 0,25;
ógagnsæi: 0,25;
litur: # 000;
}
Leiðsagnarvalmyndir geta haft hag af því að hverfa bakgrunni litum
Í þessari einföldu flakkavalmynd hverfur bakgrunnslitinn hægt inn og út eins og ég mús yfir valmyndalistana. Hér er HTML:
- Heim
- CSS3 námskeið
- CSS3 eignir
Og hér er CSS:
ul # sampleNav {listi-stíl: none; }
ul # sampleNav li {
sýna: inline;
fljóta: vinstri;
padding: 5px 15px;
framlegð: 0 5px;
-webkit-umskipti: öll 2 línuleg;
-moz-umskipti: öll 2 línuleg;
-ms-umskipti: öll 2 línuleg;
-ó-umskipti: öll 2 línuleg;
umskipti: öll 2 línuleg;
}
ul # sampleNav li {text-decoration: none; }
ul # sampleNav li: sveima {
bakgrunnslit: # DAF197;
}
Stuðningur við vafra
Eins og ég hef snert nokkrum sinnum þegar, hafa þessar stafir mjög góðan vafra stuðning, svo þú ættir að hika við að nota þær án þess að þjást. Eina undantekningin frá þessu er miklu eldri útgáfur af Internet Explorer, en með nýlegri ákvörðun Microsoft um að ljúka stuðningi við allar útgáfur af IE undir 11, verða þessar eldri vafrar að verða minna og minna vandamál - og raunhæft, ef eldri vafrinn er ekki sjá þessa breytingu, sem ætti ekki að vera stórt vandamál. Svo lengi sem þú takmarkar þessar tegundir af áhrifum til skemmtilegra samskipta og treystir ekki á þá til að keyra virkni eða afhjúpa lykilatriði, þá munu eldri vöfrum sem styðja ekki áhrifin fá skemmtilega reynslu en notendur á þessum vöfrum munu ekki einu sinni þekkja muninn, sérstaklega ef þeir geta notað síðuna eins og venjulega og fá þær upplýsingar sem þeir þurfa.
Extra gaman; skipta um tvær myndir
Hér er dæmi um hvernig á að hverfa eina mynd í annan. Notaðu HTML:
Og CSS sem gerir einn að fullu gagnsæ á meðan hinn er fullkomlega ógagnsæ og skiptir umskipti þeim tveimur:
.swapMe img {-webkit-umskipti: allt 1s vellíðan-í-út; -moz-umskipti: allt 1s vellíðan-í-út; -ms-umskipti: allt 1s vellíðan-í-út; -ó-umskipti: allt 1s vellíðan-í-út; umskipti: allt 1s vellíðan-í-út; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-ógagnsæi: 1; ógagnsæi: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-ógagnsæi: 0; ógagnsæi: 0; }