Experimenting with CSS3 SVG filters: blur #

August 4 2011

For the past couple of weeks I’ve been experimenting with the new version of the pmworks website. After some major refocus internally—we’re actually relaunching as an R&D— we finally have some time to implement the new re-branded website (which non-HTML5 enabled browsers can’t run).

Trying the latest (now “mainstream-edge”) tech we want to focus potential users experience as much as possible to find the information they’re looking for. This is why the CSS3 SVG blur filter. Leave sharp the information they select, and blurry the rest of the page information. The svg filters are implemented only by Firefox 3.5+.

Enter the SVG

Consider this bit of SVG effect:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" class="tohide">
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="1" />
        </filter>
    </defs>
</svg>

Notice the 1st line, this is an external SVG file. The most important thing in the code above is the id property of the filter. That id will be used in the CSS below as a reference to the filter to apply.

CSS3 with SVG blur filter (the text in the example is actually canvas)

CSS3 with SVG blur filter (the text in the example is actually canvas)

 

In CSS we’ll apply the filter by:

#wrapper:hover section.identity {filter:url(blur.svg#blur);}

Since I’ve made this post in a hurry, and don’t have time to strip the HTML and CSS to the essentials, consider having a look at the css3 with svg blur example live (Works only on Firefox; that is a working proof of concept for the upcoming blurry.js library).

Blurry.js is a canvas-based lib written in CoffeeScript to achieve this effects in all modern HTML5 browsers.

  • Sorry

    Looks like there are not comments here. If you want to say something, use the form below.

  • Insert your comment using the form on the right