Skip to content

Instantly share code, notes, and snippets.

@feedhenry-gists
Created January 17, 2012 09:58
Show Gist options
  • Save feedhenry-gists/1626024 to your computer and use it in GitHub Desktop.
Save feedhenry-gists/1626024 to your computer and use it in GitHub Desktop.
App Anatomy CSS3 Gradients
#menu{
height: 50px;
padding: 0px;
z-index: 1;
position: relative;
background: #3a3a3a;
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,#3a3a3a), color-stop(50%,#141414), color-stop(50%,#000000), color-
stop(100%,#000000));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#141414 50%,#000000
50%,#000000 100%);
}
#menu .button_active {
border-radius: 8px;
margin: 4px 0px;
background-repeat: no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,#616161), color-stop(50%,#434343), color-stop(50%,#353535), color-
stop(100%,#333333));
background: -webkit-linear-gradient(top, #616161 0%,#434343 50%,#353535
50%,#333333 100%);
}
#menu #cloud h2{
background-size: 25px;
background-repeat: no-repeat;
background-image:url(../img/cloud.png);
background-position: center 12px;
}
#menu #cloud h2:hover,
#menu #cloud h2:focus:hover {
background-position: center 12px;
background-image:url(../img/cloud_active.png);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment