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 other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

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

blur is similar to the Gaussian Blur filter in ; its presence in CSS and SVG means we can now achieve the same effects natively on the web.

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. To counteract that, effect blur is often combined with an “undo” transition, which I’ll also demonstrate in this article.

First, 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);
	filter: blur(3px);
}

The SVG blur filter

To this point the blur effect will work in Chrome, Safari (mobile and desktop) and Firefox 35+. To gain support for earlier 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 changes to:

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

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: url(blur.svg#blur);
	-webkit-filter: blur(3px);
	filter: blur(3px);
	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 during mouseover via a :hover. (You can see this effect in the header image at the top of this article).


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

Hovering over the blurred image in a non-IE browser you'll see that it is sharpened over time due to a transition.

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 with its surroundings. If you want the image to be blurred only in the inside, 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).

Wrap the image in a containing element (a <div>, for example) that is slightly smaller than the image, apply overflow: hidden to the outer element and move 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 address in the next article.

Photograph by Khalil Shah.

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.