noi stiluri introduse în CSS3 le-a oferit profesioniștilor web posibilitatea de a adăuga efecte de tip Photoshop pe paginile lor. Un efect vizual pe care îl puteți adăuga folosind CSS3 este de a face paginile web interactive prin crearea unor zone decolorate care se concentrează atunci când un vizitator al site-ului face ceva, cum ar fi să treceți peste acel element. Acest efect folosește o combinație de opacitate și tranziție.
Schimbați opacitatea pe Hover
Un element interactiv este acela de a schimba opacitatea unei imagini atunci când un client trece peste acel element. Pentru acest exemplu (codul HTML este prezentat mai jos), folosim o imagine cu atributul clasei de greydout.
Pentru a face gri, adăugați următoarele reguli de stil în foaia de stil CSS:
.greydout {
-webkit-opacitate: 0,25;
-moz-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ă. Complet opac, fără transparență, ar fi de 100%, în timp ce 0% ar fi complet transparent.
Apoi, pentru ca imaginea să devină clară (sau mai precis, pentru a deveni complet opacă) atunci când mouse-ul se deplasează deasupra ei, ați adăuga următoarele:
.greydout: hover {
-webkit-opacitate: 1;
-moz-opacitate: 1;
opacitate: 1;
}
Mai multe ajustări ale opacității
Veți observa că, pentru aceste exemple, utilizăm versiunile prefixate de furnizor ale regulii pentru a asigura compatibilitatea cu versiunile anterioare ale browserelor respective. Deși aceasta este o practică bună, regula opacității este bine susținută de browsere, și este sigur să renunțați la acele linii prefixate de furnizor.
Totuși, nu există niciun motiv pentru a nu include aceste prefixe dacă doriți să asigurați suport pentru versiunile mai vechi ale browserului. Doar asigurați-vă că urmați cele mai bune practici acceptate de a încheia declarația cu versiunea normală, fără prefix a stilului.
Când este implementat pe un site, această ajustare a opacității este o schimbare bruscă. În primul rând, este gri și apoi nu, fără stări intermediare între cele două. Este ca un întrerupător de lumină - pornit sau oprit. Poate că asta doriți, dar poate doriți să experimentați o schimbare mai graduală.
Pentru a adăuga un efect frumos și a face această estompare treptată, adăugați tranziție proprietate:
.greydout
clasă: .greydout {
-webkit-opacitate: 0,25;
-moz-opacitate: 0,25;
opacitate: 0,25;
-webkit-tranziție: toate 3s ușurință;
-moz-tranzitie: toate 3s usurinta;
-ms-tranzitie: toate 3s usurinta;
-o-tranziție: toate cele 3s ușurează;
tranziție: toate 3s ușurează;
}