Blur effect in different browsers

3

I'm trying to put a Blur Effect in some images on a page. At first I saw that Blur does not work (to my knowledge) in all modern browsers. But as "Mission given is mission accomplished" I have / have to figure out a way out of this. I thought about putting a transparent mask over the image and in this mask I would apply the effect. As no Photoshop mango and / or image issues, I do not know if it's too logical to do this. Does anyone have a solution?

I saw a "solution" not feasible for me, but only the information character:

Unviable example

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

I would like to know if there is an effect that resembles Blur and that works in the most modern browsers (Firefox, Chrome, IE and Safari).

    
asked by anonymous 27.05.2014 / 22:54

2 answers

3

Without using anything but pure CSS and a little imagination ... You can superimpose the image to itself, in multiple layers. Make all (except the lower one) a bit transparent. Now shift each image a little in different directions. This is almost the same as applying a simple filter to break in. In other words, blur :)

A practical example is worth a thousand words, then: link

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

Editing and Q.: I believe that eight layers with one pixel in each should give a more comfortable effect to the view. Note, however, that it may 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, it is better to use the same native blur.

    
28.05.2014 / 00:01
2
  

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

If it is only with CSS, no it is possible to create a cross-browser solution. But with a dash of SVG you can get very close.

Here is the complete 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 line, the property used is the property that should become default soon, but currently only Chrome / Opera and Safari that 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 line we have the property for older IEs (

26.06.2014 / 22:02