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 lebeg az adott elem fölé.
Vessünk egy pillantást arra, milyen könnyű hozzáadni ezt a kölcsönható vizuális hatást a weboldalain található különböző elemekhez.
Az opacitás megváltoztatása a lebegéskor
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 alább látható) egy olyan képet használunk, amelynek attribútuma a
greydout.
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, ha a kép tiszta (vagy pontosabban, teljesen átlátszóvá válik), amikor az egér le van lebillenve, hozzáadja a :lebegpszeudosztály: .greydout: ugrás {-webkit-opacity: 1;-moz-opacitás: 1;homályosság: 1;}
Észre fogod venni, hogy ezeknél a példáknál a szabály előállítói által használt prefix verziókat használjuk, hogy biztosítsuk 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 is, szürke, és akkor 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. Hozzáadni egy igazán szép hatást, és ez fokozatosan elhalványulna, hozzá akarja adni a átmenet
ingatlan a .greydoutosztály: .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ű;}
