CodePen

HTML

            
              <p>Reade about it on <a href="http://css-tricks.com/blurry-transparent-header-effect-ios7-css/">CSS-Tricks</a> (this pen was updated after I wrote the article)</p>
<p>enable 'experimental-webkit-features'/'enable-experimental-web-platform-features'</p>

  <div class="phone">
    <div class="phone__display">
      <!-- .header>.header__text+.header__tint+.header__background -->
      <div class="blurred header">
        <div class="header__text">Header</div>
        <div class="blurred__background js-header__background"></div>
      </div>
      <div class="phone__content"></div>
      <div class="blurred footer">
        <ul class="footer__container">
          <li class="entypo-left-open-big"></li>
          <li class="entypo-right-open-big"></li>
          <li class="spacer"></li><!-- This is bad-->
          <li class="entypo-down-open-big"></li>
          <li class="entypo-up-open-big"></li>
        </ul>
        <div class="blurred__background"></div>
      </div>
    </div>
  </div>


  <!-- The content will be here -->
  <div class="content">
    <ol class="messages">
      <li>
        <p>Praesent porttitor nisl vel enim consectetur, vitae dictum ipsum condimentum.</p>
      </li>
      <li>
        <p>Sed convallis lorem non augue lobortis tincidunt.</p>
      </li>
      <li>
        <img src="http://lorempixel.com/200/300/nature/" alt=""/>
      </li>
      <li>
        <p>Mauris viverra lacus et justo accumsan, et lobortis eros adipiscing.</p>
      </li>
      <li>
        <p>Integer dignissim metus id arcu pretium, ultrices tristique dolor vulputate.</p>
      </li>
      <li>
        <p>Sed ultricies tortor sagittis sapien dapibus commodo.</p>
      </li>
      <li>
        <p>Morbi nec erat sit amet dui aliquet pretium.</p>
      </li>
      <li>
        <img src="http://lorempixel.com/200/250/nature/" alt=""/>
      </li>
      <li>
        <p>Mauris viverra lacus et justo accumsan, et lobortis eros adipiscing.</p>
      </li>
      <li>
        <p>Integer eget nisi euismod, fermentum ligula eget, faucibus nibh.</p>
      </li>
      <li>
        <p>Sed ultricies tortor sagittis sapien dapibus commodo.</p>
      </li>
      <li>
        <p>Morbi nec erat sit amet dui aliquet pretium.</p>
      </li>
      <li>
        <p>Praesent porttitor nisl vel enim consectetur, vitae dictum ipsum condimentum.</p>
      </li>
      <li>
        <p>Sed convallis lorem non augue lobortis tincidunt.</p>
      </li>
      <li>
        <p>Praesent porttitor nisl vel enim consectetur, vitae dictum ipsum condimentum.</p>
      </li>
      <li>
        <p>Sed convallis lorem non augue lobortis tincidunt.</p>
      </li>
      <li>
        <img src="http://lorempixel.com/200/310/nature/" alt=""/>
      </li>
      <li>
        <p>Mauris viverra lacus et justo accumsan, et lobortis eros adipiscing.</p>
      </li>
      <li>
        <p>Integer dignissim metus id arcu pretium, ultrices tristique dolor vulputate.</p>
      </li>
      <li>
        <p>Sed ultricies tortor sagittis sapien dapibus commodo.</p>
      </li>
      <li>
        <p>Morbi nec erat sit amet dui aliquet pretium.</p>
      </li>
      <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </li>
      <li>
        <p>Voluptatibus, aperiam tempore iusto est voluptate eius autem!</p>
      </li>
      <li>
        <p>Et molestiae non esse mollitia delectus blanditiis magni.</p>
      </li>
      <li>
        <p>Aliquam corrupti laboriosam placeat expedita in iure hic?</p>
      </li>
      <li>
        <p>Vel, molestias eligendi accusamus aliquid voluptates repellendus nostrum.</p>
      </li>
    </ol>
  </div>
            
          
!
via HTML Inspector

CSS

            
              @import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
%content{
  box-sizing:border-box;

  /* Not covered by autoprefixer... */
  -webkit-flow-into: content;
          flow-into: content;   // Define the flow (CSS Region)


  // Make it scrollable on the y-axis
  overflow-y:auto;


}

// Header section, blur can be applyed here.
%contentFlow{
  // Performance!
  transform:translateZ(0);

  overflow:hidden;

  /* Not covered by autoprefixer... */
  -webkit-flow-from: content;
          flow-from: content;
}


@mixin setContentHeight($content-height, $header-height){
  height: $content-height;
  // Move the content beneth the header
  padding-top: $header-height;
}

$header-height : 60px;
$footer-height : 45px;
$content-height: 567px;


.content{
  @extend %content;
  padding:1em 1em 0 1em;
  // Apply the sizing to this content
  @include setContentHeight($content-height + $header-height + $footer-height, $header-height);
}

  .messages {
    margin:10px 0;
    padding:0;
    list-style-type:none;
  }

  .messages li {
    display:block;
    float:left;
    clear:both;
    max-width:60%;
    margin:0 0 1em 0;
    padding:0;
  }

  .messages li:nth-child(even) {
    float:right;
  }

  .messages li:nth-child(even) img {
    float:right;
  }

  .messages p {
    border-radius:.75em;
    background:#e6e5eb;
    color:#383641;
    padding:.6875em;
    margin:0;
    font-size:.875em;
  }

  .messages li:nth-child(even) p {
    background:#158ffe;
    color:#fff;
  }

  .messages img {
    display:block;
    max-width:65%;
    border-radius:.75rem;
  }


.phone{
  position:relative;
  width: 509px;
  height: 931px;
  margin:0 auto;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/315/phone.png);
}

  .phone__display{
    position:absolute;
    top:182px;
    left:95px;
    height:$content-height;
    width:319px;
  }

    .blurred{
      position:relative;
      height:$header-height;
    }

    %blurred__sub{
      position:absolute;
      top:0;left:0;right:0;
      height:inherit;
    }

    .blurred__background{
      @extend %blurred__sub;
      @extend %contentFlow;
      filter:blur(10px); // Blur it
      -webkit-filter:blur(10px); // Blur it
      opacity:.2;
    }

    .header{
      &:before,
      &:after{
        position:absolute;
        content:'';
        width:100%;
        z-index:1;
      }

      &:before{ // Tint Color
        height:100%;
      }

      &:after{  // Bottom Shadow
        height:1px;
        bottom:0;
        box-shadow: 0 1px 0 rgba(0,0,0,.1);
      }
    }

    .header__text{
      @extend %blurred__sub;
      font-weight:300;

      text-align:center;
      line-height:$header-height;
      z-index:4;
    }


    .footer{
      position:relative;
      height:$footer-height;

      &:before,
      &:after{
        position:absolute;
        content:'';
        width:100%;
        z-index:1;
      }

      &:before{ // Tint Color
        height:100%;
      }

      &:after{  // Bottom Shadow
        height:1px;
        top:0;
        box-shadow: 0 -1px 0 rgba(0,0,0,.1);
      }
    }

      .footer__container{
        @extend %blurred__sub;
        list-style:none;
        margin:0 1.2em;
        padding:0;
        letter-spacing:1.5em;
        > li {
          display:inline-block;
          line-height:$footer-height;
          font-size:1.5em;
        }
        .spacer{
          width:.22em;
        }
      }

  .phone__content{
    @extend %contentFlow;
    height:$content-height - ($header-height + $footer-height);
  }


// General page styles
body{
  font-family:"Helvetica Neue","Helvetica","sans-serif";
}

.custom{
  position:absolute;
  top:10px;

  style{
    display:block;
    white-space:pre;
  }
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              window.onload = function() {

  var sheet = (function() {
    var style = document.createElement("style");
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
    return style.sheet;
  })();

  // Add a new rule
  sheet.addRule('.header:before', 'background-color:none');

  var headerBackgroundNode = document.querySelector('.js-header__background'),
      headerTintRule       = sheet.cssRules[0];


  var updateHeaderTintColor = function(color){
    color = 'rgba('+color.map(function(i, dex){return (dex !== 3) ? Math.round(i) : i;}).join(',')+')';
    headerTintRule.style.backgroundColor = color;
  };

  var updateHeaderBlur = function(blur){
    headerBackgroundNode.style.webkitFilter = 'blur('+blur+'px)';
  };

  var updateHeaderOpacity = function(opacity){
    headerBackgroundNode.style.opacity = opacity;
  };

  var options = {
    headerTint : {
      color   : [ 255, 255, 255, 0.1 ], // Shared with SCSS! Keep in mind
      opacity : 0.1
    },
    headerBlur : {
      blur    : 0,
      opacity : 0.1
    },
    custom : {
      preset : '',
      filter : ''
    }
  };

  var gui = new dat.GUI();

  var headerTint = gui.addFolder('Header tint');

      headerTint.addColor(options.headerTint, 'color').onChange(updateHeaderTintColor).listen();

      headerTint.add(options.headerTint, 'opacity', 0, 1).step(0.1).onChange(function(opacity){
        options.headerTint.color[3] = Math.round(opacity*10)/10;
        updateHeaderTintColor(options.headerTint.color);
      });

      headerTint.open();

  var headerBlur = gui.addFolder('Header blur');

      headerBlur.add(options.headerBlur, 'blur',0, 20).onChange(updateHeaderBlur);

      headerBlur.add(options.headerBlur, 'opacity', 0, 1).step(0.1).onChange(updateHeaderOpacity);


      headerBlur.open();

  var headerCustom = gui.addFolder('Custom filter:');

      headerCustom.add(options.custom, 'preset', [ '', 'invert(1)', 'hue-rotate(90deg)', 'grayscale(100%)' ]).onChange(function(change){
        headerBackgroundNode.style.webkitFilter = change;
      });

      headerCustom.add(options.custom, 'filter').onChange(function(change){
        headerBackgroundNode.style.webkitFilter = change;
      });

      headerCustom.open();
  // Fix dat.gui bug https://code.google.com/p/dat-gui/issues/detail?id=11
  var cInput = document.querySelector('.c input');
      cInput.disabled = true;

};

// Activate scrolling on iOS7 (Don't know why this is working)
document.addEventListener('touchstart', function(){});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................