There is a new and improved version of the solution on this page.
Unfortunately, CSS3 does not provide means for creating blur effects out of the box, however we can easily emulate Gaussian Blur by using text-shadow and setting the color of the element to transparent:
The following markup:
<p>Lorem ipsum dolor sit amet...</p>
…And this CSS:
p
{
text-shadow: 0 0 8px #000;
color: transparent;
/* other properties */
}
… Will produce this:
… And we can use it to add cool a lá Vista and Windows 7 blur effects to our Web 2.0 dialog boxes as you shown below:
A few notes:
You can control the smoothing of the blur via the spread value of the text-shadow property (in our example it is set to 8 pixels).
Internet Explorer 5.5-8 does not have native support for RGBA colors, but you can use the properietary gradient filter to emulate RGBA:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
On the other hand, in IE you do not have to emulate Gaussian blur, because it supports it since version 5.5 – again via the proprietary blur filter:
filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";
The demo does not work properly with Opera, because that browser does not seem to support RGBA colors applied to elements that have a position different than static, however with a different setup it can be put to work. IE6 and IE7 fail to execute the blur filter, because it is applied to a relatively positioned element (yes, that’s the weird CSS hack for stopping the propagation of transparency from parent to child elements), but again – this can be solved with a different setup, markup and CSS.
The entire example is available on this page, or you can download it straight away from this link. Find more experiments here.
Merry Christmas and a Happy New Year everyone!
Related Posts
[...] Vía | Martin Ivanov [...]
[...] Martin Ivanov. Posts Relacionados:Validando un Email con PHP usando [...]
Thank you so much!! I have a semitransparent modal sheet that slides down over my content, and I was just about to make it opaque (due to text behind it interfering), but this makes a great illusion of blur!
[...] Creating a Gaussian Blur Effect with CSS3 – this strategy manipulates the text-shadow property of CSS3 to blur a block of text, which can be useful when creating custom lightbox modules. [...]
Great and useful article:)
Thanks a lot! I am glad you find it useful.
[...] Creating a Gaussian Blur Effect With CSS3 « Martin Ivanov | CSS3, HTML5, JavaScript, AJAX and More The entire example is available on this page , or you can download it straight away from this link . Find more experiments here . Merry Christmas and a Happy New Year everyone! The demo does not work properly with Opera, because that browser does not seem to support RGBA colors applied to elements that have a position different than static, however with a different setup it can be put to work. IE6 and IE7 fail to execute the blur filter, because it is applied to a relatively positioned element (yes, that’s the weird CSS hack for stopping the propagation of transparency from parent to child elements), but again – this can be solved with a different setup, markup and CSS. [...]
работает в опере если color:rgba(0,0,0,0)
Does this work with images too?
No, unfortunately it cannot be applied to images.
[...] Creating Gaussian Blur Effect With CSS3 [...]
[...] Creating Gaussian Blur Effect With CSS3 [...]
[...] Creating a Gaussian Blur Effect With CSS3 [...]
[...] Creating Gaussian Blur Effect With CSS3 [...]
[...] Creating Gaussian Blur Effect With CSS3 [...]
[...] Creating Gaussian Blur Effect With CSS3 [...]
[...] Creating Gaussian Blur Effect With CSS3 [...]
[...] case you have used my previous solution for blurring elements with CSS, here’s a revised and improved version with added support for [...]