Spletni oblikovalci so že dolgo želeli več nadzora nad strani, ki so jih ustvarili, ko je CSS3 nastopil prizorišče. Novi slogi, predstavljeni v CSS3, so spletnim strokovnjakom omogočili, da svojim stranem dodajajo učinke, podobne Photoshopu. To je vključevalo lastnosti, kot so senčne sence in žare, zaobljeni koti in drugo. CSS3 je prav tako uvedel učinke, podobne animaciji, ki se lahko uporabijo za ustvarjanje prijazne interaktivnosti na spletnih mestih.
Eden zelo lepih vizualnih učinkov, ki jih lahko dodate elementom na vašem spletnem mestu s pomočjo CSS3, je, da jih zbledi in iztisne s kombinacijo lastnosti za motnost in prehod. To je preprost in dobro podprt način za povečanje interaktivnosti vaših strani z ustvarjanjem izbledenih področij, ki pridejo v ospredje, ko obiskovalec spletnega mesta naredi nekaj, kot je na dnu nad tem elementom.
Oglejmo si, kako enostavno je ta interaktivni vizualni učinek dodati različnim elementom na vaših spletnih straneh.
Spreminjanje neprepustnosti na hoverju
Najprej bomo začeli gledati, kako spremeniti nepreglednost slike, ko stranka krije ta element. V tem primeru (HTML je prikazan spodaj) uporabljamo sliko z atributom razreda
Greydout.
Če želimo, da je zasenjena, dodamo naslednja pravila sloga na našo slogovno oznako CSS: .greydout {-webkit-opacity: 0,25;-moz-opacity: 0,25;motnost: 0,25;}
Te nastavitve nejasnosti prevedejo na 25%. To pomeni, da bo slika prikazana kot 1/4 njene normalne prosojnosti. Popolnoma neprozorna brez preglednosti bi bila 100%, medtem ko bi 0% popolnoma pregledno. Nato, če želite, da slika postane jasna (ali natančneje, postane popolnoma neprozorna), ko miško nad njo premikate, bi dodali : lebditepseudo-razred: .greydout: lebdec {-webkit-opacity: 1;-moz-opacity: 1;motnost: 1;}
Opazili boste, da za te primere uporabljamo predfiksne različice pravilnika, ki zagotavljajo združljivost starejših različic teh brskalnikov. Čeprav je to dobra praksa, je resničnost, da pravilo nepreglednosti zdaj dobro podpirajo brskalniki in je precej varno, da se preusmeri linije prodajalcev. Kljub temu ni razloga, da ne boste vključili teh predpon, če želite zagotoviti podporo za starejše različice brskalnika. Prepričajte se, da upoštevate sprejeto najboljšo prakso, da deklaracijo zaključite z običajno, neprefikasno verzijo sloga. Če ste to razporedili na spletno mesto, boste videli, da je ta prilagoditev motnosti zelo nenadna sprememba. Najprej je siva in potem ni, brez vmesnih stanj med tema dvema. Je kot vklop ali izklop luči. Morda je to tisto, kar želite, vendar boste morda želeli preizkusiti tudi spremembe, ki so bolj postopne. Če želite dodati res lep učinek in to postanejo postopno, želite dodati prehod
nepremičnine do .greydoutrazred: .greydout {-webkit-opacity: 0,25;-moz-opacity: 0,25;motnost: 0,25;-webkit-prehod: vse 3s enostavnost;-moz-prehod: vse 3s enostavnost;-ms-prehod: vse 3s enostavnost;-o-prehod: vse 3s enostavnost;prehod: vse 3s enostavnost;}
