iOS 7’s blurred overlay effect using CSS?

iOS 7’s blurred overlay effect using CSS?

It seems Apple’s overlay is more than just a transparency. Any ideas on how to achieve this effect with CSS and possibly JS?

Solutions/Answers:

Solution 1:

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

Solution 2:

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.

Solution 3:

[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.

Related:  How to display value of value of another variable?

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)

Solution 4:

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

Related:  !function(){ }() vs (function(){ })()

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.

Solution 5:

Check out this demo page.
This demo uses html2canvas for rendering document as an image.

Related:  keycode 13 is for which key

http://blurpopup.labs.daum.net/

  1. When the “Show popup” link is clicked, the ‘makePopup’ function is called.
  2. ‘makePopup’ runs html2canvas for rendering document as an image.
  3. The image is converted to data-url string and it is painted as the popup’s background-image.
  4. Popup’s bg is blurred by -webkit-filter:blur
  5. Append the popup into document.
  6. While you’re dragging the popup, it changes its own background-position.

Solution 6:

This pen I found the other day seemed to do it beautifully, just a bit of css and 21 lines of javascript. I hadn’t heard of the cloneNode js command until I found this, but it totally worked for what I needed for sure.

http://codepen.io/rikschennink/pen/zvcgx

Detail:
A. Basically it looks at your content div and invokes a cloneNode on it so it creates a duplicate which it then places inside the overflow:hidden header object sitting on top of the page.
B. Then it simply listens for scrolling so that both images seem to match and blurs the header image… annnnd BAM. Effect achieved.

Not really fully do-able in CSS until they get the lil bit of scriptability built into the language.