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.

投稿者:

Takuya

Digital crafts(man|dog). Love photography. Always making otherwise sleeping. born in 1984.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中