Micaela 18 de marzo de 2009 a las 11.03
   Imprimir artículo
elWebmaster.com

5 tips para mejorar tus enlaces con CSS y jQuery


cssCambiar colores o subrayar links cuando están activos es algo que harás en todos tus proyectos. La pregunta es cómo darle estilo a los hipervínculos más allá del color o la decoración del texto.

En general, un dise√Īo web profesional se caracteriza por pulir los detalles, sorprendiendo con recursos interesantes pero m√≠nimos. Son el toque especial que hace la diferencia entre un dise√Īo com√ļn y uno sobresaliente. Aqu√≠ te damos 5 tips para crear estilos fuera de serie para tus links.

1. Borde de fondo

No uses el estilo de decoración con texto, puedes hacer algo mejor. Utiliza en su lugar el borde de fondo. Se mostrará una línea por debajo de los links. Además puedes jugar con distintos estilos de borde. Puedes usar borde punteado o con guiones.

  • a { border-bottom: dashed 1px #000; }
  • a:hover { border-bottom: solid 1px #000; }

2. Color de fondo

Puedes enfatizar links programando un color de fondo diferente en a:hover.

backgroundHay dos casos en los que puedes fijar el color de fondo:

  1. Puedes hacerlo cuando est√°n activos, esto es muy √ļtil cuando tienes una lista.
  2. Puedes programar un color de fondo permanente para enfatizar los links todavía más.

Aquí hay un ejemplo:

a { background-color: #dcdcdc; }

3. Links con íconos

S√≠, puedes a√Īadir √≠conos a tus links para decorarlos:

a { background: #fff url('icon.png') no-repeat center left; }

Tambi√©n es posible mostrar el √≠cono √ļnicamente cuando los enlaces est√°n activos, o utilizar √≠conos grises en estado normal y coloreados si se encuentran activos. Juega con esto.

4. Letras may√ļsculas

Si realmente deseas agregarles un toque distinguido, puedes probar haciendo que la tipograf√≠a se convierta en may√ļsculas al posar el mouse sobre el link, de la siguiente manera:

a:hover { text-transform: uppercase; }

uppercaseEn este caso, debes tener cuidado porque lo m√°s probable es que el tama√Īo de la palabra o la frase cambie bastante. Muchas veces los dise√Īadores utilizan este recursos en listados, pero al posar el mouse encima de estos enlaces, las palabras ocupan m√°s lugar, por lo que es com√ļn que bajen una o dos l√≠neas y quede bastante mal.

5. Links animados

Si crees que esto ya es demasiado, te equivocas. Animar los links puede ser bastante asombroso. Toma como ejemplo link nudging con jQuery. Es bonito, entretenido y así de sencillo:

$(document).ready(function() {
$('a.nudge').hover(function() {
$(this).animate({ paddingLeft: '20px' }, 400);
}, function() {
$(this).animate({ paddingLeft: 0 }, 400);
});
});

¬ŅY t√ļ c√≥mo estilizas tus enlaces?

Fuente:  Janko at warp speed


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. sarrianet dice:

    Este artículo si me va a servir, muchas gracias de nuevo

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder