App Anatomy CSS3 Gradients

css3_gradients.css

#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);
}