OS X Yosemite menu background blur in CSS - css

Question

I'm looking for a way to get the blurry background effect of OS X 10.10 working in css. Blurring with filter:blur or an SVG Gaussian filter will also blur the border, so this will not work.
Here is an example of the effect:

Answer 1

this is CSS imitating OSX Yosemite
Stylesheet
body {
background-image: url('your image');
background-size: cover;
font-size: 14px;
}
.block {
color: #000;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
background: inherit;
position: relative;
}
.block:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
-webkit-filter: blur(10px) saturate(2);
}
.title {
font-size: 1.4em;
font-weight: 300;
color: #222;
padding: 8px;
background: rgba(235,235,235,0.85);
border-bottom: 1px solid rgba(0,0,0,0.1);
text-align: center;
}
.content {
padding: 8px;
background: rgba(255,255,255,0.66);
}
and your html like following
<div class="block">
<div class="title">Hello World</div>
<div class="content">This is your main content!</div>
</div>
Example

Answer 2

You can use Css3 and JS, as explained in this article. Below you can find a snippet of Css code, for the full working example, please refer to the original post and fiddle below:
/* TRANSFORMATIONS */
.glass.down {
/* Fallback for browsers that don't support 3D Transforms */
transform: translateY(100%) translateY(-7rem);
transform: translateY(100%) translateY(-7rem) translateZ(0);
}
.glass.down::before {
transform: translateY(-100%) translateY(7rem);
transform: translateY(-100%) translateY(7rem) translateZ(0);
}
.glass.up, .glass.up::before {
transform: translateY(0);
transform: translateY(0) translateZ(0);
}
See this demo:
http://jsfiddle.net/cQQ9u/

Answer 3

You can achieve this effect with webkit's backdrop-filter css property
https://webkit.org/demos/backdrop-filter/

Answer 4

These are just workarounds... it works only with image background and it won't with text (for example if we want to create modals windows).... you can combine css and js to get some similar effect but for now we can't get the right behavior with pure CSS.
This is my idea and hope some CSS guru can contradict me but I think this is a CSS3 technology limit..... maybe in future we'll can do it.