Blur effect in different browsers
I'm trying to put a Blur effect on some images of a page. First I saw that Blur does not work (as far as my knowledge goes) in all modern browsers. But since "mission given is mission accomplished" I/we have to figure out a way out of this. I thought of putting a transparent mask (another image) over the image and in this mask I would apply the effect. Since I don't mess with Photoshop and / or image matters, I don't know if it has much logic do that. Does anyone have a solution?
I saw an unfeasible" solution " for me, but only the information Character:
This image duplication, one with Blur and the other does not, complicates. Because the end user who will administer the images. The proposal is to use CSS properties to do so.
I would like to know if there is any effect that resembles Blur and works in the most modern browsers (Firefox, Chrome, IE and Safari).
2 answers
Without using anything but pure CSS and a little imagination... You can overlay the image on itself, in several layers. Make all (except the lower one) a little transparent. Now scroll 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, shifting 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 a pixel in each should give a more comfortable effect to the view. 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 native blur itself.
"(...) The proposal is to use CSS properties to do so. (...)"
If it is only with CSS still not it is possible to create a cross-browser solution. But with a dash of SVG you can get very close.
Here goes 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 line, the property used is the property that should become default soon, but currently only Chrome / Opera and Safari that they accept her.
In the second line we have the property "gambiarra" that microsoft created for IE8 but that still uses its old filter syntax.
In the third row we have the property for older IEs (
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.
Another alternative to not having to use an external file would be to generate a base64 of this SVG file and inject it directly into CSS, so that all your code would be in CSS.
Download blur.svg - send " save as..."because if you click on the link it opens a blank window (since the code is pure SVG)
