The novi slogi, predstavljeni v CSS3 spletnim strokovnjakom omogočil, da na svoje strani dodajajo učinke, podobne Photoshopu. En vizualni učinek, ki ga lahko dodate z uporabo CSS3 je narediti spletne strani interaktivne z ustvarjanjem bledih področij, ki se osredotočijo, ko obiskovalec spletnega mesta nekaj naredi, na primer lebdi nad tem elementom. Ta učinek uporablja kombinacijo motnost in prehod.
Spremenite motnost pri premikanju
En interaktivni element je spreminjanje neprosojnosti slike, ko stranka lebdi nad tem elementom. Za ta primer (HTML je prikazan spodaj) uporabimo sliko z atributom class greydout.
Če želite, da je siv, dodajte naslednja pravila o slogu v svoj slog slogov CSS:
.greydout {
-webkit-motnost: 0,25;
-moz-motnost: 0,25;
motnost: 0,25;
}
Te nastavitve motnosti pomenijo 25 odstotkov. To pomeni, da bo slika prikazana kot 1/4 njene običajne prosojnosti. Popolnoma neprozorno brez prosojnosti bi bilo 100 odstotkov, medtem ko bi bilo 0 odstotkov popolnoma prozorno.
Nato, če želite, da slika postane jasna (ali natančneje, da postane popolnoma neprozorna), ko miška lebdi nad njo, dodajte naslednje:
.greydout: hover {
-webkit-motnost: 1;
-moz-motnost: 1;
motnost: 1;
}
Več prilagoditev neprosojnosti
Opazili boste, da za te primere uporabljamo različice pravila s predpono ponudnika, da zagotovimo povratno združljivost starejših različic teh brskalnikov. Čeprav je to dobra praksa, pravilo neprosojnosti brskalniki dobro podpirajo, in varno je, da spustite te vrstice s predpono prodajalca.
Kljub temu ni razloga, da teh predpon ne vključite, če želite zagotoviti podporo za starejše različice brskalnika. Prepričajte se, da upoštevate sprejeto najboljšo prakso, da deklaracijo končate z običajno različico sloga, ki nima predpone.
Ko je prilagoditev motnosti razporejena na spletnem mestu, je nenadna sprememba. Najprej je siva, potem pa ne, brez vmesnih stanj med tema dvema. Je kot stikalo za luč - vklop ali izklop. To je morda tisto, kar želite, lahko pa tudi poskusite s spremembo, ki je bolj postopna.
Če želite dodati lep učinek in narediti to postopno bledenje, dodajte prehod lastnina:
.greydout
class: .greydout {
-webkit-motnost: 0,25;
-moz-motnost: 0,25;
motnost: 0,25;
-webkit-prehod: vse 3-je enostavnost;
-moz-prehod: vse 3-je enostavnost;
-ms-prehod: vse 3-je enostavne;
-o-prehod: vse 3-je enostavnost;
prehod: vse 3-je enostavnost;
}