Webkit blur with transparent background
In CSS3, I can easily blur anything with this:
-webkit-filter: blur(5px);
-moz-filter: ...
Right now, I am trying to create a draggable circle on top of text so that anything inside the area of that circle will be blurred:
position:absolute;
-webkit-filter: blur(3px);
background: rgba(255, 255, 255, .3);
This technically should work, but this is what I see instead:
It looks buggy, and the most important part is that the text inside the semi-transparent circle is not blurred. Is there a way to fix it with CSS or JavaScript?
The example: http://jsfiddle.net/hSpHd/
The problem is that there is no suport for masking a filter. That is, the filter is applied to all the element. One workaround for this limitation is to have 2 elements, apply the filter to one, and mask it to transparency. Then you have the second (identical) element showing, unfiltered.
The CSS would be:
#one, #two {
position: absolute;
width: 200px;
height: 400px;
font-size: 18px;
}
#one {
top: 20px;
left: 20px;
background: radial-gradient(circle, white 40px, lightblue 45px, transparent 50px);
background-position: -20px -20px;
}
#two {
top: 0px;
left: 0px;
-webkit-filter: blur(2px);
-webkit-mask-position: -20px -20px;
-webkit-mask-size: 200px 400px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 32px, rgba(0, 0, 0, 0) 38px);
background-color: white;
}
abd the HTML is
<div id="one">Lorem ipsum ...
<div id="two">Lorem ipsum ....
</div>
</div>
that is 2 div nested, and with the same content.
Fiddle
Things that I don't like about that:
You need 2 divs with the same content.
You need to synchronize the mask position (in div 2) with the background position (in div1). You could set the circle in div 2 and maybe move everything at the same time, but then the circle is blurred.
But it's a start :-)
BTW, I have used everywhere the latest syntax of gradients. Since you are limited in compatibility from the beginning, I don't think you should care.