Efectul "sticlei mată" cu ajutorul filtrelor css

Școala veche: efectul "sticlei mată" asupra imaginilor

Aspectul este relativ simplu. Un articol care conține conținut.

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

CSS de mai sus va crea o suprapunere neclară și evidențiată. De asemenea, trebuie să-l mutăm în partea de jos a paginii, lăsând spațiu suficient pentru ca textul antetului să fie vizibil. Întrucât o imagine neclară este un copil al suprapunerii, atunci, în plus, trebuie să o deplasați până la dimensiunea opusă astfel încât să rămână aliniată față de corpul de fundal. Deoarece există tranziții în demo, am decis să folosesc transformările CSS, mai degrabă decât proprietatea de atașament de fundal, deoarece transformările CSS pot fi accelerate prin hardware.

notițe

Dacă doriți să înțelegeți mai bine această schemă, am construit o versiune detaliată a efectului. Tehnica de mai sus este foarte simplă și este susținută de un suport puternic pentru browser. Deși am un pic de exemple animate de demo tranziții. toate celelalte proprietăți necesare - conținutul generat. opacitate. conversii și dimensiune de fundal - există suport solid pentru browser până la IE 9 (cu excepția lui OperaMini).

Noua școală: "geam mată" cu filtre

Tehnica de duplicare a imaginilor necesită suportul unei imagini neclare, împreună cu originalul original, care poate fi problematică dacă trebuie să aplicați din nou acest efect mai multor imagini. De exemplu, designul adaptiv pentru diferite dimensiuni ale ecranului va necesita paginarea diferitelor imagini. Alternativ, marcările șablonului le pot furniza în mod dinamic (de exemplu, imagini de antet diferite pentru postări individuale de blog). În astfel de cazuri, trebuie să generați acest efect folosind doar imaginea originală. La urma urmei, noi o ștergem.

Aici este cel mai convenabil să utilizați filtrele CSS. Acestea fac posibilă aplicarea blur-ului deja în browser utilizând proprietatea de filtrare CSS.

Prin impunerea unor „mat“ CSS poate fi modificat, astfel încât acesta a fost aplicat la imaginea originală pentru un filtru de neclaritate.

capcane

Spit o dată, nu? Din nefericire, filtrele CSS sunt invenții prea noi. Aceasta înseamnă că pot avea nevoie de prefixe ale furnizorilor, iar suportul pentru browser nu va fi universal. Cu toate acestea, filtrele au un istoric mai lung de relații cu SVG, iar utilizarea filtrelor SVG la conținutul HTML prin intermediul CSS este susținută de browsere mult mai bine. Ele pot fi adăugate cu ușurință ca o alternativă în care filtrele CSS nu sunt acceptate. De fapt, exemplul de demo de mai sus funcționează la fel.

Pentru a adăuga un filtru SVG, vom include un pic de SVG încorporat în marcajul HTML și vom întoarce la filtru folosind url (). O sugestie profesională: o alternativă la această opțiune este codarea filtrului SVG și referirea la acesta ca un dataurl, dar acest format este puțin mai dificil de citit în articol.

Este posibil ca browserul să nu accepte filtrele CSS sau SVG. În acest caz, utilizatorul va vedea textul pe fondul de fundal (colorat, dar nu neclare), care, de asemenea, nu pare prea slab.