demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Three-quarter profile of Pakistani woman in black dupatta Three-quarter profile of Pakistani woman in black dupatta

Cross-browser Image Blur with CSS

css / filters

Estimated reading time: 3 minutes, 6 seconds

In this article I’ll show how to blur photographs using and in modern , with the usual caveats: the techniques I’ll demonstrate will work on all browsers, but only recent versions.

blur is similar to the Gaussian Blur filter in ; its inclusion in CSS3 and SVG means we can now achieve the same effects natively in the browser (for this example, using an image by Khalil Shah).

One design caution: if used incorrectly or too frequently, blur may make your users feel that they are visiting your site after a week-long bacchanal, quickly producing a headache. Blur is often combined with a mouse rollover detection that undoes the effect, which I’ll also demonstrate in this article.

As before, we’ll apply the easiest version first: the new CSS3 filter. Before that, our content:

<img src="pakistani-woman.jpg" alt="Three-quarter profile photograph of Pakistani woman in black dupatta" class=blur>

Then the blur effect, applied via a class:

img.blur { width:367; height:459px; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); }

The SVG blur filter

To add in support for current versions of Firefox, we need to apply an SVG filter:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3" />
  </filter>
</svg>

Saved as a file called blur.svg, our CSS then changes to:

img.blur { width:367; height:459px;
filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
-o-filter: blur(3px); -ms-filter: blur(3px);
filter: url(blur.svg#blur); }

Building support for older versions of IE

To gain the same effect in IE 4 – 9, we have to use the old DX Microsoft filter. Our class becomes:

img.blur { width:367; height:459px;
filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
 -o-filter: blur(3px); -ms-filter: blur(3px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); }

Turning off the effect

If you want to focus the image, you must negate the filter in a new declaration. In this case, I’ll reverse the filter on the image during mouseover via a :hover. (You can see this effect in the header image at the top of this article).

img.blur:focus { filter: none; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); }

If you’re on Chrome, you can see that the image is sharpened over time, the technique for which I will talk about in a future article.

Trimming the edges of the image

One issue is that unlike the we’ve looked at so far, blur takes effect outside the immediate confines of the element, blurring the edges of the image by the amount specified in the blur value. If you want to achieve the effect of having the blur appear only inside the image, there are a few possible techniques:

  1. If you have an image that has the same color on all the outside edges, as in the example above, you could set the background-color of the body or a container element to the same color.

  2. Use the clip property to trim the edges of the image. clip is always stated in the following order:

    clip: rect( top, offset of right clip from left side, offset of bottom from top, left)

    For the example above, the image is 367px wide × 459 pixels high and the blur 2 pixels, so the clip would be stated as:

    clip: rect(2px,365px,457px,2px);

    (Note that clip is only applied to elements that have position: absolute applied to them. If you wanted to gain support in IE8 and earlier, remember to drop the px on the end of the values).

  3. Wrap the image in a containing element (a <div>, for example) that is slightly smaller than the image, applying overflow: hidden to the outer element and moving the image to the left and up slightly to eliminate the visible blur on those edges.

Blurring Text

While you can use this filter to blur text, there are better alternatives, which I discuss in Blurring Text WIth CSS. Play with this code on CodePen.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.