11 ms·

Nice attention to detail in this. By the way, it seems like the new view's shadow in the original actually loses opacity as that view leaves the screen. Did you

Nice attention to detail in this. By the way, it seems like the new view's shadow in the original actually loses opacity as that view leaves the screen. Did you look around for the blur effect at all? You mentioned it but any luck beyond that? I've seen some attempts but nothing useful.

M4v3R 13y ago
I've looked into this as well. At the moment it is impossible to achieve this effect in plain HTML/Javascript/CSS. It would probably need some Canvas/WebGL magic to work for live content below the navigation bar, but that feels like overdoing it. Achieving blur in CSS is possible, but it's different - you apply blur to an element itself, not to a background of element that covers it.
- yesimahuman 13y ago
  This demo comes close (only works on the phone, and make sure to swipe up to see the menu): http://dl.dropboxusercontent.com/u/2220075/ios7/lax.html http://dl.dropboxusercontent.com/u/2220075/ios7/lax.html I forget where this comes from, I just have the link.
  - c2prods 13y ago
    Yes, I've seen it an a few others demos. But the difficulty here is to make the content blurred while it scrolls. It's extremely smooth on iOS 7 beta and I can't see anyway to reproduce properly in HTML without severely compromising the performances.
    - peterhunt 13y ago
      I think this is actually possible if you use synthetic scrolling (i.e. interpret touch events, compute intertia and use translate3d + requestAnimationFrame). You'd basically have 2 copies of the content area, one blurred w/ css and one not blurred. Render the blurred one above the non blurred one and scroll them in lock step. You can probably get ok performance if you don't have a lot of images. A high quality implementation of synthetic scrolling is available at http://github.com/zynga/scroller http://github.com/zynga/scroller if you want to play with it.
    - c2prods 13y ago
      Hmm, I've tried something like that (although not as elaborate), but it really was sluggish... It may work but I think you should at least need an iPhone 4S or 5.
  - M4v3R 13y ago
    As I said, it's hard/close to impossible to reliably achieve this effect for live content. With static content you can use CSS filters to do the blurring.
madeofpalk 13y ago
Yeah, the iOS 7 'frosted glass translucency is impossible to achieve with CSS. Everyone points to filter: blur(), but that only blurs the element, and not items behind it. The only thing I could come up with was using something like HTML2Canvas[1] to render a portion of the DOM in a canvas/image, position that exactly on top, and then blur that. But all that seems quite convoluted and heavy, so decided not to invest any energy into it. [1]: https://github.com/niklasvh/html2canvas https://github.com/niklasvh/html2canvas
- meerita 13y ago
  You can blur everything, you just need to point the elements.
dm2 13y ago
Would one of these solutions work? http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css http://stackoverflow.com/questions/17034485/ios-7s-blurred-o... Also: http://www.blurjs.com/ http://www.blurjs.com/

M4v3R 13y ago

I've looked into this as well. At the moment it is impossible to achieve this effect in plain HTML/Javascript/CSS. It would probably need some Canvas/WebGL magic to work for live content below the navigation bar, but that feels like overdoing it. Achieving blur in CSS is possible, but it's different - you apply blur to an element itself, not to a background of element that covers it.

yesimahuman 13y ago
This demo comes close (only works on the phone, and make sure to swipe up to see the menu): http://dl.dropboxusercontent.com/u/2220075/ios7/lax.html http://dl.dropboxusercontent.com/u/2220075/ios7/lax.html I forget where this comes from, I just have the link.
- c2prods 13y ago
  Yes, I've seen it an a few others demos. But the difficulty here is to make the content blurred while it scrolls. It's extremely smooth on iOS 7 beta and I can't see anyway to reproduce properly in HTML without severely compromising the performances.
  - peterhunt 13y ago
    I think this is actually possible if you use synthetic scrolling (i.e. interpret touch events, compute intertia and use translate3d + requestAnimationFrame). You'd basically have 2 copies of the content area, one blurred w/ css and one not blurred. Render the blurred one above the non blurred one and scroll them in lock step. You can probably get ok performance if you don't have a lot of images. A high quality implementation of synthetic scrolling is available at http://github.com/zynga/scroller http://github.com/zynga/scroller if you want to play with it.
  - c2prods 13y ago
    Hmm, I've tried something like that (although not as elaborate), but it really was sluggish... It may work but I think you should at least need an iPhone 4S or 5.
- M4v3R 13y ago
  As I said, it's hard/close to impossible to reliably achieve this effect for live content. With static content you can use CSS filters to do the blurring.

madeofpalk 13y ago

Yeah, the iOS 7 'frosted glass translucency is impossible to achieve with CSS. Everyone points to filter: blur(), but that only blurs the element, and not items behind it. The only thing I could come up with was using something like HTML2Canvas[1] to render a portion of the DOM in a canvas/image, position that exactly on top, and then blur that. But all that seems quite convoluted and heavy, so decided not to invest any energy into it. [1]: https://github.com/niklasvh/html2canvas https://github.com/niklasvh/html2canvas

meerita 13y ago
You can blur everything, you just need to point the elements.

dm2 13y ago

Would one of these solutions work? http://stackoverflow.com/questions/17034485/ios-7s-blurred-overlay-effect-using-css http://stackoverflow.com/questions/17034485/ios-7s-blurred-o... Also: http://www.blurjs.com/ http://www.blurjs.com/