Subscribe to WebApps Everywhere!        RSS Feed
-----

Building a Title Bar

Icon Leave Comment
On every mobile WebApp one of the most important things for the UI of your application is the title bar. Here is an example I made:

Posted Image


I've made that using a pattern on Photoshop. If you want to use it as a template you can get it here. You should add at your HTML source this simple code at the <body> tag:
<header>
	Leaf
</header>

I'm using the new HTML5 <header> tag. And the CSS should be like this:
header {
	width: 100%;
	height: 44px;
	background-image: url("shared/head-bkg.png");
	
	position: fixed;
	display: block;
	
	-webkit-box-sizing: border-box;
	
	text-align: center;
	color: #ffffff;
	padding-top: 10px;
	
	font-weight: bold;
	font-size: 1.5em;
}

The height is a standard for the title bars from iOS, but it looks very cool on Android for sure. The CSS code is very simple. If you have any questions about it just ask in the comments. Feel free to use and share, but let me know what you thought about it and if you want to see any improvements.

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

November 2017

S M T W T F S
   1234
567891011
121314151617 18
19202122232425
2627282930  

Recent Entries

Search My Blog

0 user(s) viewing

0 Guests
0 member(s)
0 anonymous member(s)