Creating a blurred header using SVG blur filter and CSS3



Hello everyone, in this article I will go over some of the details of the following codepen demo where I created a header by using the SVG Blur filter.

See the Pen SVG blurred header by Creative Punch (@CreativePunch) on CodePen.

The source code is readily available from the demo widget above so I will go over some of the specifics for creating this header.

First of all we need to make sure our header image stays centered even if the screen size is smaller than the image. We can do this by first making sure any horizontal overflow is off:

html, body {
  overflow-x: hidden;
  height: 100%;
}

Next we will need a container div that is centered by using margin: 0 auto. However this container will only be 1px in width, so it serves more as a guideline than a container.

#header-positioner {
  width: 1px;
  height: 460px;
  display: block;
  margin: 0 auto;
  position: relative;
}

We also have set the position to relative so we can position our SVG image relatively to the positioning div.



#header-svg {
  width: 1920px;
  position: absolute;
  right: -960px;
  display: block;
  height: 460px;
}

We will place our SVG code inside of the positioning element.

<svg xmlns="http://www.w3.org/2000/svg" 
           xmlns:xlink="http://www.w3.org/1999/xlink"
           xmlns:svg="http://www.w3.org/2000/svg"
           id="header-svg">
        <defs>
          <filter id="f1">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
          </filter>
        </defs>
        <image xlink:href="http://lorempixel.com/output/food-q-c-1920-460-4.jpg" 
               x="0" 
               y="0" 
               height="460" 
               width="1920"
               filter="url(#f1)"/>
</svg>

As you can see we use the filter tag to define the blur effect. the stdDeviation is the strength of the blur.

We also add an image element in our SVG which will be the image we want to blur.

This is of course less efficient than using Photoshop, however it does save you time when you switch out images or want to enable an end-user to easily change them.

It also generates a bit of a transparent border around the image. This is the reason why it is smart to place your menu slightly over the bottom of the image. Aside from that we also use some CSS3 to add a text shadow, box shadow, and make the h1’s background semi-transparent.

I hope you enjoyed this demo! Feel free to share this article on your favorite social media and be sure to check back for more.

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+4Share on StumbleUpon121Share on Reddit0Share on LinkedIn1Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!