Here's a fun little nav bar. NO IMAGES. CSS3 FTWI relied on pseudo elements, gradients, data urls, icons by Stephen Hutchings and other fun things that may never work in Internet Explorer. Not great for production, but fun to play with.

index.html

<div class="container">
  <ul id="nav">
    <li><a href="#" class="icon-home"></a></li>
    <li class="active"><a href="#" class="icon-camera"></a></li>
    <li><a href="#" class="icon-mail"></a></li>
    <li><a href="#" class="icon-comment"></a></li>
    <li><a href="#" class="icon-user"></a></li>
    <li><a href="#" class="icon-cog"></a></li>
  </ul>
</div>

script.js

$(document).ready(function(){
  
  $("#nav li").click(function(){
    $("#nav .active").removeClass("active");
    $(this).addClass("active");
    
  });
  
});

style.less

/*
yeah, we're using LESS.
*/
@neon:#00bff3;

// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Onto the show!
body {
  display:block;
  background:lightgrey;
  
  .container {
    text-align:center;
    position:absolute;
    top:40%;
    left:0;
    right:0;
    bottom:0;
  }
  
  ul#nav {
   font-size:20px;
   display:inline-block;
   list-style:none;
   position:relative;
   padding:0;
   .box-shadow(0 .5em 12px rgba(0,0,0,0.75);
    
   li {
     display:block;
     position:relative;
     z-index:20;
     float:left;
    &:hover {
      &:before {
        top:2px;
        .box-shadow(inset 0 0 1.5em 0 rgba(0,0,0,.75));
      }
    }
    &:active,&.active {
      a {
        padding-top:18px;
        padding-bottom:5px;
        color:@neon; 
        text-shadow:0 -1px 0 rgba(0,0,0,1), 0 0 1em @neon;
      }
        
      &:before {
        top:7px;
        background: rgb(45,45,45); /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
           background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJkMmQyZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzE0MTQxNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
        background: -moz-linear-gradient(top,  rgba(45,45,45,1) 0%, rgba(20,20,20,1) 99%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,45,45,1)), color-stop(99%,rgba(20,20,20,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(20,20,20,1) 99%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(20,20,20,1) 99%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(20,20,20,1) 99%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(45,45,45,1) 0%,rgba(20,20,20,1) 99%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#141414',GradientType=0 ); /* IE6-8 */
      border-bottom:1px solid black;
       }
    }
    &:before {
      content:"";
      position:absolute;
      z-index:10;
      width:100%;
      height:100%;
      border-bottom:1px solid rgba(255,255,255,0.05);
      .box-shadow(inset 0 0 1em 0 rgba(0,0,0,0.25));
      border-left:1px solid rgba(0,0,0,0.35);
    }
    &:after {
      content:"";
      height:16px;
      position:absolute;
      z-index:5;
      bottom:-7px;
      width:100%;
      border-left:1px solid black;
      border-bottom:1px solid black;
    }
    &:before {
      left:0;
      background: rgb(86,86,86); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU2NTY1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjI2MjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(86,86,86,1) 0%, rgba(38,38,38,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(86,86,86,1)), color-stop(100%,rgba(38,38,38,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(86,86,86,1) 0%,rgba(38,38,38,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(86,86,86,1) 0%,rgba(38,38,38,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(86,86,86,1) 0%,rgba(38,38,38,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(86,86,86,1) 0%,rgba(38,38,38,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#262626',GradientType=0 ); /* IE6-8 */


   }
   &:after {
    left:0;
    background: rgb(45,45,45); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMyUiIHN0b3AtY29sb3I9IiMyZDJkMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMxNDE0MTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(45,45,45,1) 23%, rgba(20,20,20,1) 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(23%,rgba(45,45,45,1)), color-stop(99%,rgba(20,20,20,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(45,45,45,1) 23%,rgba(20,20,20,1) 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(45,45,45,1) 23%,rgba(20,20,20,1) 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(45,45,45,1) 23%,rgba(20,20,20,1) 99%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(45,45,45,1) 23%,rgba(20,20,20,1) 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#141414',GradientType=0 ); /* IE6-8 */


    }
      
     &:first-of-type  {
       &:before,&:after {
        .border-radius(4px 0 0 4px);
       }
     }
     &:last-of-type {
       &:before,&:after {
        .border-radius(0 4px 4px 0);
       } 
     }
     a {
       position:relative;
       z-index:10;
       display:block; 
       padding:12px 16px;
       color:#050505;
       text-decoration:none;
       text-shadow:0 1px 0 rgba(255,255,255,0.25);
       &:hover {
         color:@neon; 
         text-shadow:0 -1px 0 rgba(0,0,0,1), 0 0 1em @neon;
       }
      }
    }
  }
}
@font-face {
  font-family: 'icomoon';
  src:url(data:font/opentype;charset=utf-8;base64,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) format("woff");
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: 'icomoon';
  font-style: normal;
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.icon-mail:before {
  content: "\e02b";
}
.icon-home:before {
  content: "\e012";
}
.icon-camera:before {
  content: "\e013";
}
.icon-cog:before {
  content: "\e01f";
}
.icon-comment:before {
	content: "\e02c";
}
.icon-user:before {
	content: "\e028";
}