HTML5 + CSS3 Demo : Navigation GUI like iPhone

This is HTML Element styled by only CSS 3.

To launch Photoshop for styling such is waste of time.

sample.html

<nav id="header-navigation">
  <ul>
    <li><a href="/#header-navigation">item1</a></li>
    <li><a href="/#header-navigation">item2</a></li>
    <li><a href="/#header-navigation">item3</a></li>
    <li><a href="/#header-navigation">item4</a></li>
    <li><a href="/#header-navigation">item5</a></li>
  </ul>
</nav>

sample.css

nav#header-navigation > ul {
  padding: 0.4em 0;
  background-color: hsl(210, 30%, 60%);
  background-image:
    -webkit-linear-gradient(
      hsl(210, 30%, 70%)
      , hsl(210, 30%, 61%) 50%
      , hsl(210, 30%, 59%) 50%
      , hsl(210, 30%, 50%)
    );
  background-image:
    -moz-linear-gradient(
      hsl(210, 30%, 70%)
      , hsl(210, 30%, 61%) 50%
      , hsl(210, 30%, 59%) 50%
      , hsl(210, 30%, 50%)
    );
  background-image:
    -o-linear-gradient(
      hsl(210, 30%, 70%)
      , hsl(210, 30%, 61%) 50%
      , hsl(210, 30%, 59%) 50%
      , hsl(210, 30%, 50%)
    );
  box-shadow:
    inset 0 1px hsl(210, 40%, 80%);
  border-width: 1px;
  border-style: solid;
  border-top-color: hsl(210, 10%, 70%);
  border-bottom-color: hsl(210, 10%, 40%);
  border-left: none;
  border-right: none;
  text-align: center;
}

nav#header-navigation > ul > li {
  display: inline-block;
  margin-left: -4px;
}

nav#header-navigation > ul > li > a {
  display: inline-block;
  padding: 0.2em 0.8em;
  text-decoration: none;
  text-shadow: 
    0 -1px 0 hsl(210, 40%, 30%)
    , 0 1px 0 hsl(210, 40%, 80%);
  border: 1px solid hsl(210, 40%, 40%);
  border-left: none;
  border-top-color: hsl(210, 40%, 30%);
  border-bottom-color: hsl(210, 40%, 45%);
  color: #fff;
  border-radius: inherit;
  box-shadow:
    0 1px hsl(210, 40%, 70%)
    , inset 0 1px hsla(210, 10%, 40%, 0.4);
}

nav#header-navigation > ul > li:first-child {
  margin-left: 0;
  border-radius: 5px 0 0 5px;
}

nav#header-navigation > ul > li:first-child > a {
  border-left: 1px solid hsl(210, 40%, 40%);
}

nav#header-navigation > ul > li:last-child {
  border-radius: 0 5px 5px 0;
}

/* for Opera 11 */
@media not screen and (1) {
  nav#header-navigation > ul > li {
    margin-left: -7px;
  }
  nav#header-navigation > ul > li:first-child > a {
    border-radius: 5px 0 0 5px;
  }
  nav#header-navigation > ul > li:last-child > a {
    border-radius: 0 5px 5px 0;
  }
}

nav#header-navigation > ul > li:first-child > a
, nav#header-navigation > ul > li > a:hover {
  background-image:
    -webkit-linear-gradient(
      hsl(215, 30%, 70%)
      , hsl(215, 30%, 60%) 25%
      , hsl(215, 30%, 52%) 50%
      , hsl(215, 30%, 48%) 50%
      , hsl(215, 30%, 45%) 75%
      , hsl(215, 30%, 50%)
    );
  background-image:
    -moz-linear-gradient(
      hsl(215, 30%, 70%)
      , hsl(215, 30%, 60%) 25%
      , hsl(215, 30%, 52%) 50%
      , hsl(215, 30%, 48%) 50%
      , hsl(215, 30%, 45%) 75%
      , hsl(215, 30%, 50%)
    );
  background-image:
    -o-linear-gradient(
      hsl(215, 30%, 70%)
      , hsl(215, 30%, 60%) 25%
      , hsl(215, 30%, 52%) 50%
      , hsl(215, 30%, 48%) 50%
      , hsl(215, 30%, 45%) 75%
      , hsl(215, 30%, 50%)
    );
}