I am wondering if there is some way to apply a gaussian blur onto a div using jQuery (or CSS that jQuery can modify). I have looked into blur(), but at least with Safari, it doesn't seem that it accomplishes what I'm looking for. If possible, I want to use fadeIn on the effect, so it blurs gradually.
Thanks for any help!
Be aware that
Blur is when a DOM-element, such as textboxes (inputs etc.) loses focus, and should not be mixed with the kind of blur you are talking about (gaussian/motion blur).
There is no good cross-browser solution for this problem. You can, however, blur images by using a API such as the one Ben suggests. Or by using this one.
Maybe if you find out a way to draw your div contents to a HTML5 canvas you can then apply the Blur-filter by using Pixastic?
filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: url(blur.svg#blur); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
content of blur.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> </svg>
It has not been mentioned here that we can create an excellent realistic blur effect for text using CSS3
text-shadow. And, (yep, of course!) we can blur solid backgrounds and borders using
box-shadow (inset shadows and multiple shadows are allowed, you know).
So I hope in most cases you can achieve a realistic blur effect combining:
1) image blur using canvas
2) text blur using
3) solid background and borders blur using
4) have I forgotten anything else?....
PS: I believe it's not possible to write a magic class that blurs any html.
The restrictions that can't be overcome: blur the border of the image, blur embedded media
©2020 All rights reserved.