iOS 7 Style Frosted Glass Top-Bar with CSS3

Screen Shot 2015-03-28 at 8.48.16 PM

named-region is not coming yet

iOS 7’s frosted glass style UI is beautiful. Let’s build it on the web.
There are a couple examples out there for applying blur effect to navigation bar or image.
But these examples are not perfect.
If you use filter: blur, the edges aren’t blurred and still sharp.
Using html2canvas is better but it’s not able to blur cross-domain images.

Even though actually there is a perfect solution using the experimental web platform features on Google Chrome.
So it seems that it’s only a matter of time until we can use named-region.

However, I found a solution not using the experimental features(a proof of concept).
It is a little tricky but works fine on the famous browsers even on iOS safari.
It’s usable if you have a simple web page.

DEMO

Here is live demo.
Source, and video:

Copy all DOMs into blurry viewport, blur and scroll it

How it does is pretty simple.
The entire document is copied into blurry content wrapper at loading time.
And it applies blur effect to the entire content.
The blurry viewport scrolls corresponding to the scroll position of the page when you scroll down the page.

Duplicated DOMs potentially causes bug on your web page

This solution works fine though duplicated DOMs always exist on your document.
It could be a potential of bugs in CSS and DOM manipulation.
Be careful if you use this method.

作ってます↓

Inkdrop - The Notebook App for Markdown Lover

気に入ったらシェアしてね


コメントを残す