iOS 7's blurred overlay effect using CSS?
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:
- HW Accelerated CSS filters
- JS for class assigning and arrow key events
- 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)