CSS‘in internet için çok büyük bir nimet olduğunu daha önceden söylemiştik. Ancak her şeyin karşılığını bulamıyorduk. Örneğin bir resme “blur” yani “soldurma” efekti vermek istesek bunu yapamazdık. Ancak CSS 3 ile buda artık mümkün, css “-blur” kodu sayesinde bunuda basitçe yapabiliriz.

Örnek verecek olursak aşağıdaki resimde bir tarafda normal resim varken diğer tarafda blur uygulanmış resim yer almaktadır.

img {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}


Burada ise resmi tamamen grileştirmeye yarayan blur kodu sayesinde işlem gerçekleştirdik.


img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}


Ayrıntılı bilgi için: http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/
Kaynak: http://erenkeskin.com/css-3-resme-blur-efekti-verme/