Skip to content

Instantly share code, notes, and snippets.

@zeratax
Created July 23, 2013 20:56
Show Gist options
  • Save zeratax/6066089 to your computer and use it in GitHub Desktop.
Save zeratax/6066089 to your computer and use it in GitHub Desktop.
NeonByte NavBar
/**
* NeonByte NavBar
*/
body{
background-color: #555555;
}
a {
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration:none;
text-align: center;
}
<;link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
{
}
ul.menu-boxes a.box{
float:left;
color:white;
font-family: 'Raleway', sans-serif;
background-color: #adf500;
width: 120px;
height: 35px;
z-index: 1;
font-size: 1.5em;
border-left: 1px white solid;
-moz-boxhadow: 1px 1px #3e5800, 2px 2px #3e5800, 3px 3px #3e5800, 4px 4px #3e5800, 5px 5px #3e5800, 6px 6px #3e5800, 7px 7px #3e5800, 8px 8px #3e5800;
-webkit-box-shadow: 1px 1px #3e5800, 2px 2px #3e5800, 3px 3px #3e5800, 4px 4px #3e5800, 5px 5px #3e5800, 6px 6px #3e5800, 7px 7px #3e5800, 8px 8px #3e5800;
-moz-transition: 0.52s ease-out;
-webkit-transition: 0.52s ease-out;
}
ul.menu-boxes a.box:hover{
color:black;
width: 120px;
height: 80px;
background-color: #f5c300;
z-index: 1;
border-left: 1px transparent solid;
-moz-box-shadow: 1px 1px #cea400, 2px 2px #cea400, 3px 3px #cea400, 4px 4px #cea400, 5px 5px #cea400, 6px 6px #cea400, 7px 7px #cea400, 8px 8px #cea400;
-webkit-box-shadow: 1px 1px #cea400, 2px 2px #cea400, 3px 3px #cea400, 4px 4px #cea400, 5px 5px #cea400, 6px 6px #cea400, 7px 7px #cea400, 8px 8px #cea400;
-webkit-animation-name: boxPulse;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1.4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0.52s;
}
ul.menu-boxes a.box:active{
background-color: #f54900;
-moz-boxhadow: 1px 1px #ba3700, 2px 2px #ba3700, 3px 3px #ba3700, 4px 4px #ba3700, 5px 5px #ba3700, 6px 6px #ba3700, 7px 7px #ba3700, 8px 8px #ba3700;
-webkit-box-shadow: 1px 1px #ba3700, 2px 2px #ba3700, 3px 3px #ba3700, 4px 4px #ba3700, 5px 5px #ba3700, 6px 6px #ba3700, 7px 7px #ba3700, 8px 8px #ba3700;
-moz-transition: 0.12s ease-out;
-webkit-transition: 0.12s ease-out;
}
@-webkit-keyframes boxPulse {
from {
height: 80px;
}
50%{
height: 90px;
}
}
<ul class="menu-boxes">
<a class="box" href="#" > Neon</a>
<a class="box" href="#" > Byte</a>
<a class="box" href="#" > Forum</a>
<a class="box" href="#" > Media</a>
<a class="box" href="#" > Profile</a>
<a class="box" href="#" > More</a>
</ul>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment