Rollover Help

You could do it with css and an image sprite, or you could do it using css(3) and specifiy a linear grad.
 
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Nav</title>
	
	<style>
		
		body{
			font-family:Calibri, Arial, Verdana, sans-serif;
		}
		#nav{
			list-style:none;
			padding:0;
			margin:0 0 20px 0;
			width:100%;
			overflow:hidden;
			background:#da1b43;
			background:-moz-linear-gradient(-90deg, #f43059, #da1b43);
			background:-webkit-gradient(linear, left top, left bottom, from(#f43059), to(#da1b43));
		}
		#nav li{
			float:left;
		}
		#nav a{
			padding:5px;
			display:block;
			color:#fff;
			text-decoration:none;
			border-left:1px solid #ff5176;
			border-right:1px solid #b82745;
		}
		#nav a:hover{
			background:#222;
			background:-moz-linear-gradient(-90deg, #666, #222);
			background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#222));
		}
		#nav li:first-of-type a{
			border-left:none;
		}
		#nav li:last-of-type a{
			border-right:none;
		}
		
	</style>
	
</head>
<body>
	
	<ul id="nav">
		<li><a href="/">Home</a></li>
		<li><a href="/about/">About</a></li>
		<li><a href="/services/">Services</a></li>
		<li><a href="/portfolio/">Portfolio</a></li>
		<li><a href="/contact/">Contact</a></li>
	</ul>
	
</body>
</html>
 
Cheers guys.

Harry that's incredibly helpful just what I was looking for, I see by the code what Geoff meant by a css gradient. Did you just whip that code up?
 
Yup yup, coded it up of the top of my head: it should work.

Before you copy/paste though, make sure you 100% understand every single piece of it.
Any bit you don't understand just lemme know and I'll explain.
 
wow, well thanks for taking the time to do that. It all seems pretty straightforward now, I found this site (CSS3 Gradient Generator) for actually creating the grads by eye. The only thing is 'overflow:hidden' what exactly does that mean/do?
 
Sunburn said:
@ Harry - Your too generous mate, next your be telling me you work for £5 per hour :) hehee

Haha, five minutes of my time is worth a nice thank-you :)

wac said:
wow, well thanks for taking the time to do that. It all seems pretty straightforward now, I found this site (CSS3 Gradient Generator) for actually creating the grads by eye. The only thing is 'overflow:hidden' what exactly does that mean/do?

No worries.
As for the overflow, see: Float Clearing
 
Back
Top