Como ya sabrás, las animaciones de CSS3 son una poderosa herramienta que te permite crear animaciones que se ejecuten sin necesidad de aplicar scripts adicionales en la página. Pero no solo de esto vive CSS3, los navegadores modernos son capaces de ejecutar características tan importantes como las transformaciones 3D.
Las animaciones de CSS3 son soportadas por la mayoría de navegadores modernos como Chrome, Safari, Opera y Firefox, lo que significa una gran parte de la cuota de mercado de los navegadores actuales.
En este tutorial vamos a desarrollar algo práctico, un sencillo menú de navegación animado con CSS3, el cual se ejecutará de manera distinta en navegadores antiguos y de manera óptima en los actuales navegadores. ¿Estás listo? Pues vamos a ello.
El XHTML
El menú está organizado en base a una lista desordenada. Esta es la estructura más adecuada para un menú, ya que nos proporciona una manera sencilla de personalizar los enlaces del menú y es semánticamente correcto.
<ul id="navigationMenu">
<li>
<a class="home" href="#">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="#">
<span>About</span>
</a>
</li>
<li>
<a class="services" href="#">
<span>Services</span>
</a>
</li>
<li>
<a class="portfolio" href="#">
<span>Portfolio</span>
</a>
</li>
<li>
<a class="contact" href="#">
<span>Contact us</span>
</a>
</li>
</ul>
Dentro de cada li tenemos un hipervínculo con un span dentro. Por defecto, estos span son hidden, y solamente se mostrarán cuando poses el ratón encima del elemento. Cada enlace tiene un nombre de clase único, que es utilizado para proporcionarle un fondo único y darle estilo al span interior, como verás dentro de un momento.
El CSS
Una vez tengamos la estructura básico, podemos empezar a crear los efectos de CSS3 y a darle un poco de estilo. Esto funciona incluso en los navegadores que no soportan las animaciones de transición de CSS3, aunque de forma menos brillante. El menú se puede utilizar incluso en navegadores tan arcaicos como IE6.
*{
/* A universal CSS reset */
margin:0;
padding:0;
}
body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
Para personalizar el fondo del body, primero le he dado un color de fondo, que actua como fallback, y después he añadido dos degradados radiales de CSS3 como imagen de fondo. Si el navegador del usuario no soporta degradados, se omiten dichas reglas y se le aplica un color de fondo plano.
Puedes ver en los estilos que la mayoría de reglas están precedidas por el id de la lista desordenada, como ya sabéis es #navigationMenu. Esto se utiliza para evitar colisiones con el resto de estilos de tu página web, en el caso de que lo incorporases como menú de tu sitio.
#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
/* The background sprite: */
background:url('img/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
La propiedad transition de CSS3 es muy poderosa. Te permite animar los cambios que se producen en un elemento cuando las pseudo-propiedades surten efecto. Por ejemplo, aquí, cuando el usuario mueve el ratón sobre un enlace del menú de navegación, la pseudo-propiedad hover entra en acción, mostrando el span que está oculto.
Sin definir la propiedad propiedad de transición, el cambio sería instantáneo. Pero con una transición podemos animarlo. Aquí le estamos diciendo al navegador, que la duración de la animación es de 250 milisegundos.
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
/* Blue Button */
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
/* Yellow Button */
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
/* Purple Button */
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
En la última parte del CSS, especificamos 5 diseños diferentes para el menú de navegación. Todas las imágenes de fondo para los enlaces están dentro de un solo archivo de sprites. Tienen un normal y un hover uno debajo de otro. Cuando se produce un hover, el fondo se compensa para mostrar la versión adecuada de la imagen de fondo.
Con esto, nuestro menú de navegación minimalista en CSS3 está completo.