Skip to content

Instantly share code, notes, and snippets.

@ptb

ptb/UINavigationBar.html

Created February 24, 2011 23:39
Show Gist options
  • Save ptb/843144 to your computer and use it in GitHub Desktop.
Save ptb/843144 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
UINavigationBar.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>UINavigationBar</title>
<meta name='viewport' content='initial-scale=1, minimum-scale=1, maximum-scale=1;'>
<meta name='apple-mobile-web-app-capable' content='yes'>
<style>
a, abbr, address, article, aside, audio, b, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
.navigationbar {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: justify;
-webkit-box-align: center;
height: 32pt;
padding: 0 4pt;
background-color: #899cb4;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #b5c0ce), color-stop(0.5, #889bb3), color-stop(0.5, #7f94b0), color-stop(1, #6d83a1));
border-top: 1pt solid #d9dce0;
border-bottom: 1pt solid #2d3033;
}
.navigationbar h1 {
-webkit-box-ordinal-group: 2;
-webkit-box-flex: 1;
}
.navigationbar *:nth-last-child(1) {
-webkit-box-ordinal-group: 3;
}
.navigationbar * {
display: block;
text-align: center;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navigationbar h1 {
margin: 0 7pt;
}
.navigationbar a:nth-last-child(1), .navigationbar a:nth-last-child(2), .navigationbar button:nth-last-child(1), .navigationbar button:nth-last-child(2), .navigationbar span:nth-last-child(1), .navigationbar span:nth-last-child(2) {
min-width: 20pt;
max-width: 62pt;
padding: 5.5pt 8pt;
}
.navigationbar a:nth-last-child(1).tworows, .navigationbar a:nth-last-child(2).tworows, .navigationbar button:nth-last-child(1).tworows, .navigationbar button:nth-last-child(2).tworows {
padding: 0.75pt 8pt 3pt;
}
.navigationbar * {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
color: white;
}
.navigationbar h1 {
font-size: 15pt;
}
.navigationbar a, .navigationbar button {
font-size: 9pt;
}
.navigationbar a:nth-last-child(1).tworows, .navigationbar a:nth-last-child(2).tworows, .navigationbar button:nth-last-child(1).tworows, .navigationbar button:nth-last-child(2).tworows {
font-size: 8pt;
line-height: 1.1;
}
.navigationbar h1 {
text-shadow: rgba(0, 0, 0, 0.5) 0 -1pt 0;
}
.navigationbar a, .navigationbar button {
text-shadow: rgba(0, 0, 0, 0.3) 0 -1pt 0;
-webkit-box-shadow: inset 0 1pt 1pt rgba(0, 0, 0, 0.6), inset 0 0 2pt rgba(0, 0, 0, 0.6), 0 1pt 1pt rgba(255, 255, 255, 0.3);
-webkit-border-radius: 4pt;
background-color: #5d7ba5;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8aa1bf), color-stop(0.5, #5877a2), color-stop(0.5, #476999), color-stop(1, #4a6c9b));
}
.navigationbar a.black, .navigationbar button.black {
background-color: #272727;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7e7e7e), color-stop(0.5, #1a1a1a), color-stop(0.5, black), color-stop(1, black));
}
.navigationbar a.blue, .navigationbar button.blue {
background-color: #3d73e1;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(0.5, #376fe0), color-stop(0.5, #2260dd), color-stop(1, #2463de));
}
.navigationbar a.disabled, .navigationbar button.disabled {
color: #c5cbd3;
}
.navigationbar .arrow {
position: relative;
overflow: visible;
}
.navigationbar .arrow:before {
background-color: inherit;
content: "";
height: 17.5pt;
width: 17.5pt;
position: absolute;
top: 2.3pt;
-webkit-transform: rotate(45deg);
-webkit-border-top-left-radius: 4pt;
-webkit-border-bottom-right-radius: 4pt;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, #8aa1bf), color-stop(0.495, #5877a2), color-stop(0.495, #476999), color-stop(1, #4a6c9b));
}
.navigationbar .arrow.black:before {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, #7e7e7e), color-stop(0.495, #1a1a1a), color-stop(0.495, black), color-stop(1, black));
}
.navigationbar .arrow.blue:before {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, #779be9), color-stop(0.495, #376fe0), color-stop(0.495, #2260dd), color-stop(1, #2463de));
}
.navigationbar *:nth-last-child(2).arrow {
margin-left: 9pt;
padding-left: 3.5pt;
}
.navigationbar *:nth-last-child(2).arrow:before {
left: -6pt;
-webkit-box-shadow: inset 1pt 0 1pt rgba(0, 0, 0, 0.5), inset 0 -1pt 2pt rgba(0, 0, 0, 0.3);
-webkit-mask-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.5, black), color-stop(0.5, transparent));
}
.navigationbar *:nth-last-child(1).arrow {
margin-right: 9pt;
padding-right: 3.5pt;
}
.navigationbar *:nth-last-child(1).arrow:before {
right: -6pt;
-webkit-mask-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, black), color-stop(0.5, transparent));
-webkit-box-shadow: inset 0 1pt 1pt rgba(0, 0, 0, 0.5), inset -1pt 0 2pt rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<header class='navigationbar'>
<h1>New Message</h1>
<a class='arrow'>Back</a>
<button class='blue'>Send</button>
</header>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment