Transmisiile CSS3 Creează efecte de estompare
Designerii de web au dorit de mult mai mult control asupra paginilor pe care le creează atunci când CSS3 a lovit scena. Noile stiluri introduse în CSS3 au oferit profesioniștilor web abilitatea de a adăuga efecte asemănătoare Photoshop cu paginile lor. Acestea includ proprietăți precum umbre și strălucire , colțuri rotunjite și multe altele. CSS3 a introdus, de asemenea, efecte asemănătoare animației care pot fi folosite pentru a crea o interactivitate plăcută pe site-uri.
Un efect vizual foarte frumos pe care îl puteți adăuga elementelor din site-ul dvs. folosind CSS3 este de a le face să se estompeze și să se scurgă folosind o combinație a proprietăților pentru opacitate și tranziție. Aceasta este o modalitate ușoară și bine susținută de a face paginile dvs. mai interactive prin crearea unor zone estompate care intră în centrul atenției atunci când un vizitator de site face ceva, cum ar fi trecerea peste acest element.
Să aruncăm o privire la cât de ușor este să adăugați acest efect vizual interactiv la diferite elemente de pe paginile dvs. web.
Să schimbăm opacitatea pe hover
Vom începe prin a privi cum să schimbăm opacitatea unei imagini atunci când un client se deplasează peste acest element. Pentru acest exemplu (codul HTML este prezentat mai jos) folosesc o imagine cu atributul de clasă al lui greydout.
Pentru a face acest lucru greu, adăugăm următoarele reguli de stil în foaia de stil CSS:
.greydout {
-webkit-opacitate: 0,25;
-mozo-opacitate: 0,25;
opacitate: 0,25;
}
Aceste setări de opacitate se traduc la 25%. Aceasta înseamnă că imaginea va fi afișată ca 1/4 din transparența sa normală. Opacul complet, fără transparență, ar fi 100%, în timp ce 0% ar fi total transparent.
În continuare, pentru a face ca imaginea să apară clară (sau mai precis, pentru a deveni complet opacă) atunci când mouse-ul este plutind peste el, ați adăuga: pseudo-class hover:
.greydout: hover {
-webkit-opacitate: 1;
-moz-opacitate: 1;
opacitate: 1;
}
Veți observa că, pentru aceste exemple, folosesc versiunile prefixate ale furnizorului pentru a asigura compatibilitatea înapoi cu versiunile mai vechi ale acestor browsere. În timp ce aceasta este o practică bună, realitatea este că regula de opacitate este acum bine susținută de browsere și este destul de sigur să renunți la acele linii prestabilite de furnizori. Cu toate acestea, nu există nici un motiv să nu includeți aceste prefixe dacă doriți să asigurați suport pentru versiunile mai vechi ale browserului. Asigurați-vă că urmați cele mai bune practici acceptate de încheiere a declarației cu versiunea normală, nefixată a stilului.
Dacă ați implementat acest lucru pe un site, ați vedea că această ajustare a opacității este o schimbare foarte bruscă. Mai întâi este gri și apoi nu este, fără state intermediare între cele două. Este ca un comutator de lumină - pornit sau oprit. Aceasta poate fi ceea ce doriți, dar este posibil să doriți să experimentați și o schimbare mai graduală.
Pentru a adăuga un efect foarte frumos și a face acest lucru să se estompeze treptat, doriți să adăugați proprietatea de tranziție la clasa .greydout:
.greydout {
-webkit-opacitate: 0,25;
-mozo-opacitate: 0,25;
opacitate: 0,25;
-webkit-transition: toate 3s ușurință;
-moz-tranziție: ușurința a 3-a;
-ms-tranziție: toate 3s ușurință;
-o-tranziție: ușurința tuturor celor 3;
tranziție: ușurința tuturor celor 3;
}
Cu acest cod, schimbarea treptată treptat, mai degrabă decât trecerea bruscă.
Încă o dată, folosim aici mai multe reguli prefixate de furnizor. Tranziția nu este la fel de bine susținută ca opacitatea, deci aceste prefixe au sens.
Un lucru de reținut pe măsură ce planificați aceste interacțiuni este că dispozitivele touch screen nu au o stare "hover", astfel încât aceste efecte sunt adesea pierdute pentru oricine care utilizează un dispozitiv cu ecran tactil ca un telefon mobil. Tranziția se va întâmpla adesea, dar se întâmplă atât de repede încât într-adevăr nu se poate vedea. Acest lucru este bine dacă adăugați acest lucru ca pe un efect bonus frumos, dar evitați orice modificări care trebuie să fie văzute pentru ca conținutul să fie înțeles.
Fading Out este posibilă prea
Nu trebuie să începeți cu o imagine decolorată, aveți posibilitatea să utilizați tranzițiile și opacitatea pentru a ieși dintr-o imagine complet opacă. Folosind aceeași imagine, numai cu o clasă de fadeout:
class = "withfadeout">
La fel ca înainte, schimbați opacitatea cu ajutorul selectorului: hover:
.withfadeout {
-webkit-transition: toate 2s ease-in-out;
-moz-tranziție: toate 2s ușurință-în-out;
-ms-transition: toate 2s ease-in-out;
-o-tranziție: toate 2s ușurință în-out;
tranziție: ușurință în ușă;
}
.withfadeout: hover {
-webkit-opacitate: 0,25;
-mozo-opacitate: 0,25;
opacitate: 0,25;
}
În acest exemplu, imaginea va trece de la complet opac la o oarecare transparență - inversul primului nostru exemplu.
Mergând dincolo de imagini
Este excelent că puteți aplica aceste tranziții vizuale și se estompează la imagini, dar nu vă limitați doar la utilizarea imaginilor cu aceste efecte CSS. Puteți face cu ușurință butoane cu stil CSS care se estompează atunci când sunt făcute clic și ținute. Ați seta doar opacitatea folosind: pseudo-clasa activă și puneți tranziția pe clasa care definește butonul. Dați clic și mențineți apăsat acest buton pentru a vedea ce se întâmplă.
Este posibil să se estompeze în mod esențial orice element vizual atunci când se deplasează sau se face clic pe acesta. În acest exemplu schimb opacitatea div și culoarea textului când mouse-ul este peste el. Aici este CSS:
#myDiv {
lățime: 280px;
fundal-culoare: # 557A47;
culoare: #dfdfdf;
padding: 10px;
-webkit-transition: toate 4s ușurință-out 0s;
-moz-tranziție: toate 4s ușurință-out 0s;
-ms-tranziție: toate 4s ușurință-out 0s;
-o-tranziție: toate 4s ușurință-out 0s;
tranziție: toate 4s ușurință-out 0s;
}
#myDiv: hover {
-webkit-opacitate: 0,25;
-mozo-opacitate: 0,25;
opacitate: 0,25;
culoare: # 000;
}
Meniurile de navigare pot beneficia de culoarea fundalului de estompare
În acest meniu simplu de navigare, culoarea de fundal se estompează lent și încet, pe măsură ce deplasez mouse-ul peste elementele de meniu. Aici este HTML:
- Acasă
- CSS3 Tutoriale
- Proprietăți CSS3
Și aici este CSS:
ul # sampleNav {style-list: none; }
ul # sampleNav li {
afișare: inline;
plutește la stânga;
padding: 5px 15px;
margine: 0 5px;
-webkit-transition: all 2s linear;
-moz-tranziție: toate 2s liniar;
-ms-transition: toate 2s liniar;
-o-tranziție: toate cele 2 s lineare;
tranziție: toate liniile 2 s;
}
ul # sampleNav li a {text-decorare: nimic; }
ul # sampleNav li: hover {
fundal-culoare: # DAF197;
}
Suport pentru browser
Așa cum am atins de câteva ori deja, aceste stiluri au un suport foarte bun al browserului, deci ar trebui să vă simțiți liber să le folosiți fără nici o trepidație. Singura excepție este versiunile mult mai vechi ale Internet Explorer, dar cu decizia recentă a Microsoft de a pune capăt suportului pentru toate versiunile IE de mai jos 11, aceste browsere mai vechi devin din ce în ce mai puțin o problemă - și, în mod realist, a se vedea această tranziție decolorare, care nu ar trebui să fie o problemă majoră. Atâta timp cât limitați aceste tipuri de efecte la interacțiuni plăcute și nu vă bazați pe ele pentru a conduce funcționalități sau a dezvălui conținut cheie, atunci browserele mai vechi care nu suportă efectele vor avea o experiență mai puțin plăcută, dar utilizatorii de pe acele browsere nu vor cunoașteți diferența, mai ales dacă aceștia pot folosi site-ul ca normal și pot obține informațiile de care au nevoie.
Extra Fun; Schimbați două imagini
Iată un exemplu despre cum să decolorezi o imagine în alta. Utilizați codul HTML:
Și CSS care face unul transparent, în timp ce celălalt este complet opac și apoi tranziția schimbă cele două:
.exapMe img {-webkit-transition: all 1s easy-in-out; -moz-tranziție: toate 1s ușurință-în-out; -ms-transition: toate 1s ease-in-out; -o-tranziție: toate 1s ușurință-în-out; tranziție: toate 1s ușurință-în-out; } .swap1, .swapMe: hover .swap2 {-webkit-opacitate: 1; -moz-opacitate: 1; opacitate: 1; } .swapMe: hover .swap1, .swap2 {-webkit-opacitate: 0; -moz-opacitate: 0; opacitate: 0; }