Hoy un pequeño apunte de como crear un menú con HTML y CSS 3 que no tendrá nada que envidiar al de algunas páginas creadas completamente en Flash.

Al principio de este post, quería conseguir replicar el menú de la web de Apple, pero este hace uso de JavaScript en la opción del buscador (o yo no he sabido conseguir ese efecto solo con CSS 3), y el objetivo principal de este post es crear un menú enteramente en CSS 3, en lo que respecta a su comportamiento.

Para los más impacientes lo primero es mostrarle la demo del menú en CSS 3.¿os gusta?, bien pues vamos a ponernos manos a la obra...

Lo primero es el código HTML que he usado:

Hoy voy a hablar sobre el uso de fuentes embebidas con la propiedad CSS @font-face y los inconvenientes con los que nos podemos encontrar en la maquetación de una web si usamos esta propiedad.

Para aquellos que no lo sepan, con la propiedad CSS @font-face es posible utilizar fuentes en nuestros diseños sin necesidad de tenerlas instaladas en el equipo cliente. Hasta no hace tanto esto no era posible, y limitaba bastante el diseño web, por lo tanto, esta propiedad supone un gran avance.

Esta propiedad no es nueva, ya existía en la especificación de CSS 2, se eliminó en CSS 2.1 (que usaban la mayoría de los navegadores) y ha vuelto con CSS 3.

La siempre "difícil tarea" para que, en la medida de lo posible, las web se vean similares y correctamente en los distintos navegadores (o browser), me encuentro que los hack css que he venido usando para Opera, no funcionan en la última versión estable del navegador Opera 11.

Navegando por internet me encuentro con un nuevo hack css para este navegador.

Para dar dinamismo a nuestras páginas web vamos a ver como se crean transiciones usando la tecnología de CSS3.

Podemos ver en este ejemplo si estáis usando las últimas versiones de navegadores como Firefox, Chrome o Safari.

Para empezar vamos a ver el código HTML que he usado para la creación de este menú social con esta transición y que da un efecto de rotación a las imágenes usadas.

Os dejo un videotutorial de carlesreig sobre como realizar sombras interiores en GIMP

Tutorial para crear efecto de sombra interior en Gimp

Para los que se dedican o piensan dedicarse a desarrollar páginas web tendrán que tener muy en cuenta a la hora de maquetar las web con CSS las diferencias que existen entre los distintos navegadores.

La gran mayoría de navegadores no suele presentar grandes diferencias de la misma web mientras no hablemos del software de la familia Microsoft. Estos interpretan (o no) las propiedades de las hojas de estilos de una forma diferente al resto, es más, entre ellos también se perciben diferencias.

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ú:

Algo que se echa en falta a la hora de escribir código CSS es el uso de variables en las hojas de estilos. Para poder utilizar variables os traigo un truco, nada nuevo, que ayuda a realizar esta tarea de una forma sencilla.

El truco consiste en crear un archivo.php con la siguiente cabecera:

<?php header("Content-type: text/css; charset: UTF-8");?>

Ahora solo teneis que escribir el CSS como en cualquier hoja de estilos.