Ver Demo CSS3

Ver screencast (duración: 15:49)

• Descargar videotutorial en alta calidad – MOV (46 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (24 MB)

Como siempre, podéis encontrar todos los screencasts en la página de videotutoriales, o suscribiros al podcast de iTunes.

HTML y CSS

En el fuente del ejemplo de arriba tenéis código completo, pero voy a destacaros aquí las partes importantes. En el CSS:

a.foto{
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(207, 207, 207)));
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -webkit-box-shadow:0px 0px 20px #6F5F4C;
  -moz-box-shadow:0px 0px 20px #6F5F4C;
  -webkit-transition:all .3s linear;
}
a.foto:hover{
  -webkit-transform: rotate(-5deg) scale(1.08);
  -moz-transform: rotate(-5deg) scale(1.08);
}
a.foto span{
  text-shadow:1px 1px 2px #9F886D;
}

Y el HTML:

<a class="foto" href="#">
   <img src="underworld_evolution.jpg" alt="Underworld" />
   <span>Texto descriptivo a pie de foto</span>
</a>

¿Cuándo utilizar estas propiedades?

Es importante tener siempre presente que estas propiedades no son soportadas por todos los navegadores, por lo tanto tenemos que restringir su uso a mejoras estéticas, que no influyan en la maquetación o la usabilidad de la web. Los navegadores que no las soporten (como Internet Explorer) simplemente verán una versión un poco “descafeinada” de nuestro sitio.

También es interesante conocer todo el potencial de CSS3 que nos proporciona webkit si estamos interesados en el desarrollo web móvil, ya que además de Safari y Chrome, los navegadores de iPhone, Android, las nuevas Blackberry, Nokia y Palm Pre están basados en webkit.

Hoy día gracias al avance de los navegadores podemos usar cualquier fuente utilizando la propiedad CSS @font-face, siempre que tengamos en cuenta y respetemos la licencia de cada una, que debe permitir empotrado mediante @font-face. Podemos ver un listado de fuentes y licencias que permiten este uso en el wiki de webfonts.info.
A continuación os explicaré cómo utilizar @font-face para poder usar fuentes de verdad en la web.

La forma fácil

La forma más sencilla es utilizar el generador de fontsquirrel. Simplemente tenemos que subir la fuente que queramos utilizar, marcar los formatos EOT, SVG y WOFF, y nos descargaremos un paquete que contiene nuestra fuente en los distintos formatos y un ejemplo con el código CSS para hacerlo funcionar.

Explicación del CSS. ¿Por qué tantos formatos?

Echemos un vistazo al css para poder usar la fuente Quicksand Light:

@font-face {
   font-family: 'QuicksandLight';
   src: url('Quicksand_Light.eot');
   src: local('Quicksand Light'), local('QuicksandLight-Regular'), 
   url('Quicksand_Light.woff') format('woff'), 
   url('Quicksand_Light.otf') format('opentype'), 
   url('Quicksand_Light.svg#QuicksandLight-Regular') format('svg');
}
h1{font: 60px/68px 'QuicksandLight', Arial, sans-serif;}

En primer lugar definimos el nombre de la fuente con font-family. Este nombre es el que usaremos cuando asignemos dicha fuente mediante la propiedad font, en este ejemplo al h1. Después se debe poner inmediatamente el src con la versión EOT, que es el formato utilizado por Internet Explorer. De esta manera IE descargará y utilizará este formato, y no seguirá buscando los siguientes ya que no reconoce el valor local() del segundo src.
El resto de navegadores ignorarán el EOT y probarán los siguientes formatos hasta que encuentren uno que funcione en ellos. WOFF es el nuevo formato que será soportado por Firefox 3.6 y apunta a ser el futuro en los formatos de fuentes empotradas, así que no está de mas incluirlo. Firefox 3.5, Safari, Opera y Chrome 4 usarán el fichero OTF o TTF.
El formato SVG es necesario para versiones antiguas de Chrome y Safari para iPhone.
Después solo nos queda añadir la propiedad font a los elementos que queramos, sin olvidarnos de añadir otras fuentes web-safe por si algo falla (en este caso Arial y sans-serif).

Aquí podemos ver una una demo utilizando la fuente Quicksand.

Finalmente, si no queremos pasar por el proceso de buscar una fuente con licencia empotrable y convertirla, podemos utilizar los kits de fontsquirrel, entre los que tenemos una amplia selección de fuentes preparadas para descargar en paquetes que contienen todos los formatos necesarios, con un fichero html y css de ejemplo de uso.

HTML

Para el html del menú vamos a emplear la estructura típica de listas anidadas. La última entrada será un enlace directo, sin submenú:

<ul id="menu">
<li><a href="#">Menu 1</a>
	<ul>
		<li><a href="#">Submenu 1</a></li>
		<li><a href="#">Submenu 2</a></li>
		<li><a href="#">Submenu 3</a></li>
		<li><a href="#">Submenu 4</a></li>
	</ul>
</li>
<li><a href="#">Menu 2</a>
	<ul>
		<li><a href="#">Submenu 1</a></li>
		<li><a href="#">Submenu 2</a></li>
		<li><a href="#">Submenu 3</a></li>
		<li><a href="#">Submenu 4</a></li>
	</ul>
</li>
<li><a href="#">Menu 3</a>
	<ul>
		<li><a href="#">Submenu 1</a></li>
		<li><a href="#">Submenu 2</a></li>
		<li><a href="#">Submenu 3</a></li>
		<li><a href="#">Submenu 4</a></li>
	</ul>
</li>
<li><a href="#">Menu sin submenu</a></li>
</ul>

Añadiendo el CSS

Para dar estilo al menú tenemos primero que quitar los estilos por defecto de las listas, eliminar los bullets y márgenes y añadirle display:block para que queden perfectamente alineados los elementos uno debajo de otro. Después tenemos que ocultar con display:none los submenús para que aparezcan todos colapsados por defecto. Vamos a añadir algunas extensiones de CSS3 para mejorar visualmente nuestro menú. Estás extensiones sólo serán visibles en navegadores modernos (Firefox, Chrome y Safari), pero no en Internet Explorer. De esta manera podemos añadir bordes redondeados y sombras al menú y al texto. La propiedad -webkit-transition solo funciona en navegadores basados en webkit (Safari y Chrome), y la utilizaremos para mejor el hover añadiendo un fundido en el color del texto y el background. En los navegadores que no soporten estas propiedades simplemente veremos el menú con esquinas normales, hover típico on-off de CSS y sin sombras.

#menu{
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:1px 1px 3px #888;
	-moz-box-shadow:1px 1px 3px #888;
}
#menu li{border-bottom:1px solid #FFF;}
#menu ul li, #menu li:last-child{border:none}	
a{
	display:block;
	color:#FFF;
	text-decoration:none;
	font-family:'Helvetica', Arial, sans-serif;
	font-size:13px;
	padding:3px 5px;
	text-shadow:1px 1px 1px #325179;
}
#menu a:hover{
	color:#F9B855;
	-webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#6594D1;}
#menu ul a:hover{
	background-color:#FFF;
	color:#2961A9;
	text-shadow:none;
	-webkit-transition: color, background-color 0.2s linear;
}
ul{
	display:block;
	background-color:#2961A9;
	margin:0;
	padding:0;
	width:130px;
	list-style:none;
}
#menu ul{background-color:#6594D1;}
#menu li ul {display:none;}

Añadiendo la funcionalidad con jQuery

Ahora vamos a ver lo sencillo que es hacer funcionar nuestro menú vertical. Primero añadimos el evento click a cada enlace del menú. Después comprobamos si el siguiente elemento tras el enlace es un ul, ya que si es así este contendrá un submenú, si no será un elemento de un submenú o bien un elemento principal que no contiene submenú (en nuestro ejemplo, el último enlace). Si contiene un submenú, al hacer click este se expandirá o colapsará (slideToggle()), a la vez que colapsaremos el submenú que esté visible que no sea el actual. La función event.preventDefault() sirve para evitar que cuando hagamos click el navegador siga el enlace del href tras ejecutar nuestra función javascript.

<script type="text/javascript" charset="utf-8">
$(function(){
	$('#menu li a').click(function(event){
		var elem = $(this).next();
		if(elem.is('ul')){
			event.preventDefault();
			$('#menu ul:visible').not(elem).slideUp();
			elem.slideToggle();
		}
	});
});
</script>

Podéis escribir en los comentarios cualquier duda que tengáis e intentaré responderla, así como sugerencias para próximos tutoriales.

Imágenes

La única imagen que vamos a utilizar es este gradiente para el fondo de los submenús, que además del efecto relieve que proporciona, nos ayudará a realizar las transiciones del hover.

HTML

El html empleado es una simple lista con otra lista anidada para cada submenú:

<ul id="nav">
	<li><a href="#">Menu 1</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 2</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 3</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Menu 4</a>
		<ul class="submenu">
			<li><a href="#">Submenu 1</a></li>
			<li><a href="#">Submenu 2</a></li>
			<li><a href="#">Submenu 3</a></li>
		</ul>
	</li>
</ul>

Añadiendo el CSS

La mayor parte del css son para mejorar el aspecto visual del menú. Funcionalmente, podemos destacar varias cosas. Los elementos de la lista principal (#nav) se encuentran flotados a la izquierda, para formar el menú horizontal, y tienen position: relative para que sirva de referencia a cada submenú. A la lista del submenú le asignamos position: absolute, para que cuando se despliegue esté situada bajo su menú correspondiente. Este submenú lo ocultamos por defecto con display: none para después mostrarlo con javascript cuando pasemos el ratón por encima de su menú padre. A cada enlace del elemento del submenú añadiremos la imagen del gradiente como background.

a{
display: block;
text-decoration: none;
color: #004a80;
padding: 5px;
}
 
ul{
width: 500px;
height: 28px;
}
 
ul,li{
list-style: none;
margin:0;
padding:0;
}
 
#nav{
font-family: 'Century Gothic', sans-serif;
}
 
#nav li{
float:left;
position: relative;
width: 125px;
font-size: 14px;
font-variant: small-caps;
border-top:1px solid #004a80;
border-bottom:1px solid #004A80;
}
 
.submenu{
display: none;
position: absolute;
left: -1px;
border:none;
height: auto;
background: none;
}
 
#nav .submenu li{
float: none;
position: static;
margin: 0;
font-size: 11px;
font-variant: normal;
border: 1px solid #004a80;
border-top: none;
width: 124px;
}
 
#nav .submenu li a{
color: #FFFFFF;
background: #004a80 url('fondo_menu_vertical.png') repeat-x 0 0;
width: 114px;
height: 16px;
}

Javascript y jQuery

Ahora añadiremos la funcionalidad del menú. Para ello necesitaremos primero incluir la librería jQuery, que podemos hacerlo cargándola directamente desde el repositorio de Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>

También necesitaremos añadir el plugin backgroundPosition para jQuery, ya que éste no soporta de serie la animación de la propiedad background-position. Lo descargaremos y añadiremos así:

<script type="text/javascript" src="jquery.backgroundPosition.js"></script>

Finalmente, con unas pocas líneas de código, usando la función slideDown/slideUp y el evento hover mostraremos el submenú correspondiente cuando pasemos el ratón por uno de los elementos del menú principal. Usando la función animate, al pasar el ratón por encima de cada entrada del submenú se cambiará la propiedad background-position, deslizando la imagen del gradiente y creando un efecto de fundido rápido, para que la transición sea más suave que si utilizáramos simplemente a:hover para cambiar el color de fondo del enlace activo.

