Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Uso de CSS 3 - Transiciones (II) - Creación de un menú

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:

Uso e inconvenientes de fuentes embebidas en el diseño web

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.

Hack CSS para el navegador Opera 11

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.

Uso CSS3 - Transiciones

CSS3Para 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.

Página 1 de 2

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar