Blur effect on different browsers

Question

I’m trying to put a Blur Effect in some images of a page. From the first I saw that the Blur does not work (as far as I know) in all modern browsers. But since "Mission given is mission accomplished" I have/we have to figure out a way out of this. I thought to put a mask (another image) transparent over the image and in this mask I would apply the effect. As I don’t use Photoshop and/or image subjects, I don’t know if it is logical to do this. Someone has a solution?

I saw a "solution" unfeasible for me, but only the character of information:

Unfeasible example

This image duplication, one with Blur and the other does not, complicates. Because the end user who will manage the images. The proposal is to use CSS properties to do so.

I wonder if there is any effect that resembles Blur and that works in the most modern browsers (Firefox, Chrome, IE and Safari).

Answer 1

Using nothing but pure CSS and a little imagination... You can superimpose the image on itself, in multiple layers. Make all (except the lowest) slightly transparent. Now move each image a little in different directions. This is almost the same as applying a simple softening filter. In other words, Blur :)

A practical example is worth a thousand words, so: http://jsfiddle.net/xG6bb/190/

Note that I used four semi-transparent layers, moving up, left, right and down. You can put four more on the diagonals to make the softening smoother in the corners. Note also that the offset I made is two pixels in each direction. Different values give somewhat different effects.

Edition and P.S.: I believe that eight layers with one pixel in each should give a more comfortable view effect. Note, however, that it can be somewhat brute force to do this with the image, especially if you are going to do this with not one but several of them.

I also recommend doing this only with browsers that do not support Blur. If the browser supports, it is better to use the same native Blur.

Answer 2

"(...) The proposal is to use CSS properties to do so. (...)"

If it’s only with CSS yet nay it is possible to create a cross-browser solution. But with a hint of SVG you can get very close.

Here’s the full code and below I explain:

.blur{
    -webkit-filter:blur(10px); /* Webkit + Blink (Chrome, Safari, etc) */
    -ms-filter:'progid:DXImageTransform.Microsoft.Blur(PixelRadius=10)'; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); /* IE 7 < */
    filter: url(blur-filter.svg#10); /* Firefox */
}

Well, come on:

In the first row, the property used is the property that should become standard soon, but currently only Chrome/Opera and Safari accept it.

In the second line we have the "gambiarra" property that microsoft created for IE8 but still uses its old filter syntax.

In the third row we have the property for older ies (<=7).

And in the fourth line we have the property that takes a filter from an SVG file and throws it into the element, that is, in this case you would need an external file with the filters. I created one that can be called via filter: url(arquivo.svg#força-do-blur where força-do-blur would be a value of 0-100.

An alternative to not having to use an external file would be to generate a Base64 of that SVG file and inject it directly into the CSS, so that all its code stays in the CSS.

Download the Blur.svg - send "save as..." because clicking on the link opens a blank window (since the code is pure SVG)

Example of built-in SVG