Efectul de transparență pentru imagini când se hover with CSS3
Cum se creează imagini în momentul interacțiunii cu utilizatorul? Adică, este oarecum interesant să selectați o imagine când plasați mouse-ul peste ea.
Soluțiile tehnice pentru această problemă sunt abundente și sunt pictate cu cel mai mic detaliu. Deci nu voi dezvălui nimic nou, dar pur și simplu voi împărți un fragment simplu al codului CSS, pe care îl folosesc adesea în diferite variante.
Pentru a crea un efect atractiv de transparență sau dacă doriți o estompare ușoară a imaginilor atunci când treceți, vom folosi proprietatea minunată de opacitate a clipului CSS3.
Am arătat două variante de utilizare a proprietății de opacitate imediat. În primul caz, claritatea este pornit atunci când indică pe imagine și a doua imagine este inițial afișată cu o ușoară neclaritate și deja atunci când indică la el claritate indusă.
Mi se pare că, pe lângă faptul că nu trebuie să aplic un astfel de efect pentru toate imaginile în vrac, este suficient să creați o clasă separată, pentru a nu fi prea dificilă, de exemplu, clasa .opacitate. atribuiți imaginii dorite și deja în experimentul css cu diferite variații ale aceleiași proprietăți de nume.
Puteți să limitați o singură proprietate de opacitate ajustând nivelul de transparență într-o direcție sau alta sau puteți adăuga o iluzie de tranziție lină folosind proprietatea de tranziție universală cu anumite valori.
În ceea ce privește prima variantă a exemplului în cauză, am folosit următoarele valori:
filtru: alpha nu a scos-o din greșeală, fără această cârpă, IE8 refuză complet să se ocupe de transparență, așa că deocamdată o mulțime de oameni folosesc acest nedobrazer, este de neuitat pentru loțiuni. Același lucru este valabil și în cazul prefixelor pentru proprietatea de tranziție pentru alte browsere, nu există încă un suport uniform pentru standarde, deci pentru fiabilitate specificăm în mod specific)))
În cea de-a doua variantă, contrariul este adevărat, imaginea este afișată în mod prestabilit cu transparența luminii, iar când o plasați pe ea, claritatea este restabilită fără probleme. Acest lucru este realizat, după cum probabil ați ghicit, o simplă permutare a proprietăților:
În exemplul respectiv, pentru cea de-a doua opțiune am atribuit clasa .clarity. după cum spun ei, că primul a luat-o în minte, mai ales în acest aspect nu se închide, aici pe ceea ce este suficientă imaginație, cum veți apela, astfel încât veți lucra))).
Acest lucru pare să fie totul. Cel mai simplu set de proprietăți, un șablon mic de pornire pentru crearea unui alt efect minunat folosind CSS3, sper că va fi util pentru cineva și chiar și memoria în sine este uneori liniștitoare.
Cu sinceritate, Andrew.
Trimiteți-le prietenilor: