iOS UI elements in HTML - part 2
The tab bar and buttons
In this second article, we will focus on the buttons bar at the top of many iOS apps, along with three kind of elements in it: Buttons, active buttons, tabs. Below one live example:
First, let's design the toolbar.
It's a simple gradient so it should be fairly straightforward. In addition, all elements are on the same line here, so I'll use a TABLE tag and every element is in its own TD.
The first class toolbarleftcell represent the outer left and right cells. They exist for the sole purpose of retaining margins.
This is how it looks in your browser:
Here is the code:
<table class="toolbar">
<tbody>
<tr>
<td class="toolbarleftcell"></td>
<td class="toolbar toolbarleft">elements on the left</td>
<td class="toolbar toolbarmiddle">elements in the middle</td>
<td class="toolbar toolbarright">elements on the right</td>
<td class="toolbarleftcell"></td>
</tr>
</tbody>
</table>
<style>
table.toolbar {
height:44px;
width:100%;
margin:0;
padding:0;
border-collapse:collapse;
border-bottom: 1px solid #2d3642;
border-top: 1px solid #cdd5df;
background-color:#889bb3;
background: -webkit-gradient(linear, left bottom, left top, from(#6e84a2), to(#b0bccd), color-stop(0.5, #8195af), color-stop(0.5, #889bb3));
background: -moz-linear-gradient(bottom, #6e84a2, #8195af 50%, #889bb3 50%, #b0bccd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6e84a2', endColorstr='#b0bccd');
position:fixed;
top:0px;
left:0px;
}
td.toolbar {
margin:0;
padding:0;
margin-top:6px;
}
td.toolbarright {
text-align:right;
}
td.toolbarleft {
text-align:left;
}
td.toolbarmiddle {
text-align:center;
}
.toolbarleftcell {
padding:0px 5px 0px 0px;
margin:0px;
width:5px;
}
</style>
Now a few simple buttons
Apart from the obvious gradient, the difficult bit is the border. We'll use two nested divs to make sure we get it right. some buttons are bright blue as well, as you can see below:
And now the code:
<div class="button2"><div class="ibutton2">Refresh</div></div>
<style>
div.button2 {
-webkit-border-radius: 5px 5px;
-moz-border-radius: 5px 5px;
border-radius: 5px 5px;
border-width: 1px;
border-style: solid;
border-color: #30363E #415878 #9CABBF #415878;
display: inline-block;
}
div.button2 div.ibutton2 {
-webkit-border-radius: 4px 4px;
-moz-border-radius: 4px 4px;
border-radius: 4px 4px;
border-width: 1px 0px;
border-style: solid;
border-color: #7E8FA7 #415878 #375073 #415878;
background-color: #5877A2;
background: -webkit-gradient(linear, left bottom, left top, from(#4A6C9B), to(#8EA4C1), color-stop(0.5, #476999), color-stop(0.5, #5877A2));
background: -moz-linear-gradient(bottom, #4A6C9B, #476999 50%, #5877A2 50%, #8EA4C1);
background: -ms-linear-gradient(bottom, #4A6C9B, #476999 50%, #5877A2 50%, #8EA4C1);
background: -webkit-linear-gradient(bottom, #4A6C9B, #476999 50%, #5877A2 50%, #8EA4C1);
background: linear-gradient(bottom, #4A6C9B, #476999 50%, #5877A2 50%, #8EA4C1);
display: inline-block;
}
.tab2cell,div.button2 {
margin:0px;
padding:0px;
}
.itab2, div.ibutton2 {
margin:0px;
color:white;
padding:6px 10px;
}
div.button2active{
border-color: #2a354b #2952b8 #9cacc0 #2952b8;
}
div.button2active div.ibutton2 {
border-color: #6e8ac8 #2952b8 #1b49b4 #2952b8;
background-color:#376fe0;
background: -webkit-gradient(linear, left bottom, left top, from(#2463de), to(#7b9eea), color-stop(0.5, #2260dd), color-stop(0.5, #376fe0));
background: -moz-linear-gradient(bottom, #2463de, #2260dd 50%, #376fe0 50%, #7b9eea);
background: -ms-linear-gradient(bottom, #2463de, #2260dd 50%, #376fe0 50%, #7b9eea);
background: -webkit-linear-gradient(bottom, #2463de, #2260dd 50%, #376fe0 50%, #7b9eea);
background: linear-gradient(bottom, #2463de, #2260dd 50%, #376fe0 50%, #7b9eea);
}
</style>
The tabs
Tabs are just buttons stitched together. They can be active or not by the class tab2on and tab2off. With a minimal amount of JavaScript, they can be animated on a click. Here is how they look in your browser:
|
<table class="tabs2" id="ipe_105">
<tbody>
<tr>
<td class="tab2off tab2left">
<div class="otab2"><div class="itab2">Item 1</div></div>
</td>
<td class="tab2off">
<div class="otab2"><div class="itab2">Item 2</div></div>
</td>
<td class="tab2on tab2right">
<div class="otab2"><div class="itab2">Item 3</div></div>
</td>
</tr>
</tbody>
</table>
<style>
.itab2, .ibutton2 {
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
font-size:12px;
font-weight:bold;
}
table.tabs2 {
empty-cells: show;
border-collapse:collapse;
display: inline-block;
}
table.tabs2 td {
padding:0px;
}
.tab2right .otab2 .itab2,.tab2right .otab2 {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.tab2right .otab2 .itab2 {
border-right-color:#5a6a7f;
}
.tab2right .otab2 {
border-right-width:1px ! important;
border-right-color:#5a6a7f;
}
.tab2left .otab2 .itab2,.tab2left .otab2 {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.tab2left .otab2 .itab2 {
border-left-width:0px ! important;
border-left-color:#415878;
}
.tab2left .otab2 {
border-left-width:1px ! important;
border-left-color:#415878;
}
.tab2off .otab2, .tab2on .otab2 {
border-top-color: #373b40;
border-bottom-color: #9baabf;
border-width:1px 0px;
border-style:solid;
}
.tab2off .otab2 .itab2 {
border-top-color: #8f9aa8;
border-bottom-color: #52647a;
border-left-color: #375784;
border-width:1px;
border-right-width:0px;
border-style:solid;
background-color:#798eaa;
background: -webkit-gradient(linear, left bottom, left top, from(#6e85a3), to(#a5b4c6), color-stop(0.5, #6b83a1), color-stop(0.5, #798eaa));
background: -moz-linear-gradient(bottom, #6e85a3, #6b83a1 50%, #798eaa 50%, #a5b4c6);
background: -ms-linear-gradient(bottom, #6e85a3, #6b83a1 50%, #798eaa 50%, #a5b4c6);
background: -webkit-linear-gradient(bottom, #6e85a3, #6b83a1 50%, #798eaa 50%, #a5b4c6);
background: linear-gradient(bottom, #6e85a3, #6b83a1 50%, #798eaa 50%, #a5b4c6);
}
.tab2on .otab2 .itab2 {
border-top-color: #7d8ea5;
border-bottom-color: #375074;
border-left-color: #375784;
border-width:1px;
border-right-width:0px;
border-style:solid;
background-color:#5877a2;
background: -webkit-gradient(linear, left bottom, left top, from(#4a6c9b), to(#8ea4c1), color-stop(0.5, #476999), color-stop(0.5, #5877a2));
background: -moz-linear-gradient(bottom, #4a6c9b, #476999 50%, #5877a2 50%, #8ea4c1);
background: -ms-linear-gradient(bottom, #4a6c9b, #476999 50%, #5877a2 50%, #8ea4c1);
background: -webkit-linear-gradient(bottom, #4a6c9b, #476999 50%, #5877a2 50%, #8ea4c1);
background: linear-gradient(bottom, #4a6c9b, #476999 50%, #5877a2 50%, #8ea4c1);
}
</style>
Add a comment