CSS3 se está convirtiendo en nuestro gran aliado, para los que practicamos esto del diseño web. Me encanta y creo que la mayoría piensa como yo, y creo que todos estamos impacientes por saber hasta donde podemos llegar con esta tecnología mejorada.

Como ejemplo os pongo la creación de degradados con unas pocas lineas en CSS. Estas lineas son las que he usado en mi menú para que comprobeis que yo no he podido resistirme y lo he usado en el diseño de mi blog.

Os pongo el código CSS que he usado en el menú:

.menu li a:hover {
	background: #3a3a3a; // para <= IE8
	background: -moz-linear-gradient(100% 100% 90deg, #3A3A3A, #252525);  // para firefox
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A3A3A), to(#252525)); // para chrome y safari
}

Este ejemplo es para un degradado vertical, como podeis comprobar con Firefox, Chrome o Safari. Para realizar un gradiente en horizontal tendriamos que modificar el código anterior de la siguiente manera:

.menu li a:hover {
	background: -moz-linear-gradient(100% 100% 180deg, #3A3A3A, #252525); // para firefox
	background: -webkit-gradient(linear, left top, right top, from(#3A3A3A), to(#252525)); // para chrome y safari
}

Por último también podeis realizar degradados radiales modificando algunos de los parametros anteriores:

.menu li a {
	background: -moz-radial-gradient(center 45deg, circle closest-corner, #3A3A3A, #252525); // para firefox
	background: -webkit-gradient(radial, center center, 0, center center, 70, #3A3A3A, #252525); // para chrome y safari
}

Espero os sea de ayuda estas lineas, por cierto, y para quien no lo tenga podeis descargar una Guía rápida de referencia de nuestro amigo Veign.