CSS3 / HTML 5 / PNG blur content behind element
I'm trying to blur the content behind a fixed position header so that the content behind it has the user scrolls is blurred when behind this div.
I used to achieve this with simple opacity in CSS but this does not blue the content behind the DIV, merely imposes a translucent panel in front of it.
Is there a simple way even if its a cheat of achieving what I am after. Whether by using a PNG background image or in CSS.
Take a look at the way iOS7 does this http://www.apple.com/ios/ios7/features/.
Answer
With a little HTML5 and JavaScript magic, the answer is yes:
http://jsfiddle.net/nallenscott/WtQjY/41/
Straw man:
<body>
<section>
<article>
<header></header>
<div class="blurheader"></div>
<!-- content-->
</article>
</section>
</body>
You'll need jQuery, Stackblur, and html2canvas.
Duplicate the content area and convert it to canvas.
Move the canvas to the header.
Sync the scroll of the content with the canvas in the header.
html2canvascreates the canvas,Stackblurcreates a gaussian blur on the canvas, and the header element is layered over the.blurheaderdiv to simulate translucency.
If you're comfortable with JavaScript, then this might be worth investigating further. It supports the latest versions of IE, Chrome, Safari, and Firefox and permits graceful fallback options for legacy browsers.
Cheers.