Prehodi CSS3 Ustvari Nice Fade Effects
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 središče, ko obiskovalec spletnega mesta naredi nekaj, kot je na lebdi nad tem elementom.
Oglejmo si, kako enostavno je ta interaktivni vizualni učinek dodati različnim elementom na vaših spletnih straneh.
Naj bo sprememba motnosti spremenjena
Najprej bomo začeli gledati, kako spremeniti nepreglednost slike, ko stranka krije ta element. V tem primeru (HTML je prikazan spodaj) Uporabljam 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 je slika jasna (ali natančneje, da postane popolnoma neprozorna), ko miško nad njo premikate, bi dodali: hover pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
motnost: 1;
}
Opazili boste, da za te primere uporabljam predfiksne različice pravilnika, da zagotovim 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 zvez 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 narediti to postopno postopno, želite dodati prehodno znamko v razred .greydout:
.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;
}
S to kodo bi se sprememba postopoma spreminjala in ne samo nenadoma preklapljala.
Še enkrat, tukaj uporabljamo številna prednastavljena pravilnika prodajalca. Prehod ni tako podprt kot motnost, zato so ti predponi smiselni.
Ena stvar, ki jo je treba zapomniti, ko načrtujete te interakcije, je, da naprave na dotik nimajo stanja »hover«, zato se ti učinki pogosto izgubijo pri uporabniku, ki uporablja zaslonom na dotik, kot je mobilni telefon. Prehod se pogosto zgodi, vendar se zgodi tako hitro, da jih dejansko ni mogoče videti. To je v redu, če dodate to kot lep bonus, vendar se izogibajte spremembam, ki jih je treba razumeti za vsebino.
Izbris je lahko več
Ni vam treba začeti z bledo sliko, lahko uporabite prehod in nepreglednost, da iztisnete iz popolnoma neprozorne slike. Uporaba iste slike, samo s skupino s sliko:
class = "withfadeout">
Tako kot prej, spremenite nepreglednost z uporabo: hover selector:
z brezplačno {
-webkit-prehod: vsi 2s enostavno-out-out;
-moz-prehod: vse 2s enostavno-out-out;
-ms-prehod: vsi 2s enostavnost-out-out;
-o-prehod: vsi 2s enostavno-v-out;
prehod: vsi 2s enostavno-out-out;
}
.vpusti: hover {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
motnost: 0,25;
}
V tem primeru bi se slika prešla iz popolnoma neprozornega do nekoliko preglednega - na nasprotni strani našega prvega primera.
Going Beyond Images
Odlično je, da lahko uporabite te vizualne prehode in zbledite na slike, vendar niste omejeni le na uporabo slik s temi učinki CSS. Z lahkoto lahko ustvarite tipke CSS, ki zbledijo, ko jih kliknete in držite. Preprosto bi nastavili z uporabo: aktivnega psevdo-razreda in prehoda v razred, ki definira gumb. Kliknite in držite ta gumb, da vidite, kaj se zgodi.
V bistvu je možno, da se vizualni element v bistvu zbledi, ko ga premikate ali kliknete. V tem primeru spremenim motnost div in barvo besedila, ko je miška nad njo. Tukaj je CSS:
#myDiv {
širina: 280px;
barva ozadja: # 557A47;
barva: #dfdfdf;
padding: 10px;
-webkit-tranzicija: vse 4s enostavno 0s;
-moz-prehod: vse 4s enostavno 0s;
-ms-prehod: vsi 4s enostavni 0s;
-o-prehod: vse 4s enostavno 0s;
prehod: vse 4s enostavno 0s;
}
#myDiv: lebdite {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
motnost: 0,25;
barva: # 000;
}
Meniji za navigacijo lahko izkoristijo izbledne barve ozadja
V tem preprostem meniju za krmarjenje barva ozadja počasi utripa in ven, ko sem z miško nad elementi menija. Tukaj je HTML:
- Domov
- CSS3 vadnice
- Lastnosti CSS3
In tukaj je CSS:
ul # sampleNav {style-style: none; }
ul # vzorecNav li {
prikaz: inline;
float: levo;
padding: 5px 15px;
margina: 0 5px;
-webkit-prehod: vsi 2s linearni;
-moz-prehod: vse 2s linearno;
-ms-prehod: vsi 2s linearni;
-o-prehod: vsi 2s linearni;
prehod: vsi 2s linearni;
}
ul # sampleNav li {tekst-dekoracija: nič; }
ul # vzorecNav li: lebdite {
barva ozadja: # DAF197;
}
Podpora brskalnika
Kot sem se že nekajkrat dotaknil, imajo ti stili zelo dobro podporo brskalnika, zato jih brez težav vznemirite. Edina izjema pri tem je veliko starejših različic programa Internet Explorer, vendar z nedavno odločitvijo Microsofta, da konča podporo za vse različice IE pod 11, ti starejši brskalniki postajajo vse manj problem - in realno, če starejši brskalnik ne bo glej ta prelomni prehod, ki ne bi smel biti velik problem. Dokler omejite te vrste učinkov na prijetne interakcije in se ne zanašajte na njih, da bi lahko vozili funkcionalnost ali razkrili ključno vsebino, bodo starejši brskalniki, ki ne podpirajo učinkov, dobili manj prijetne izkušnje, vendar uporabniki v teh brskalnikih ne bodo poznate razliko, še posebej, če lahko uporabijo spletno stran kot običajno in pridobijo informacije, ki jih potrebujejo.
Extra Fun; izmenjujte dve sliki
Tukaj je primer, kako zamegliti eno sliko v drugo. Uporabite HTML:
In CSS, zaradi česar je popolnoma transparenten, medtem ko je drugi popolnoma neprozoren, nato pa prehod zamenja dva:
.swapMe img {-webkit-prehod: vse 1s enostavnost-v-out; -moz-prehod: vse 1s enostavnost-out-out; -ms-prehod: vse 1s enostavno-out-out; -o-prehod: vse 1s enostavnost-out-out; prehod: vse 1s enostavnost-out-out; } .swap1, .swapMe: hover. swap2 {-webkit-opacity: 1; -moz-opacity: 1; motnost: 1; } .swapMe: hover. swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; motnost: 0; }