CSS3 tranzicije kreiraju Nice Fade efekte
Web dizajneri su dugo želeli više kontrole nad stranicama koje su kreirali kada je CSS3 pogodio scenu. Novi stilovi koji su predstavljeni u CSS3 dali su web profesionalcima mogućnost dodavanja efekata slične Photoshopu na njihove stranice. Ovo uključuje osobine poput senki i sjaja , zaobljeni uglovi i drugo. CSS3 je takođe uveo animacije kao što su efekti koji se mogu koristiti za stvaranje prijatne interaktivnosti na sajtovima.
Jedan od vrlo lijepih vizuelnih efekata koje možete dodati elementima na vašoj web lokaciji koristeći CSS3 jeste da ih ujednačavaju i izbacuju koristeći kombinaciju osobina za prozirnost i tranziciju. Ovo je lak i dobro podržan način da stranice učinite interaktivnijim kreiranjem izblokiranih područja koje dolaze u fokus kada posetilac sajta nešto učini, poput lebdeći nad tim elementom.
Hajde da pogledamo koliko je lako dodati ovaj interaktivni vizuelni efekat različitim elementima na vašim web stranicama ..
Neka promeni promenite na Hoveru
Počećemo gledajući kako promijeniti neprozirnost slike kada klijent lebdi nad tim elementom. Za ovaj primjer (HTML je prikazan ispod) Koristim sliku sa atributom klase greydout-a.
Da bismo sivili, dodamo sledeća pravila stila našem CSS stylesheetu:
.greydout {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0.25;
}
Ova podešavanja neprovidnosti prevedu na 25%. To znači da će slika biti prikazana kao 1/4 njene normalne transparentnosti. Potpuno neprozirna bez transparentnosti bi bila 100% dok bi 0% bilo potpuno transparentno.
Zatim, kako bi slika postala jasna (ili preciznije, postati potpuno neprozirna) kada se miš preko nje nadmaši, dodali biste: hover pseudo-class:
.greydout: hover {
-webkit-opacity: 1;
-moz-opacity: 1;
prozirnost: 1;
}
Primetićete da za ove primere koristim prefiksne verzije pravila proizvođača kako bi osigurali kompatibilnost sa starijim verzijama tih pretraživača. Iako je ovo dobra praksa, stvarnost je da pravilo neprozirnosti sada dobro podržava pregledač i prilično je sigurno odbaciti prefiksne linije tih proizvođača. Ipak, takođe nema razloga da ne uključite ove prefikse ako želite osigurati podršku za starije verzije pregledača. Samo budite sigurni da pratite prihvaćenu najbolju praksu završetka deklaracije sa normalnom, ne-prefiksnom verzijom stila.
Ako ste ovo rasporedili na nekoj lokaciji, videćete da je ovo prilagođavanje nejasnosti veoma iznenadna promena. Prvo je sivo i onda to nije, bez ikakvih privremenih stanja između te dve. To je kao prekidač za svetlo - uključen ili isključen. Ovo može biti ono što želite, ali možda i želite da eksperimentišete sa promenljivom koja je postepena.
Da biste dodali stvarno ugodan efekat i učinili da se ovo blede postepeno, želite dodati svojstvo transkacije u grupu .greydout:
.greydout {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0.25;
-webkit-tranzicija: sve 3s lakoće;
-moz-tranzicija: sve 3s lakoće;
-ms-tranzicija: sve 3s lakoće;
-o-tranzicija: sve 3s lakoće;
tranzicija: sve 3s lakoće;
}
Sa ovim kodom, promjena bi se postepeno prelazila, a ne samo naglo prelazak.
Još jednom, ovde koristimo brojne predefikte pravila proizvođača. Tranzicija nije dovoljno podržana kao neprozirnost, tako da ovi prefiksi imaju smisla.
Jedna stvar koju treba zapamtiti kada planirate ove interakcije je da uređaji za dodirni ekran nemaju stanje "lebdeće", tako da se ovi efekti često gubi kod bilo koga koji koristi uređaj sa dodirnim ekranom kao što je mobilni telefon. Često se dešava tranzicija, ali se to dešava tako brzo da ih stvarno ne može videti. To je dobro ako dodate ovo kao lijep efekat bonusa, ali izbegavajte sve promjene koje NE trebate vidjeti da sadržaj bude razumljiv.
Fading Out je moguće previše
Ne morate da započnete sa izblednom imidžom, možete koristiti tranzicije i prozirnost da biste izbledeli iz potpuno neprozirne slike. Koristeći istu sliku, samo sa klasi sa fadeout-om:
class = "withfadeout">
Kao i ranije, promenite neprozirnost koristeći: selektor hoverenja:
.withfadeout {
-webkit-tranzicija: sve 2s jednostavno-in-out;
-moz-tranzicija: sve 2s jednostavno-in-out;
-ms-tranzicija: sve 2s jednostavno-in-out;
-o-tranzicija: sve 2s jednostavno-u-izlaz;
tranzicija: sve 2s jednostavno-u-izlaz;
}
.withfadeout: hover {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0.25;
}
U ovom primjeru, slika bi se prešla sa potpuno neprozirnog do donekle providnog - na suprotnom našem prvom primjeru.
Idemo dalje od slika
Odlično je što možete da primenite ove vizuelne tranzicije i izbledite na slike, ali niste ograničeni samo na korišćenje slika sa ovim CSS efektima. Možete jednostavno napraviti dugmad sa CSS stilovima koji izblede kada se klikne i drže. Vi biste jednostavno postavili neprozirnost pomoću: aktivne pseudo-klase i stavite tranziciju na klasu koja definiše taster. Kliknite i zadržite ovo dugme da biste videli šta se dešava.
Moguće je u suštini napraviti bilo koji vizuelni element koji se zbledi kada se lebde ili klikne. U ovom primjeru mijenjam prozirnost diva i boje teksta kada je miš preko nje. Evo CSS-a:
#myDiv {
širina: 280px;
pozadina: # 557A47;
boja: #dfdfdf;
padding: 10px;
-webkit-tranzicija: sve 4s ease-out 0s;
-moz-tranzicija: sve 4s olakšava 0s;
-ms-tranzicija: sve 4s ease-out 0s;
-o-tranzicija: sve 4s ease-out 0s;
tranzicija: sve 4s lakoće 0s;
}
#myDiv: hover {
-webkit-opacity: 0,25;
-moz-opacity: 0,25;
opacity: 0.25;
boja: # 000;
}
Meniji za navigaciju mogu imati koristi od izbledelih boja pozadine
U ovom jednostavnom meniju za navigaciju, boja pozadine polako se spušta i izlazi dok se pomeram preko stavki menija. Evo HTML:
- Dom
- CSS3 Tutoriali
- CSS3 Properties
I evo CSS-a:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
display: inline;
float: left;
padding: 5px 15px;
marža: 0 5px;
-webkit-tranzicija: svi 2s linearni;
-moz-tranzicija: svi 2s linearni;
-ms-tranzicija: svi 2s linearni;
-o-tranzicija: svi 2s linearni;
tranzicija: svi 2s linearni;
}
ul # sampleNav li {tekst-dekoracija: nema; }
ul # primerNav li: hover {
pozadina: # DAF197;
}
Podrška pregledača
Kao što sam već nekoliko puta dotakao, ovi stilovi imaju veoma dobru podršku za pretraživače, pa bi trebalo da se osetite slobodnim da ih koristite bez ikakvih uznemiravanja. Jedini izuzetak u ovome je mnogo starija verzija Internet Explorer-a, ali sa nedavnom odlukom Microsofta da završi podršku za sve verzije IE ispod 11, ovi stariji pretraživači postaju sve manje problem - i realno, ako stariji pretraživač ne vidi ovu tranziciju fadiranja, koja ne bi trebala biti veliki problem. Sve dok ograničite ovakve efekte na prijatne interakcije i ne oslanjate se na njih kako biste pokrenuli funkcionalnost ili otkrili ključni sadržaj, stariji pretraživači koji ne podržavaju efekte će imati manje prijatan doživljaj, ali korisnici na tim pretraživačima neće znaju razliku, pogotovo ako mogu koristiti lokaciju kao obično i dobiti informacije koje im trebaju.
Ekstra zabava, razmena dve slike
Evo primera kako baciti jednu sliku u drugu. Koristite HTML:
I CSS koji čine jedan potpuno transparentnim, dok je drugi potpuno neproziran, a onda se tranzicija zamenjuje dve:
.swapMe img {-webkit-transition: sve 1s jednostavno-u-out; -moz-tranzicija: sve 1s jednostavno-in-out; -ms-tranzicija: sve 1s jednostavno-in-out; -o-tranzicija: sve 1s jednostavno-in-out; tranzicija: sve 1s jednostavno-u-izlaz; } .swap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-opacity: 1; prozirnost: 1; } .swapMe: hover. swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }