iOS 7's blurred overlay effect using CSS?

Question

It is possible with CSS3 :

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

Example here => jsfiddle

You made me want to try, so I did, check out the example here:

http://codepen.io/Edo_B/pen/cLbrt

Using:

1. HW Accelerated CSS filters
2. JS for class assigning and arrow key events
3. Images CSS Clip property

that's it.

I also believe this could be done dynamically for any screen if using canvas to copy the current dom and blurring it.

[Edit] In the future (mobile) Safari 9 there will be -webkit-backdrop-filter for exactly this. See this pen I made to showcase it.

I thought about this for the last 4 weeks and came up with this solution.

Live Demo

[Edit] I wrote a more indepth post on CSS-Tricks

This technique is using CSS Regions so the browser support is not the best at this moment. (http://caniuse.com/#feat=css-regions)

The key part of this technique is to split apart content from layout by using CSS Region. First define a .content element with flow-into:content and then use the appropriate structure to blur the header.

The layout structure:

<div class="phone">
 <div class="phone__display">
  <div class="header">
    <div class="header__text">Header</div>
    <div class="header__background"></div>
  </div>
  <div class="phone__content">
  </div>
 </div>
</div>

The two important parts of this layout are .header__background and .phone__content - these are the containers where the content should flow though.

Using CSS Regions it is simple as flow-from:content (.content is flowing into the named region content)

Now comes the tricky part. We want to always flow the content through the .header__background because that is the section where the content will be blured. (using webkit-filter:blur(10px);)

This is done by transfrom:translateY(-$HeightOfTheHeader) the .content to ensure that the content will always flow though the .header__background. This transform while always hide some content beneath the header. Fixing this is ease adding

.header__background:before{
  display:inline-block;
  content:'';
  height:$HeightOfTheHEader
}

to accommodate for the transform.

This is currently working in:

• Chrome 29+ (enable 'experimental-webkit-features'/'enable-experimental-web-platform-features')
• Safari 6.1 Seed 6
• iOS7 (slow and no scrolling)

This is sort of possible with FireFox now thanks to the element style attribute.

This experimental attribute lets you use any HTML content as a background image. So, to create the background you need three overlays:

1. Simple overlay with a solid background (to hide the real overlay content).
2. Overlay with a -moz-element background that sets the content. Note that FX doesn't support the filter: blur() attribute, so we need to us an SVG.
3. Overlay with non blurred content.

So, put together:

SVG blur filter (works in FX, other browsers could use filter:blur()):

<svg>
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
</svg>

CSS blur style:

.behind-blur 
{
    filter         : url(#svgBlur); 
    opacity: .4;
    background: -moz-element(#content);
    background-repeat: no-repeat;
}

Finally 3 layers:

<div class="header" style="background-color: #fff">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

Then to move this around just set the background-position (sample in jQuery but you could use anything):

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
}); 

Here it is as a JS Fiddle, FX only.