iOS 7 Frosted Glass with CSS only

demo
1

I put together a pure css based solution for a frosted glass demo, similar to this post. I haven’t worked anything into directive yet but I’m going to get to that hopefully later today.

The benefits of this is that there is no need to have javascript clone the content the blur it in the header (from my understanding of how the official directive works). This method uses css regions to achieve basically the same thing.

I’m going to mess around with this and see how this works with the content directive with its way of handling scrolling. Any feed back is appreciated.

Here’s the codepen

2 Likes
2

Any thoughts on frosting the ionic backdrop?

3

Is the copden working? Because I didn’t see any frosted effect in header.

4

Oh yeah the codepen works, just only in safari…le sigh…

The demo uses some css that has only made it’s way into safari for some reason.

5

Any chance it will work within PhoneGap?

6

I wouldn’t attempt it, as it uses some experimental css features that wouldn’t work well in certain webviews.

7

I’m trying yo implemente something like this, but only for a piece of the bottom (20%) on my div.

Example:

I have this working on web but when compile on device doesn’t work.

Any idea?

Thanks