SVG blurred header

In this example below you will see how to do a SVG blurred header with some HTML / CSS and Javascript

This demo takes an image and places it inside of an SVG to blur it. CSS is used to center it and create a menu.

Thumbnail
This awesome code was written by CreativePunch, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright CreativePunch ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG blurred header</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(https://fonts.googleapis.com/css?family=Nixie+One);

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

body {
  background-color: #F1F1F1;
}

#h1-bg {
  position: relative;
  margin-bottom: -100px;
  height: 100px;
  width: 100%;
  top: 300px;
  background-color: rgba(0,0,0,0.4);
  display: block;
  z-index: 1;
}

#h1-bg h1 {
  font-family: Helvetica, Arial, Sans-Serif;
  font-family: 'Nixie One';
  Font-size: 75px;
  font-smoothing: subpixel-antialiased;
  color: #ccc;
  text-shadow: 0 1px 3px black;
  text-align: center;
  z-index: 1;
  line-height: 90px;
}

#h1-bg h1 a {
  color: #9CF;
  text-decoration: none;
}

#main-header nav {
  width: 100%;
  background-color: white;
  height: 60px;
  position: relative;
  top: -60px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);  
}

#main-header nav ul {
  text-align: center;
}

#main-header nav ul li {
  display: inline-block;
  line-height: 60px;
  margin: 0 20px;
}

#main-header nav ul li a {
  color: #555;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  font-size: 30px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  font-weight: 700;
  -webkit-font-smoothing: subpixel-antialiased;
}

#main-header nav ul li:hover a {
  color: #39D;
}

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

#header-svg {
  width: 2000px;
  position: absolute;
  right: -1000px;
  top: -40px;
  display: block;
  height: 460px;
}

#main {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  top: -30px;
  padding: 30px;
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <body>
  <header id="main-header">
    <div id="h1-bg">
      <h1 id="author">Demo by <a href="http://creative-punch.net/">Creative Punch</a></h1>
    </div>
    <div id="header-positioner">
      <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://hdwallres.com/wp-content/uploads/2013/12/beach-goa-full-HD-picture-wallpaper.jpg" 
               x="0" 
               y="0" 
               height="1440" 
               width="2560"
               filter="url(#f1)"/>
      </svg>
    </div>
    <nav>
      <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">lorem</a></li>
        <li><a href="#">ipsum</a></li>
        <li><a href="#">dolor</a></li>
      </ul>
    </nav>
  </header>
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/CreativePunch/svg-blurred-header-spxjA */
@import url(https://fonts.googleapis.com/css?family=Nixie+One);

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

body {
  background-color: #F1F1F1;
}

#h1-bg {
  position: relative;
  margin-bottom: -100px;
  height: 100px;
  width: 100%;
  top: 300px;
  background-color: rgba(0,0,0,0.4);
  display: block;
  z-index: 1;
}

#h1-bg h1 {
  font-family: Helvetica, Arial, Sans-Serif;
  font-family: 'Nixie One';
  Font-size: 75px;
  font-smoothing: subpixel-antialiased;
  color: #ccc;
  text-shadow: 0 1px 3px black;
  text-align: center;
  z-index: 1;
  line-height: 90px;
}

#h1-bg h1 a {
  color: #9CF;
  text-decoration: none;
}

#main-header nav {
  width: 100%;
  background-color: white;
  height: 60px;
  position: relative;
  top: -60px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);  
}

#main-header nav ul {
  text-align: center;
}

#main-header nav ul li {
  display: inline-block;
  line-height: 60px;
  margin: 0 20px;
}

#main-header nav ul li a {
  color: #555;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  font-size: 30px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  font-weight: 700;
  -webkit-font-smoothing: subpixel-antialiased;
}

#main-header nav ul li:hover a {
  color: #39D;
}

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

#header-svg {
  width: 2000px;
  position: absolute;
  right: -1000px;
  top: -40px;
  display: block;
  height: 460px;
}

#main {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  top: -30px;
  padding: 30px;
}

Comments