CSS3 átmenetek létrehozása Nice Fade Effects
A webes tervezők már régóta törekedtek arra, hogy jobban irányítsák az általuk létrehozott oldalakat, amikor a CSS3 eltalálta a jelenetet. A CSS3-ban bevezetett új stílusok lehetővé tették a webszakemberek számára, hogy képesek legyenek a Photoshop-szerű effektusokat az oldalukhoz hozzáadni. Ez magában foglalta az olyan tulajdonságokat, mint az árnyékok és az árnyékok , a lekerekített sarkok stb. A CSS3 olyan animációs jellegű hatásokat is bevezetett, amelyek segítségével a webhelyeken jó interaktivitás érhető el.
Egy nagyon szép vizuális effektus, amelyet a CSS3 használatával hozzáadhat az elemekhez a webhelyén, az, hogy elárassza őket a fedettség és az átmenet tulajdonságainak kombinációjával. Ez egy egyszerű és jól támogatott módja annak, hogy az oldalak interaktívabbá váljanak azáltal, hogy elakadt területeket hoznak létre, amelyek fókuszba kerülnek, amikor egy webhely látogatója valamit megtesz, például lebegni az elem fölé.
Vessünk egy pillantást arra, milyen könnyű hozzáadni ezt az interaktív vizuális effektust a weboldal különböző elemeihez.
Nézzük át az opacitást a lebegés közben
Elkezdjük nézni, hogyan változtathatjuk meg a kép opacitását, amikor egy ügyfél lebeg az adott elem fölé. Ehhez a példához (a HTML az alábbiakban látható) egy gridout class attribútummal rendelkező képet használok.
Annak érdekében, hogy szürkén jelenjen meg, a következő stílusszabályokat adjuk hozzá CSS-stíluslapunkhoz:
.greydout {
-webkit-opacitás: 0,25;
-moz-opacitás: 0,25;
homályosság: 0,25;
}
Ezek az opacitási beállítások 25% -ra fordulnak le. Ez azt jelenti, hogy a kép normál átlátszóságának 1/4-e lesz. Teljes átláthatatlan, átlátszóság nélkül 100%, míg 0% teljesen átlátszó.
Ezután, hogy a kép tiszta (pontosabban, teljesen átlátszóvá válik), amikor az egér le van lebillenve, hozzáadja a következőt: hover pszeudosztály:
.greydout: ugorjon {
-webkit-opacity: 1;
-moz-opacitás: 1;
homályosság: 1;
}
Észre fogod venni, hogy ezekre a példákra a szabály előállítói által használt prefixes verziókat használom, ezzel biztosítva az ilyen böngészők régebbi verzióinak kompatibilitását. Bár ez jó gyakorlat, a valóság az, hogy az opacitás szabályt a böngészők jól támogatják, és elég biztonságos a dobozok prefixált vonalait lecsökkenteni. Ennek ellenére nincs semmi oka annak, hogy ne vegye fel ezeket az előtagokat, ha támogatni kívánja a régebbi böngészőverziókat. Ügyeljen arra, hogy kövesse az elfogadott legjobb gyakorlatot a nyilatkozat befejezésével a stílus normál, nem előre definiált változatával.
Ha telepítette ezt a webhelyen, látni fogja, hogy ez az áttetszőség-beállítás nagyon hirtelen változik. Először szürke, és ez nem, nincs köztes állapotok a kettő között. Olyan ez, mint egy világító kapcsoló - be vagy ki. Ez lehet az, amit akarsz, de előfordulhat, hogy kísérletet tesz egy fokozatosabb változással.
Ha igazán szép hatást szeretne adni, és ez fokozatosan elhalványulna, az átmeneti tulajdonságot hozzá kell adnia a .greydout osztályhoz:
.greydout {
-webkit-opacitás: 0,25;
-moz-opacitás: 0,25;
homályosság: 0,25;
-webkit-transition: mindhárom egyszerű;
-moz-átmenet: mindhárom egyszerű;
-ms-átmenet: mindhárom egyszerű;
-o-átmenet: mindhárom egyszerű;
átmenet: mindhárom egyszerű;
}
Ezzel a kóddal a változás fokozatosan átállna, nem pedig hirtelen váltani.
Ismét itt számos szállító előfix szabályt használunk. Az átmenet nem olyan jól támogatott, mint az átlátszatlanság, ezért ezeknek az előtagoknak van értelme.
Az egyik dolog, hogy emlékezzen, ahogy tervezi ezeket a kölcsönhatásokat, hogy az érintőképernyős készülékek nem rendelkeznek "lebeg" állapotúak, így ezek a hatások gyakran elvesztek bárkinek, aki érintőképernyős eszközt használ, például egy mobiltelefont. Az átmenet gyakran megtörténik, de olyan gyorsan történik, hogy valóban nem láthatók. Ez rendben van, ha ezt egy szép bónuszhatásként adja hozzá, de ne változtasson meg olyan változtatásokat, amelyekre a tartalom megértéséhez szükség van.
A fading ki is lehetséges
Nem kell elhalványult képet kezdeni, átmeneteket és homályosságot használhat a teljesen átlátszatlan kép elhomályosítására. Ugyanazt a képet használva, csak egy osztály a withfadeout:
class = "withfadeout">
Az előzőhöz hasonlóan az áttetszőség megváltoztatásához a: hover választó:
withwithfadeout {
-webkit-transition: mind a 2s könnyű-in-out;
-moz-transition: mind a 2s könnyű-in-out;
-ms-átmenet: mind a 2s könnyű-in-out;
-o-átmenet: mind a 2s könnyű-in-out;
átmenet: mind a 2-es könnyű-in-out;
}
.withfadeout: ugrás {
-webkit-opacitás: 0,25;
-moz-opacitás: 0,25;
homályosság: 0,25;
}
Ebben a példában a kép teljesen átláthatatlan, kissé áttetszővé válik - az első példa fordítottja.
A képek túloldalán
Kiváló, hogy alkalmazhatja ezeket a vizuális átmeneteket és elhalványul a képekhez, de nem csak a CSS-effektusokkal rendelkező képeket használja. Könnyedén készíthet CSS-stílusú gombokat, amelyek halványulnak, ha rákattintanak és tartanak. Az átlátszatlanságot az aktív pszeudoosztály használatával állíthatja be, és az átmenetet az adott osztály meghatározó gombjára állítja. Kattintson és tartsa lenyomva ezt a gombot, hogy lássa, mi történik.
Lehetőség van arra, hogy lényegében bármilyen vizuális elemet elhalványuljanak, amikor lebegnek, vagy rákattintanak rá. Ebben a példában megváltoztatom a div és a szöveg színét, amikor az egér túl van rajta. Itt van a CSS:
#myDiv {
szélesség: 280px;
háttérszín: # 557A47;
szín: #dfdfdf;
párnázás: 10px;
-webkit-transition: mind a 4s könnyű-out 0s;
-moz-transition: mind a 4s könnyű-out 0s;
-ms-átmenet: mind a 4s könnyű-out 0s;
-o-átmenet: mind a 4s könnyű-out 0s;
átmenet: mind a 4s könnyű-out 0s;
}
#myDiv: ugorjon {
-webkit-opacitás: 0,25;
-moz-opacitás: 0,25;
homályosság: 0,25;
szín: # 000;
}
A navigációs menük kihasználhatják a fading háttérszínt
Ebben az egyszerű navigációs menüben a háttérszín lassan elhalványul és kifelé változik, ahogy az egérrel a menüelemek fölött. Itt van a HTML:
- itthon
- CSS3 oktatóanyagok
- CSS3 tulajdonságai
És itt van a CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
kijelző: inline;
balra lebeg;
párnázottság: 5px 15px;
margin: 0 5px;
-webkit-átmenet: mind a 2s lineáris;
-moz-átmenet: mind a 2s lineáris;
-ms-átmenet: mind a 2s lineáris;
-o-átmenet: mindegyik 2s lineáris;
átmenet: mind a 2s lineáris;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: ugorjon {
háttérszín: # DAF197;
}
Böngésző támogatás
Mint már néhányszor megérintettem, ezek a stílusok nagyon jó böngészõtámogatással rendelkeznek, így szabadon felhasználhatjuk őket anélkül, hogy féltnénk. Az egyetlen kivétel ez az Internet Explorer sokkal régebbi verziója, de a Microsoft nemrégiben hozott döntése, hogy a 11-es alatti IE összes verziójának támogatását megszünteti, ezek a régebbi böngészők egyre kevésbé jelentenek problémát - és reálisan, ha egy régebbi böngésző nem lásd ezt az elhalványuló átmenetet, amely nem jelenthet komoly problémát. Mindaddig, amíg ezeket a hatásokat korlátozza az élvezetes interakciókra, és nem támaszkodik rájuk a funkcionalitás meghajtására vagy a kulcsfontosságú tartalmak felfedésére, a régebbi böngészők, amelyek nem támogatják a hatásokat, kevésbé élvezetes élményt nyújtanak, de a böngészők felhasználói ismerjük a különbséget, különösen akkor, ha a webhelyet a szokásos módon használhatjuk és megkapjuk az általuk szükséges információkat.
Extra Fun, Két kép cseréje
Íme egy példa arra, hogy hogyan gyengítsen egy képet a másikba. Használja a HTML-t:
És a CSS, amely teljesen átláthatóvá teszi a másikat, míg a másik teljesen átlátszatlan, és az átmenet a kettőt átcseréli:
.swapMe img {-webkit-átmenet: minden 1s könnyű-in-out; -moz-transition: minden 1s könnyű-in-out; -ms-átmenet: minden 1s könnyű-in-out; -o-átmenet: minden 1s könnyű-in-out; átmenet: minden 1s könnyű-in-out; } .wap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacitás: 1; homályosság: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacity: 0; -moz-opacitás: 0; homályosság: 0; }