iPhone Like View Controller Buttons in CSS3 and HTML5

The goal here is to create an iPhone like Segmented Control buttons using only CSS3 and HTML5. Here's what they should look like


To check out the code on a single page, make sure you're using a WebKit browser and click here.

First, we'll start off with a simple HTML5 document:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Navigation</title>
</head>
<body>
<section class="wrapper">
<header>
<nav id="css3segmentedcontrol">
	<ul>
		<li><a href="#">video</a></li>
		<li><a href="#">web</a></li>
		<li><a href="#">photo</a></li>
	</ul>
</nav>
</header>
</section>
</body>
</html>

This is pretty basic HTML5 code with a simple list. I could have built this using an older version of HTML, but why bother...this code is really meant to run on mobile devices and most of them will run some version of the webkit browser. Here's the stylesheet code that will do the trick.

Here's the CSS3 code:

<style>

nav {
	clear:both;
	float:left;
}
 nav#css3segmentedcontrol {
	background:-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#BBB));
	float: left;
	border-radius:12px;
	border: 1px solid #999;
	-webkit-box-shadow: 1px 1px 1px #FFF;
}

nav#css3segmentedcontrol ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav#css3segmentedcontrol li {
	float: left;
	margin:0;
	padding:0;
}

nav#css3segmentedcontrol li a {
	height: 30px;
	font: bold 13pt/16px Helvetica;
	color: #666;
	text-shadow: 1px 1px 1px #FFF;
	text-decoration: none;
	display: block;
	padding: 10px 15px 0 15px;
	border-right: 1px solid #666;
	border-left: 1px solid #DDD;
}

nav#css3segmentedcontrol li:first-child a {
	border-left: none;
}

nav#css3segmentedcontrol li:last-child a {
	border-right: none;
}

nav#css3segmentedcontrol li a:hover {
	background: #126EE4;
	background: -webkit-gradient(linear, left top, left bottom, from(#126EE4), to(#4F99FA));
	-webkit-box-shadow: inset 2px 2px 2px rgba(7,52,112,.6);
	color: #FFF;
	text-shadow: none;
	border-left: 1px solid rgba(0,0,0,.5);
}

nav#css3segmentedcontrol li:first-child a {
	border-left: none;
}

nav#css3segmentedcontrol li:last-child a {
	-webkit-border-top-right-radius:12px;
	-webkit-border-bottom-right-radius:12px;
}

nav#css3segmentedcontrol li:first-child a {
	-webkit-border-top-left-radius:12px;
	-webkit-border-bottom-left-radius:12px;
}

</style>

blog comments powered by Disqus