CSS3 tranzicije stvaraju lijepe učinke fadinga
Web dizajneri su dugo željeli više kontrole nad stranicama koje su stvorili kada je CSS3 pogodio scenu. Novi stilovi uvedeni u CSS3 dali su web profesionalcima mogućnost dodavanja Photoshop-sličnih efekata na njihove stranice. To je uključivalo značajke poput sjene i sjene , zaobljene kutove i još mnogo toga. CSS3 je također predstavio animirane efekte koji se mogu koristiti za stvaranje dobre interaktivnosti na web stranicama.
Jedan vrlo lijep vizualni efekt koji možete dodati elementima na vašoj web stranici pomoću CSS3 je da ih izbacite i izbacite kombinacijom svojstava za neprozirnost i prijelaz. Ovo je jednostavan i dobro podržan način da vaše stranice više interaktivno stvaraju blijeda područja koja dolaze u fokus kada posjetitelj web mjesta nešto čini, poput lebdeći iznad tog elementa.
Pogledajmo kako je jednostavno dodati ovaj interaktivni vizualni efekt na različite elemente na svojim web stranicama ..
Promijenite neprozirnost na lebdjeti
Započeti ćemo promatrati kako promijeniti neprozirnost slike kad klijent lebdi nad tim elementom. Za ovaj primjer (HTML je prikazan dolje) koristim sliku s atributom klase greydout.
Kako bismo sive, dodali smo sljedeća pravila stila na naš CSS stilski list:
.greydout {
-webkit-opacity: 0.25;
-moz-neprozirnost: 0,25;
neprozirnost: 0,25;
}
Te postavke neprozirnosti prevode se na 25%. To znači da će slika biti prikazana kao 1/4 normalne prozirnosti. Potpuno neprozirna bez transparentnosti bilo bi 100% dok bi 0% bilo potpuno transparentno.
Zatim, da bi slika postala jasna (ili točnije, kako bi postala potpuno neprozirna) kada je miš lebdio nad njom, dodali biste: hover pseudo-klase:
.greydout: zadržite pokazivač miša {
-webkit-opacity: 1;
-moz-neprozirnost: 1;
neprozirnost: 1;
}
Primijetit ćete da, za ove primjere, upotrebljavam verzije pravilnika unaprijed definiranih dobavljača kako bi se osiguralo unatrag kompatibilnost za starije verzije tih preglednika. Iako je to dobra praksa, stvarnost je da pravilo o neprozirnosti sada dobro podržava preglednik i da je prilično sigurna da ispadne one predodređene linije dobavljača. Ipak, nema razloga da ne uključite ove prefikse ako želite osigurati podršku starijim verzijama preglednika. Samo budite sigurni da slijedite prihvaćenu najbolju praksu za okončanje deklaracije s uobičajenom, neprefixiranom verzijom stila.
Ako ste ovo implementirali na web mjesto, vidjet ćete da je ta prilagodba neprozirnosti vrlo nagla promjena. Prvo je siva, a onda nije, bez privremenih stanja između ta dva. To je poput prekidača svjetla - uključeno ili isključeno. To može biti ono što želite, ali možda želite i eksperimentirati s promjenom koja je postupnija.
Da biste dodali jako lijep efekt i učinili da se ovo postupno izblijedi, želite dodati prijelazni entitet u klasu .greydout:
.greydout {
-webkit-opacity: 0.25;
-moz-neprozirnost: 0,25;
neprozirnost: 0,25;
-webkit-transition: sve 3s jednostavnost;
-moz-prijelaz: sve 3s jednostavnost;
-ms-transition: sve 3s jednostavnost;
-o-prijelaz: sve 3s jednostavnost;
tranzicija: sve 3s jednostavnost;
}
Ovim kodom promjena će postupno napredovati, a ne naglo prebacivati.
Još jednom ovdje koristimo nekoliko predefiniranih pravila dobavljača. Tranzicija nije tako dobro podržana kao neprozirnost, tako da ti prefiksi imaju smisla.
Jedna stvar koju trebate zapamtiti dok planirate ove interakcije jest da uređaji s dodirnim zaslonom nemaju stanje "lebdeći", tako da se ovi efekti često gube na svakom tko koristi uređaj osjetljiv na dodir poput mobilnog telefona. Prijelaz se često događa, ali se događa tako brzo da ih se stvarno ne može vidjeti. To je u redu ako dodate ovo kao lijep bonus učinak, ali izbjegavajte sve promjene koje je potrebno da se vidi kako bi se sadržaj razumio.
Malo je moguće izbaciti
Ne morate početi s izblijedjelom slikom, možete koristiti prijelaze i neprozirnost kako biste izblijedili iz potpuno neprozirne slike. Upotrebljavajući istu sliku, samo s razredom withfadeout:
class = "withfadeout">
Kao i prije, promijenite neprozirnost pomoću: hover selector:
.withfadeout {
-webkit-transition: sve 2s jednostavnost u izlasku;
-moz-transition: svi 2s jednostavnost u izlasku;
-ms-transition: sve 2s lakoća-in-out;
-o-prijelaz: sve 2s jednostavnost u izlasku;
tranzicija: sve 2s jednostavnost u izlasku;
}
withwithout: zadržite pokazivač miša {
-webkit-opacity: 0.25;
-moz-neprozirnost: 0,25;
neprozirnost: 0,25;
}
U ovom primjeru slika će se prebaciti iz potpuno neprozirne do pomalo prozirne - obrnuto od našeg prvog primjera.
Idete izvan slika
Izvrsno je da možete primijeniti ove vizualne prijelaze i izblijedjeti na slike, ali niste ograničeni samo na korištenje slika s tim CSS učincima. Možete jednostavno izraditi gumbe CSS-a koji nestaju kad se kliknu i drže. Jednostavno biste postavili neprozirnost pomoću: aktivne pseudo-klase i stavite prijelaz na klasu koja određuje gumb. Kliknite i držite ovu tipku da biste vidjeli što se događa.
Moguće je da se u biti bilo koji vizualni element izblijedi kada se lebde iznad ili se klikne. U ovom primjeru promijenit ću neprozirnost divova i boju teksta kada je miš iznad nje. Ovdje je CSS:
#myDiv {
širina: 280px;
boja pozadine: # 557A47;
boja: #dfdfdf;
padding: 10px;
-webkit-transition: svi 4s jednostavnost-out 0s;
-moz-transition: svi 4s olakšati-out 0s;
-ms-transition: svi 4s jednostavnost-out 0s;
-o-prijelaz: sve 4s lakše-out 0s;
prijelaz: sva 4s jednostavnost-out 0s;
}
#myDiv: zadržite pokazivač miša {
-webkit-opacity: 0.25;
-moz-neprozirnost: 0,25;
neprozirnost: 0,25;
boja: # 000;
}
Izbornici navigacije mogu iskoristiti boja pozadine
U ovom jednostavnom navigacijskom izborniku boja pozadine polako nestaje i izlazi dok mi mišem prelazim na stavke izbornika. Ovdje je HTML:
- Dom
- CSS3 Tutoriali
- CSS3 svojstva
A ovdje je CSS:
ul # sampleNav {list-style: none; }
ul # sampleNav li {
prikaz: inline;
plutaju: lijevo;
padding: 5px 15px;
margina: 0 5px;
-webkit-transition: sve 2s linearne;
-moz-prijelaz: sve 2s linearne;
-ms-transition: sve 2s linearne;
-o-prijelaz: svi su linearni;
tranzicija: sve 2s linearno;
}
ul # sampleNav li a {text-decoration: none; }
ul # sampleNav li: lebdjeti {
boja pozadine: # DAF197;
}
Podrška pregledniku
Kao što sam dotaknuo već nekoliko puta, ti stilovi imaju vrlo dobru podršku za preglednike, pa biste ih trebali slobodno koristiti bez ikakvog trepidiranja. Jedina iznimka od ove su mnogo starije verzije Internet Explorera, ali s nedavnom odlukom tvrtke Microsoft o završetku podrške za sve verzije IE ispod 11, ti stariji preglednici sve manje postaju problem - i realno, ako stariji preglednik ne vidi ovo prijelazno fading, koji ne bi trebao biti glavni problem. Sve dok ograničavate takve efekte na ugodne interakcije i nemojte se oslanjati na njih da voze funkcionalnosti ili otkrivaju ključne sadržaje, stariji preglednici koji ne podržavaju efekte dobit će manje uživanje, ali korisnici tih preglednika neće ni znaju razliku, pogotovo ako mogu koristiti web mjesto normalno i dobiti informacije koje su im potrebne.
Dodatno zabavno, zamijenite dvije slike
Evo primjera kako izblijediti jednu sliku u drugu. Upotrijebite HTML:
A CSS koji čini jednu potpuno transparentnom dok je drugi potpuno neproziran, a prijelaz zamjenjuje dva:
.swapMe img {-webkit-transition: sve 1s jednostavnost u izlasku; -moz-prijelaz: sve jednostavne u izlasku; -ms-transition: sve 1s jednostavnost u izlasku; -o-prijelaz: sve jednostavnije u izlasku; tranzicija: sve 1s lakoća-in-out; } .wap1, .swapMe: hover .swap2 {-webkit-opacity: 1; -moz-neprozirnost: 1; neprozirnost: 1; } .swapMe: zadržite pokazivač miša .swap1, .swap2 {-webkit-opacity: 0; -moz-neprozirnosti: 0; neprozirnost: 0; }