A új stílusok a CSS3-ban lehetőséget adott a webes szakembereknek, hogy Photoshop-szerű effektusokat adhassanak az oldalukhoz. Egy vizuális effekt, amelyet hozzáadhat CSS3 az, hogy interaktívvá tegye a weboldalakat azáltal, hogy olyan elhalványult területeket hoz létre, amelyek a figyelem középpontjába kerülnek, amikor a webhely látogatója tesz valamit, például lebeg az adott elem felett. Ez a hatás a átlátszatlanság és átmenet.
Az opacitás módosítása az egérrel
Az egyik interaktív elem a kép átlátszatlanságának megváltoztatása, amikor az ügyfél lebeg az adott elem felett. Ebben a példában (a HTML alább látható) egy képet használunk a class attribútummal szürkület.
Szürkére váltásához adja hozzá a következő stílusszabályokat a CSS-stíluslapjához:
.greydout {
-webkit-átlátszatlanság: 0,25;
-moz-opacitás: 0,25;
opacitás: 0,25;
}
Ezek az átlátszatlansági beállítások 25 százalékot jelentenek. Ez azt jelenti, hogy a kép a normál átlátszóság 1/4 részeként jelenik meg. Teljesen átlátszatlan, átlátszóság nélkül 100, míg 0 százalék teljesen átlátszó lenne.
Ezután, hogy a kép egyértelművé váljon (vagy pontosabban, teljesen átlátszatlanná váljon), amikor az egér fölé viszi az egeret, a következőket kell hozzáadnia:
.greydout: hover {
-webkit-átlátszatlanság: 1;
-moz-átlátszatlanság: 1;
átlátszatlanság: 1;
}
Több opacitás-beállítás
Észre fogja venni, hogy ezeknél a példáknál a gyártó szállító előtagú verzióit használjuk a böngészők régebbi verzióinak visszamenőleges kompatibilitásának biztosítására. Bár ez jó gyakorlat, az átlátszatlansági szabályt a böngészők jól támogatják, és biztonságosan el lehet dobni ezeket a gyártói előtagú sorokat.
Ennek ellenére nincs oka annak, hogy ne vegye fel ezeket az előtagokat, ha biztosítani szeretné a régebbi böngészőverziók támogatását. Csak győződjön meg arról, hogy követi az elfogadott bevált gyakorlatot a deklaráció befejezésére a stílus normál, előtag nélküli változatával.
Helyen telepítve ez az átlátszatlansági beállítás hirtelen változás. Először is szürke, aztán nem, e kettő között nincsenek köztes állapotok. Olyan, mint egy villanykapcsoló - be vagy ki. Lehet, hogy ezt szeretné, de kísérletezhet egy fokozatosabb változással is.
Szép effektus hozzáadásához és fokozatos elhalványításához adja hozzá a átmenet ingatlan:
.greydout
osztály: .greydout {
-webkit-átlátszatlanság: 0,25;
-moz-opacitás: 0,25;
opacitás: 0,25;
-webkit-átmenet: mind a 3 könnyebb;
-moz-átmenet: mind a 3 könnyebb;
-ms-átmenet: mind a 3 könnyebb;
-o-átmenet: mindhárom könnyebb;
átmenet: mind a 3 könnyebb;
}