Outstanding New Menu Method with CSS3

So you saw the button tutorial and thought to yourself how could I make this better? Well it would help if you could apply the same style to all aspects of your website giving off a consistent look and feel. So here I am to proudly present an outstanding new menu method with CSS3. The goal of this brief tutorial is to illustrate the concepts of using gradients and movement all from within CSS3!

This is what we will be making: (Click to see it live)

Just scroll to the bottom to get the source of the style sheet and menu if you are a go getter.

The two main methods focused on here are the gradient and animation features of CSS3. The gradient tool allows you to blend colors from top to bottom and removes that specific need from creating an image. They are not perfect yet, but the speed improvement can be significant if you do it properly.


background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#f0f0f0');

The animation tool is a little more complex, but still a lot easier and less resource intensive than creating the javascript to animate it. With CSS3 you can create animations to replace animated images (gifs), Flash animations, and javascript in web pages / applications.



	opacity:0;
	filter: alpha(opacity=0);

	-webkit-transition: .3s top ease-in, .3s opacity ease-in;
	-moz-transition: .3s top ease-in, .3s opacity ease-in;
	-o-transition: .3s top ease-in, .3s opacity ease-in;
	-ms-transition: .3s top ease-in, .3s opacity ease-in;
	transition: .3s top ease-in, .3s opacity ease-in;

This is how the menu should look. For some reason the syntax highlighter kept converting this to actual html. Just remove the space right before every tag. Sorry for that trouble. If you want you can just view source on the demo and copy that menu.




< ul class="menu css3tutorial">
	< li>< a href="#">My Number< span class="blue">10< /span>< /a>< /li>
	< li>< a href="#">Your Number< span class="pink">14< /span>< /a>< /li>
	< li>< a href="#">Our Number< span class="yellow">24< /span>< /a>< /li>
	< li>< a href="#">Done< /a>< /li>
< /ul>


This is how our stylesheet should look:

ul, a {
	padding:0;
	text-decoration:none;
}

.css3tutorial.menu {
	display: inline-block;

	background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	background-image: linear-gradient(top, rgb(249, 249, 249), rgb(240, 240, 240));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#f0f0f0');

	-webkit-border-radius:0.2em;
	-moz-border-radius:0.2em;
	border-radius:0.2em;

	border:1px solid #cecece;

	-webkit-box-shadow:
		inset 0px 1px 0px #fff,
		0px 1px 2px rgba(0,0,0,.06);
	-moz-box-shadow:
		inset 0px 1px 0px #fff,
		0px 1px 2px rgba(0,0,0,.06);
	box-shadow:
		inset 0px 1px 0px #fff,
		0px 1px 2px rgba(0,0,0,.06);
}

.css3tutorial.menu li {
	float:left;
	position:relative;

	border-right:1px solid #d8d8d8;
	border-left:1px solid #ffffff;
}
.css3tutorial.menu li:first-child { border-left:none; }
.css3tutorial.menu li:last-child  { border-right:none;}

.css3tutorial.menu li a {
	font-family:'Helvetica Neue', Helvetica, sans-serif;
	font-size:0.75em;
	font-weight:bold;
	color:#666666;
	text-shadow:0px 1px 0px #ffffff;

	display: block;
	padding:0 1em;
	line-height:2.5em;
}

.css3tutorial.menu li a span {
	position:absolute;
	top:-2em;
	right: 0.5em;

	width: 1.5em;
	height: 1.5em;

	line-height:1.5em;
	text-align:center;

	font-family:"Helvetica Neue";
	font-weight:bold;
	color:#fff;
	text-shadow:0px 1px 0px rgba(0,0,0,.15);

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,35),
		0px 1px 1px rgba(0,0,0,.2);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.35),
		0px 1px 1px rgba(0,0,0,.2);

	-webkit-border-radius:4em;
	-moz-border-radius:4em;
	border-radius:4em;

	opacity:0;
	filter: alpha(opacity=0);

	-webkit-transition: .3s top ease-in, .3s opacity ease-in;
	-moz-transition: .3s top ease-in, .3s opacity ease-in;
	-o-transition: .3s top ease-in, .3s opacity ease-in;
	-ms-transition: .3s top ease-in, .3s opacity ease-in;
	transition: .3s top ease-in, .3s opacity ease-in;
}

.css3tutorial.menu li a span.pink {
	background-image: -webkit-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -moz-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -o-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: -ms-linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	background-image: linear-gradient(top, rgb(247, 130, 151), rgb(244, 102, 119));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f78297', EndColorStr='#f46677');

	border:1px solid #ce4f5e;
}
.css3tutorial.menu li a span.yellow {
	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

	border:1px solid #dea94f;
}
.css3tutorial.menu li a span.blue {
	background-image: -webkit-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -moz-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -o-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: -ms-linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	background-image: linear-gradient(top, rgb(172, 228, 248), rgb(108, 205, 243));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ace4f8', EndColorStr='#6ccdf3');

	border:1px solid #79b5cb;
}
.css3tutorial.menu li:hover a span {
	top:-1em;
	opacity:1;
	filter: alpha(opacity=100);
}

It is as simple as that! If you have any questions feel free to post in the comments or contact me directly. Enjoy programming, coding, or scripting.