Ir directamente al contenido de esta página

Una elegante barra de navegación sin imágenes

Bordes redondeados, sombras de cajas, degradados… estas son algunas de las herramientas más vistosas que nos proporciona CSS3. Además de ahorrar tiempo de desarrollo, estas propiedades nos permiten eliminar el empleo de imágenes para tales efectos y por tanto reducir el número de peticiones al servidor. Como muestra, he creado una barra de navegación aplicando algunas de ellas.

Las barras de navegación de ejemplo [Firefox 4]

El fondo de la barra: linear-gradient()

Para el fondo de la barra he elegido un estilo de biselado que cuenta con bastante aceptación estos días. Para ello, en lugar de una imagen que repetiríamos hasta cubrir el fondo completo del vínculo, he empleado un degradado lineal tal como se define en la especificación de degradados lineales del W3C.

Primeramente, hay de definir la línea sobre la que se va a trazar el degradado, lo que pude hacerse de dos maneras:

Seguidamente, se deben definir los colores del degradado separados por comas, teniendo en cuenta que:

¿Suena un poco confuso? Bueno, resulta más fácil si se piensa que no es más que una manera de expresar lo que en Photoshop logramos de esta manera:

La herramienta de degradados en Adobe Photoshop CS5

Así pues, mi fondo viselado consiste en un degradado lineal vertical, que debe ser de un color blanco con una opacidad del 20 por ciento a un blanco con una opacidad del 10 por ciento hasta la mitad del elemento, y transparente el resto. Primero veremos cómo se expresa esto en CSS y luego explicaré por qué lo he hecho así en lugar de definir un degradado #323232-#1A1A1A-#000.

La declaración según la especificación sería ésta:


background:linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,.1) 50%,transparent 50%); 

Sin embargo, como en los navegadores actuales aún está en fase experimental, hay que completarla con tres declaraciones adicionales:


background:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,.1) 50%,transparent 50%);
background:-webkit-gradient(linear,0 0,0 100%,color-stop(0,rgba(255,255,255,.2)),color-stop(0.5,rgba(255,255,255,.1)),color-stop(0.5,transparent)); 
background:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,.1) 50%,transparent 50%);
background:linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,.1) 50%,transparent 50%);

Para Firefox (3.6+), la sintaxis es igual a la del W3C, sólo que el valor cuenta con el prefijo -moz-. Con el prefijo -o- conseguimos el mismo efecto en Opera 11.10 o superior.

Si aplicamos -webkit- simplemente, en Chrome 10+ obtenemos el mismo resultado así como en Safari a partir de la versión 5.1. Por eso, he elegido la anterior sintaxis de -webkit-gradient, con lo que amplío los navegadores que interpretan el estilo hasta Chrome 2+ y Safari 4+.

De momento no contamos con soporte para estos degradados en Explorer —versión 9 inclusive—, así que propondría emplear un PNG semitransparente. Existen filtros de Microsoft para crear degradados —MSDN Gradient Filter— pero prefiero no emplearlos, primero porque es código propietario, y segundo porque son más limitados y sólo permiten especificar un degradado completo entre dos colores, sin puntos intermedios.

¿Y por qué empleo el degradado semitransparente? Porque como decía arriba, el degradado se interpreta como una imagen de fondo, es decir, que se representa en un plano superpuesto al del color aplicado por medio de background-color. Aprovechando esto, en lugar de tener que definir un degradado para el estado natural del vínculo y otro para :hover, defino sólo el efecto de bisel para ambos; para cada estado por separado simplemente cambio el color de fondo.

El detalle luminoso de los vínculos: box-shadow (y un pequeño truco con :after)

El elemento azul en la parte inferior de los vínculos cuenta con un halo alrededor que he logrado gracias a la propiedad box-shadow que, como su nombre indica, permite crear una sombra para la caja de un elemento:


-moz-box-shadow:0 -1px 4px rgba(78,225,252,.7);
-webkit-box-shadow:0 -1px 4px rgba(78,225,252,.7);
box-shadow:0 -1px 4px rgba(78,225,252,.7);

Su sintaxis es muy similar a la de la propiedad text-shadow definida ya en CSS2:

Además, aunque no los he empleado, hay dos parámetros adicionales que se podrían añadir:

En cuanto a cuál es el elemento al que se lo he aplicado, podría haber hecho algo así…


<ul>
  <li><a href="#">Vínculo <span></span></a></li>
  <li><a href="#">Vínculo <span></span></a></li>
  <li><a href="#">Vínculo <span></span></a></li>
</ul>

…pero no quería emplear un elemento de marcado sin contenido sólo para lograr un efecto de diseño. Así que la solución fue emplear el pseudoelemento :after de esta manera:


a:after{
  content:" ";
  height:5px;
  position:absolute;
  bottom:3px;
  left:5px;
  right:5px;
  background:#202020;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -moz-transition-duration:.4s;
  -moz-transition-delay:.05s;
  -webkit-transition-duration:.4s;
  -webkit-transition-delay:.05s;
  -o-transition-duration:.4s;
  -o-transition-delay:.05s;
  transition-duration:.4s;
  transition-delay:.05s;
}

Al asignar un espacio en blanco como contenido, los navegadores crean la caja de lo que podríamos llamar un «elemento fantasma» al que aplico los estilos como si de otro elemento cualquiera se tratara: altura, posición, etcétera.

Sólo una nota más: al asignar el estilo del detalle, igual que para el estilo del vínculo en sí, hay que recordar que se deben definir el estado :hover y el de :focus, para que el usuario que navegue por medio de teclado sepa dónde se encuentra. Así, igual que para el vínculo defino sus estados con estos selectores…


a:hover,a:focus{
  ...
}

…la regla para el detalle es:


a:hover:after,a:focus:after{
  background:#4EE1FC;
  -moz-box-shadow:0 -1px 4px rgba(78,225,252,.7);
  -webkit-box-shadow:0 -1px 4px rgba(78,225,252,.7);
  box-shadow:0 -1px 4px rgba(78,225,252,.7);
}

Como se ve, el esfuerzo para mejorar algunos aspectos de la accesibilidad de una página es mínimo, así que no hay excusa.

Bonus: el efecto animado

En las declaraciones anteriores para a:after pueden verse varias propiedades de transición, transition-duration y transition-delay —y las correspondientes con prefijos de navegadores—. Estas propiedades se definen en el módulo de transiciones de CSS3, y lo que especifican respectivamente es la duración del cambio del valor de una propiedad a otro y su dilación. Los valores se pueden expresar en segundos —s— o milisegundos —ms—, y nos permiten añadir un efecto de animación en los vínculos. Los navegadores que lo soportan actualmente son Firefox 3.7+, Chrome 4+, Safari 3.1+ y Opera 10.5+.

Y para terminar…

Por último, aunque se puede ver en el código fuente de nuestra prueba, aquí está la hoja de estilo completa:


*{
  padding:0;
  margin:0;
  border:0;
}

body{
  color:#FFF;
  background:#111;
  font:.8em/1 Helvetica,"Myriad Pro",Arial,sans-serif;
  padding:1em;
}

ul{
  display:table;
  width:100%;
  border-collapse:separate;
  border-spacing:1px 1px;
  margin-bottom:1em;
}

li{
  display:table-cell;
  border:1px solid #000;
}

li:first-child{
  -moz-border-radius:5px 0 0 5px;
  -webkit-border-radius:5px 0 0 5px;
  border-radius:5px 0 0 5px;
}

li:last-child{
  -moz-border-radius:0 5px 5px 0;
  -webkit-border-radius:0 5px 5px 0;
  border-radius:0 5px 5px 0;
}

li:first-child a{
  -moz-border-radius:3px 0 0 3px;
  -webkit-border-radius:3px 0 0 3px;
  border-radius:3px 0 0 3px;
}

li:last-child a{
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
  border-radius:0 3px 3px 0;
}

li a{
  display:block;
  color:#FFF;
  text-shadow:0 -1px 1px rgba(0,0,0,.9);
  text-decoration:none;
  text-transform:uppercase;
  text-align:center;
  padding:15px 10px;
  position:relative;
  background:-moz-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,.1) 50%,transparent 50%);
  background:-webkit-gradient(linear,0 0,0 100%,color-stop(0,rgba(255,255,255,.2)),color-stop(0.5,rgba(255,255,255,.1)),color-stop(0.5,transparent)); 
  background:-o-linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,.1) 50%,transparent 50%);
  background:linear-gradient(top,rgba(255,255,255,.2),rgba(255,255,255,.1) 50%,transparent 50%);
  background-color:#000;
  -moz-transition-duration:.3s;
  -webkit-transition-duration:.3s;
  -o-transition-duration:.3s;
  transition-duration:.3s;
}

a:hover,a:focus{
  background-color:#525564;
}

a:after{
  content:" ";
  height:5px;
  position:absolute;
  bottom:3px;
  left:5px;
  right:5px;
  background:#202020;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -moz-transition-duration:.4s;
  -moz-transition-delay:.05s;
  -webkit-transition-duration:.4s;
  -webkit-transition-delay:.05s;
  -o-transition-duration:.4s;
  -o-transition-delay:.05s;
  transition-duration:.4s;
  transition-delay:.05s;
}

a:hover:after,a:focus:after{
  background:#4EE1FC;
  -moz-box-shadow:0 -1px 4px rgba(78,225,252,.7);
  -webkit-box-shadow:0 -1px 4px rgba(78,225,252,.7);
  box-shadow:0 -1px 4px rgba(78,225,252,.7);
}

Esta entrada se publicó el 21 de mayo de 2011, se archivó en CSS, y fue etiquetada como . Autor: Saúl González Fernández. Hay 1 comentario ›.

Comentarios

  1. Nacho Hernández Moreno dice:
    01/01/2012 a las 12:18

    Buen trabajo, con CSS3 y paciencia se pueden hacer cosas “curiosas”. Gracias por compartir conocimientos. Un saludo.

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2012