/mike

While I was mulling through my feeds tonight I saw a link to Dave Shea’s CSS Sprites2 article on A List Apart. To be honest, I haven’t actually read it — though I will soon, promise — but seeing the examples put a bug in my brain. Maybe those effects could be done with CSS3 transitions/animations.

So, I threw together a quick little navigation list and went to work putting some basic styles on it — nothing nearly as fancy as Dave did. What I wanted to do is use -webkit-gradient for a background color, then use -webkit-transition to fade or slide in a different color or background.

Unfortunately this version of the test failed. It would seem that there is no way to transition a -webkit-gradient using -webkit-transition. If I’m wrong, please let me know.

Here’s what I did find out:

• background: -webkit-gradient(...); won’t transition to another background: -webkit-gradient(...); (using -webkit-transition: background 0.3s linear;)
• You can transition an element from -webkit-gradient to a background-color (using -webkit-transition: background-color 0.3s linear;)
• You cannot transition an element from background-color to background: -webkit-gradient; (using either -webkit-transition: background 0.3s linear; or -webkit-transition: background-color 0.3s linear;)
• Transitioning multiple properties — at least in this case — background-color and color the long hand of -webkit-transition needs to be used (-webkit-transition-property: background-color, color; -webkit-transition-duration: 0.3s, 0.3s; -webkit-transition-timing-function: linear, linear;)

Check it out for yourself using this code:

<style type="text/css" media="screen">
ul#nav { float: left; list-style: none outside; width: 100%; }
ul#nav li { border-right: 1px solid; float: left; width: 24.75%; }
ul#nav li.last { border: none; }
ul#nav li a {
	/* background-color: #08c; */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(20,50,100,0.6)), to(rgba(40,70,150,0.6)), color-stop(0.5,rgba(30,60,125,0.6)));
	color: #000;
	display: block;
	line-height: 2;
	text-align: center;
	width: 100%;
}
ul#nav li a:hover {
	background-color: #c80;
	/* background: -webkit-gradient(linear, left top, left bottom, from(rgba(40,70,150,1)), to(rgba(20,50,100,1)), color-stop(0.5,rgba(30,60,125,1))); */
	color: #fff;
	-webkit-transition-property: background-color, color;
	-webkit-transition-duration: 0.7s, 0.3s;
	-webkit-transition-timing-function: linear;
}
</style>
<ul id="nav">
	<li id="home"><a href="#">Home</a></li>
	<li id="projects"><a href="#">Projects</a></li>
	<li id="blog"><a href="#">Blog</a></li>
	<li id="misc" class="last"><a href="#">Misc</a></li>
</ul>

What it looks like (best viewed in the latest version of Webkit or Safari):

• Home
• Projects
• Blog
• Misc