Personalizar enlaces con CSS

Aunque los diseñadores web suelen tener un gran control sobre cómo debería presentarse un documento, css no ofrece muchas opciones para aplicar estilos a los subrayados de los enlaces. Pero con unos pequeños trucos podemos recuperar el control de la apariencia de los enlaces. – mas –

Los subrayados personalizados nos permiten nuevas oportunidades creativas que pueden resultar apropiadas para algunas páginas. También pueden utilizarse para proporcionar pistas visuales sobre los diferentes tipos de enlaces que tiene el documento.

Empezando

Lo primero que hay que hacer es crear un gráfico para el subrayado, que repetiremos horizontalmente. Si queremos que se vea el fondo, hay que crear un gif transparente.

Si nuestro gráfico para los subrayados tiene más de un par de píxeles de alto, antes que nada, tenemos que aumentar el alto de línea (line-height) del texto para tener espacio por debajo de la línea para el gráfico:

p { line-height: 1.5; }

Antes de poder crear nuestro subrayados tenemos que quitar el que ya hay por defecto:

a { text-decoration: none; }

Para crear el subrayado personalizado, le pondremos un fondo al elemento enlace:

a { background-image: url(underline.gif); }

Queremos que nuestro gráfico se repita horizontalmente debajo del texto pero no se repita verticalmente, pues en ese caso aparecía por detrás del texto del enlace, así que limitaremos la imagen para que se repita a lo largo del eje x:

a { background-repeat: repeat-x; }

Para asegurarnos de que el gráfico aparece debajo del texto del enlace, indpendientemente del tamaño de la fuente, posicionaremos el fondo para colocar la imagen en la parte de abajo del elemento enlace. Algunos fondos, como las flechas puede que quieras posicionarlo a la derecha por ejemplo. En nuestro ejemplo vamos a posicionar el gráfico abajo y a la derecha:

a { background-position: 100% 100%; }

Para crear un espacio para el gráfico debajo del texto, necesitamos un poco de relleno (padding). La posición exacta del gráfico en relación con la línea inferior del enlace dependerá del tamaño de fuente que estemos utilizando. Nuestro consejo es empezar con un relleno inferior (bottom-padding) igual a la altura del gráfico que vamos utilizar e irlo ajustando a nuestras necesidades:

a { padding-bottom: 4px; }

Cómo nuestro gráfico se coloca en la parte de abajo en elemento enlace, necesitamos asegurarnos de que nuestros enlaces no abarcan varias líneas. (Si permitimos que ocupen varias líneas, sólo mostraría el gráfico la línea de abajo. Usaremos la propiedad white-space para evitar que los textos de nuestros enlaces ocupen más de una línea

a { white-space: nowrap; }

Podemos combinar todas las propiedades CSS del elemento enlace:

a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}

Si lo que quieres es que aparezca el subrayado personalizado sólo cuando se pasa el ratón por encima, sólo tienes que poner las propiedades de fondo a la pseudo clase :hoover en lugar de directamente en el elemento enlace.

a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}

a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}

Ejemplos

los ejemplos están en un archivo aparte. Para ver el código no tenéis más que ir al MENÚ edición y seleccionar “ver código fuente”.

Traducción del artículo original de Stuart Robertson publicado en alistapart

Translated with the permission of A List Apart Magazine and the author[s].

NOTA IMPORTANTE: Este artículo tiene copyright de alistapart. Este artículo NO ESTÁ BAJO CREATIVE COMMONS

Volver al índice

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s