<script type="text/javascript">
$(function(){
	$('#nav>li').hover(
		function(){
		$('.submenu',this).stop(true,true).slideDown('fast');
		},
		function(){
		$('.submenu',this).slideUp('fast');
		}
	);
 
	$('.submenu li a').css( {backgroundPosition: "0px 0px"} ).hover(
		function(){
		$(this).stop().animate({backgroundPosition: "(0px -99px)"}, 250);
		},
		function(){
		$(this).stop().animate({backgroundPosition: "(0px 0px)"}, 250);
		}
	);			
});
</script>

Preparando las imágenes

En primer lugar montaremos los tres estados del botón (normal, hover y activo) en un sprite tal que así:

La técnica de sprites consiste en utilizar una única imagen para todos los casos, mostrando sólo la parte que nos interesa mediante la propiedad background-position. La altura de la imagen es de 30px, de manera que para mostrar cada bloque cambiaremos la posición vertical del fondo a 0, 30px o 60px según el fragmento.

Las etiquetas XHTML

Al contrario que en otras soluciones de menús animados que podemos encontrar por la red, en este método únicamente vamos a usar el markup necesario, no añadiremos etiquetas <span> vacías extra para añadir funcionalidad. Para simplificar incluiremos solo el elemento del ‘Home’:

<ul id="nav">
   <li id="home">
     <a href="#">Home</a>
  </li>
</ul>

Añadiendo el CSS

Haremos que tanto el <li> como el <a> sean de la misma medida fija, para poder jugar con la posición del background. Indentamos el texto para hacerlo desaparecer, de esta manera el menú será completamente accesible y semántico.

ul#nav{
background: transparent url('images/menu.png') no-repeat top left;
}
ul#nav, ul#nav li{
margin:0;
padding:0;
height:30px;
width:83px;
list-style:none;
float:left;
}
ul#nav li#home a{
height:30px;
width:83px;
display:block;
text-indent:-9999px;
background-image: url('images/menu.png') bottom left;
}
ul#nav li#home a:active, ul#nav li.activo{
background-position: url('images/menu.png') 0px 60px;
}

El background del <ul> mostrará la parte superior de la imagen, es decir el estado normal del botón. El enlace contendrá la parte inferior, desplazada mediante el background-position, y permanecerá oculto con javascript hasta que pasemos el ratón por encima. Finalmente el <li> solo tendrá background si nos encontramos en la sección activa del menú, o estamos pulsando el botón (pseudoclase :active).

Entra jQuery

Y ahora viene la madre del cordero, un poco de ‘jQuery magic’:

$(function() {
$("ul#nav li a").css("opacity","0").hover(function() {
	// on mouse over
	        $(this).stop().animate({ opacity: 1 }, 400);
	},
	// on mouse out
	function() {
	        $(this).stop().animate({ opacity: 0 }, 400);
	});
});

Sencillo, ¿verdad? Simplemente cambiamos la opacidad del enlace a 0 al cargar, para que no veamos el fondo que contiene el fragmento hover de la imagen. Después adjuntamos el evento para aumentar la opacidad del enlace hasta hacer visible su fondo cuando pasamos el ratón por encima, realizando la operación inversa al retirar el ratón.
Como puedes ver el funcionamiento de este menú se basa en aprovechar la jerarquía de la lista del menú, apilando fondos en el <ul>, <li> y <a> y mostrando el que nos interesa.

Tras el diseño de la portada, tenía que decidirme sobre qué sistema iba a implementar el sitio. Las páginas iban a ser estáticas en su mayoría, pero me apetecía tener un blog (ya sabéis, hoy en día si no tienes blog la gente te mira raro por la calle). La cosa estaba entre wordpress o hacerme algo a medida con Codeigniter. Al final me decidí por wordpress. Podría decir que lo hice por la facilidad de instalación e uso, versatilidad, los plugins, etc. Mentira. Lo hice por la pijada de turno: la aplicación libre para iPod/iPhone. Quizá no lo use mucho, pero para cualquier geek eso de sacarse el iPod del bolsillo y decir “voy a escribir una entrada en mi blog” es la leche. Ya os contaré que tal va.