How to add a Gaussian Blur effect to elements within firefox

I have been trying to find an easy, efficient way of applying a Gaussian blur effect to images and elements. I would usually achieve this by creating the image with the Gaussian Blur effect already applied. I wouldn’t say this is efficient at all. It is about as efficient as creating rounded corners using images.

One of the ways to apply a Gaussian blur to elements and images is by making use of the svg filters. It can be applied to any element or image just by adding a bit of code to the HTML and specifying which element you would like to target within the CSS.

The HTML

‘ xmlns:svg=”http://www.w3.org/2000/svg” ‘ must be added to the <html> tag. A working example would look like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

This allows Firefox to make use of the SVG filters.
We also have to add one last bit of HTML to get this thing working.

<body>
	<p>Pellentesque habitant morbi tristique senectus</p>
	<img src="images/gaussian-blur.png" alt="" />

	<svg:svg>

		<!-- Filter ID/Name -->
		<svg:filter id="example-one">

			<!-- Amount of Gaussian Blur that should be applied -->
			<svg:feGaussianBlur stdDeviation="0.9"/>

		</svg:filter>
		<svg:filter id="example-two">
			<svg:feGaussianBlur stdDeviation="2"/>
   		 </svg:filter>
	</svg:svg>
</body>

The CSS

The CSS is quite simple and easy to implement. (This must be an INTERNAL stylesheet. – It does not work if it is external, for some reason)

<style type="text/css">

	p { filter:url(#example-one); }
	img:hover, p:hover { filter:url(#example-two); }

</style>

The ID that the url refers to is the ID we set within the svg html section.

!important

Any problems? – In short, yes. In long, yes.
There are quite a few problems and little annoyances I have come across. Here is a list (There are probably more that I haven’t come across):

  • The filter only works in Firefox
  • The filter only works if the file extension is .xhtml
  • IE doesn’t seem to open .xhtml file extensions, it automatically attempts to download it.
  • An internal style sheet HAS to be used in order for the svg filter to take effect.
  • jQuery doesn’t seem to work properly with .xhtml file extensions. Certain methods that I tried, worked – css(), animate() – and other methods didn’t – html(), prepend(), append().
  • The HTML doesn’t validate. Adding the html via jQuery in order to achieve validation doesn’t work since the methods I used to achieve this didn’t work within the .xhtml file

Conclusion

I think the effect is very cool and I have fun playing around with it, but I would never use this on an actual web page since there are just too many quirks. For the moment, I think I will stick to images.
If you are interested in applying clip-paths, filters and/or masks within webpages, or if you would just like more information regarding the Gaussian Blur, have a look weblogs.mozillazine.

Any questions or comments?

  1. Aurium says:

    hi Jamy,

    You can add elements from other XML namespaces dynamically with createElementNS(NS,Tag) in a *.html file. 😉

    See that test with dynamic SVG:
    http://wiki.colivre.net/Aurium/SvgAndXhtml

  2. The file doesn’t have to have an .xhtml extension, only be served up with the application/xhtml+xml mime type, although if you’re testing without a web server that can give this mime type, you will need that extension, but that’s only for local testing. This should avoid the problem with IE wanting to download the file.

    As for the JQuery methods you were trying to use, they are all for HTML, not XML, which is what this effectively becomes when you add inline SVG and serve the correct mime-type.

    Lastly, it should validate if you get the doctype right. Have you tried serving it up with an HTML5 doctype?

    1. Jamy Golden says:

      Awesome! Thanks a lot Ashley.
      No I haven’t tried it with an HTML5 doctype. I haven’t actually looked at this for a very long time. Last year Chris Coyier had a “May maintenance month” and I think I’m going to fix up articles like this in May and get them up to date.

  3. mahpooya says:

    Hello
    How can i use this effect to create transparent dialog box with gaussian blur like windows 7 aero?

    1. Jamy Golden says:

      Hey. It is kind of possible, but it requires much more work than just a quick blur filter, and I think it may only work in firefox.

      You could use the element CSS function as a background for whatever you are blurring and position it with javascript somehow. I think this will be a bit of a mission and I think may only work in Firefox.

      Short answer: It would be worth your while assuming you can’t do that just yet.

  4. Ahmad says:

    Doesn’t work in aspx file ?!