Skip to content

Instantly share code, notes, and snippets.

@blizzerand
Created September 12, 2012 17:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save blizzerand/3708592 to your computer and use it in GitHub Desktop.
Save blizzerand/3708592 to your computer and use it in GitHub Desktop.
/*This is a clean gradient menu purely based on CSS3 */
div#header {
background: -webkit-gradient(linear, left top, left bottom, from(#a8acad), to(#736f6e));
background: -moz-linear-gradient(top, #a8acad, #736f6e);
border-radius: 10px;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 5px 5px 20px #a5a5a5;
width: 95%;
height: 50px;
margin-left: 10px;
margin-right: 20px; }
div#header ul {
padding: 0;
margin: 0;
float: left; }
div#header li {
float: left;
list-style: none; }
div#header li a:link {
display: block;
text-decoration: none;
text-align: center;
text-shadow: 0px 0px 10px #000;
height: 35px;
width: 95px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
font-weight: bold;
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1); }
div#header li a:visited {
color: #ffffff;
font-weight: bold;
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1);
text-shadow: 0px 0px 10px #000; }
div#header li a:hover {
color: orange;
text-shadow: 0px 0px 10px #000; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment