iOS 7 Frosted Glass/Blur Effect Demo


#1

Hey!

In case your missed our tweet from earlier, today we built a really cool demo using Ionic to showcase the frosted glass effect recently made popular by iOS 7. Basically, we are blurring not only the top layer, but the content underneath it.

Head over the the Demo Page and check it out. We’d love to see how you use it in your own apps!


P.S. We will be periodically building new demos to show off interesting ui interactions like this one and previous ones. I would love to hear your ideas for future demos you think would be useful and fun. Post an idea here or you can always tweet at us!


iOS 7 Frosted Glass with CSS only
Translucent Statusbar
#2

Ben,

I really love the effect. It would go over really well in the iOS 7 world.

However, I can’t help but wonder if this was possible just using a fixed header with opacity. Couldn’t the content have just scrolled underneath the header and been blurred by the header opacity?

As designed right now, the entire content is cloned in memory and then appended into the doc again. It seems like a lot of overhead for a small bit of content. For a LOT of content, it could really kill performance, right?

Can y’all explain the consequences of using this?

Thanks,
Justin


#3

It doesn’t create the same effect. If you were to just change the opacity and use a WebKit blur filter, the entire header would be blurred but not the content. I’ve tried to do the ios7 blur with just CSS and it never comes out right.

This seems to be the best way to produce the desired effect. Have a look at this code pen to see another example. JavaScript is going to be needed. Maybe CSS regions could be used and it could reduce the over head, but it’s not widely supported

Heres a post about using regions to get this effect and heres the github repo


#4

I tried using this with a nav-bar and nav-view directives. For each view of the nav view I do something like

<view title="'Event Details'">
  <content has-header="true" padding="true">
	 ...
  </content>
</view>

But it looks like the content directive gets replaced by a normal div in it’s template, so if I try and do

// Resize the scroll area
$ionicScrollDelegate.resize();

// Update the frosted glass system
$ionicFrostedDelegate.update();

It doesn’t work anymore since the content directive tags are gone.

AMAZING WORK THOUGH!!!


#5

Thanks, @seanhill! I’ll make an issue for this…


#6

Yea, unfortunately it’s not a solution that will scale, since it really is just cloning the content area and our directive wasn’t built to be generic enough (more as a demo to show that it’s possible if you absolutely need to have it).

Unfortunately, transparency or a webkit blur wouldn’t have the same effect as the content underneath isn’t being transformed.

Over time we will reevaluate this and see if it’s something that can be done generically as browser support improves.


#7

I get: {“success”:false,“errors”:{“error”:[“Load on secure subdomain.”]},“status”:200} on the demo page…


#8

@seba, yeah there was a problem with CodePen… they fixed it and it should be working again!


#9

I don’t exactly understand. May someone elaborate? I’m on an Android mobile, I only see like a blank ionic template with a styled like chat with photos that appear filtered. I see no blurry content. What exactly are you all talking about?

Ionic noob.


#10

If someone is interested in getting the frosted glass effect for ionic 2 rc4, I’ve created a repo here. This blurs the whole background e.g. for using a popup. It works for both iOS and Android.


#11

awesome ! it looks pretty good :ok_hand:


#12

This one is good, but it does not work if you call it from a modal. It adds the blur to the app-root, instead the modal behind.