iOS7 Navigation Bar Using CSS

iOS7 elements with HTML and CSS

Since the early beta versions of iOS7, front-end developers have been replicating features of the new interface with HTML and CSS. There are many implementations of control center popup, but people don’t seem to have implemented the useful elements.

The UINavigationBar

Almost every app has a navigation bar. As a Cordova / PhoneGap developer, I thought it would be interesting to see if I could come close to implementing the new iOS7 UINavigationBar style in HTML and CSS, since no one else had (after googling and searching sites such as codepen).

My implementation

The tricky part is obviously the transparency / blur / “frosting” effects, so here’s how I set about it.

The transparency

Using background rgba for alpha transparency on the usual header element (absolute or fix positioned etc), I was able to show the content underneath. This works well but I couldn’t find a way to add any sort of blur effect to this element without distorting the header content.

header styles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header {
position: absolute;
z-index: 3;
top: 0;
left: 0;
width: 100%;
height: 44px;
line-height: 44px;
background: rgba(59,89,152,0.8);
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
}

The blur / frosting

I solved this by absolute positioning another element directly underneath the usual header element, with a lower z-index of the header but a higher z-index than the content underneath.

header-blur styles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.header-blur {
position: absolute;
z-index: 2;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px);
-o-filter: blur(10px);
filter: blur(10px);
background: rgba(250,250,250,0.9);
top: 0;
left: 0;
width: 100%;
height: 44px;
padding: 0;
}

After a bit of fiddling I managed to get the values right and get it working pretty well.

iScroll

I added iScroll to the mix, as I usually use this when developing mobile apps. It required a little modification to the usual setup (around the top positioning and adding a padding instead) but showcases the iOS7 style navigation well.

Demo

You can see a working demo and all the associated code here, feel free to fork and make your own changes or improvements. I’m also open to feedback as usual.

UPDATE

It turns out that I must have been tipsy to see the blur effect in the code above. It wasn’t actually applying the blur to elements underneath the header because they aren’t nested.

The only solution I could think up was to clone the body, convert this to a canvas and apply the blur to that. I then probe the scroll event to displace the blurred canvas at the correct y offset.

Sounds hacky, but it’s not too bad (other than hiding the header when cloning the body and forcing iScroll to show overflow until the canvas is generated, oh and pulling in additional 3rd party libraries and actually cloning the body in the first place…). Not sure it’s worth it, but I’ll do some performance testing.

The example code has been updated, feel free to fork.