De ceva vreme, de cand a intrat pe scena CSS3, tot mai multe efecte se pot realiza fara a utiliza un editor de imagini precum transformarile 3D si border-radius.Una  din piesele lipsa al acestui puzzle este abilitatea de a satura, a estompa sau altfel zis de a satura o imagine in CSS.E, chiar acum de curand, am aflat cu stupoare ca acest lucru e foarte posibil, iar pentru a realiza efectul iti trebuie doar o linie de cod(de fapt mai multe caci fiecare browser si-a adaugat din zel cate-un prefix).

Pentru a rezolva problemele, W3C s-a gandit la filtre.Utilizand filtre, putem adauga efecte nu numai imaginilor ci si textului si elementelor HTML.

Suportul filtrelor

Din pacate, suportul e tare limitat.Totusi, eu, ca bloggaras roman, sper ca in viitorul apropiat, cu noile versiuni de Firefox si IE sa se schimbe lucrurile.Deci prin excludere puteti deduce pe ce browsere merg filtrele CSS:pe Chrome(inca un motiv pentru care acest browser e bun) si Safari sau browsere bazate pe webkit.Din acest moriv trebuie sa utilizam prefixe.Desi sunt numai browsere webkit adaugam si celelalte prefixe caci e o practica mai buna.

[cc lang=”css”]
img {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
[/cc]

 

Totusi, filtrele nu se rezuma numai la asta, cu ele poti sa faci dintr-o imagine full color una alb negru.
[cc lang=”css”]
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
[/cc]

Destul de simplu, nu?Estomparea si filtrele pentru alb-negru sunt doar o parte din cele existente.Va las si eu un site frumos, unde sunt o lista cu filtre.Desi suunt mai mult experimentale, eu zic ca ar putea fi de folos, reducand astfel nevoia de a utiliza zeci de imagini pentru a obtine efectul dorit.

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Send this to a friend