Webizzima - Le ofrecemos al mundo contenido profesional y de avanzada visión para usuarios que buscan grandes horizontes. Todo a la distancia de un clic y en español.

Solo toma segundos tratar de ponerle un nuevo look a tus vínculos. Con ello en mente, aquí te mostramos algunas de las mejores vías para lograrlo, para adquirir ya sea una buena apariencia, así como usabilidad al mismo tiempo.

Cambiarle el estilo a tus vínculos es posiblemente el cambio más fácil al que te enfrentes dentro de tu diseño.

Si tienes seguridad en cómo hacerlo, hay una explicación excelente en Echo Echo. Te mostrará cómo hacerlo.

1. Coloreado, con línea inferior – Este es el estilo más común en internet. El coloreado intensifica las o la palabra haciéndola especial, y combinada con la línea inferior, los usuarios conocen por seguro que están en presencia de un vínculo.CSS – color: #0000ff; text-decoration:underline;
2. Coloreado, sin línea inferior – La línea inferior no es necesaria en todos los casos. Un texto coloreado dentro un artículo casi siempre indica un vínculo. La línea inferior ayuda a la lectura en artículos, pero puede causar desorden en una lista de vínculos de una barra lateral.CSS – color:#0000ff; text-decoration:none;
3. Negrita, con línea inferior – Para diseños sencillos, con mucho negro en blanco, con muy poco color, pudieras no querer colorear los vínculos. En esos casos basta con ponerlos en negrita con línea inferior para indicar que estamos en presencia de un vínculo.CSS – font-weight:bold; text-decoration:underline;
4. Small capitals, con línea inferior – La small capitals es otra vía de enfatizar una palabra. la capitals como tal no son notificables del todo en un párrafo o en un texto. Usa una línea inferior para que sean reconocibles como un vínculo.CSS – font-variant:small-caps; text-decoration:underline;
5. Línea inferior por puntos – La línea inferior por defecto es la sólida. Si le quitas al vínculo la línea inferior, en su lugar si le ponemos la línea por puntos, harás de tu vínculo algo aún más llamativo.CSS – border-bottom: #000000 1px dashed; text-decoration:none;
6. Fondo coloreado – Una buena opción es la de colorear el texto, pero colorear el fondo es una opción mucho más llamativa. Para esta opción, colorear la línea inferior constituye una muy buena mezcla.CSS – background:#e0f6ff; border-bottom:#99c4d5 1px solid; text-decoration:none;

Efectos Ocultar / Mostrar

1. Ocultar / Mostrar la línea inferior – La mayoría de los vínculos poseen un efecto de línea inferior. La manera en que funciona este tipo de efecto es que cuando te posicionas sobre el vínculo, la línea aparece o desaparece, dependiendo de cómo la configures.
2. Cambiar el color – El cambio de color solo se utiliza cuando realmente vale la pena resaltar el texto.
3. No uses negrita, itálica o capital - Se le deben eliminar todo este tipo de condiciones a un vínculo, ya que corrompen el formato de un párrafo, afectando la sangría y el espacio de los renglones en el mismo. En otras palabras, es crear todo un desorden.

¿Qué efecto te gusta más? ¿Cuál usas tú? ¿Por qué? ¿Crees que en este post no se mencionó algo? ¡Cuéntanos!

[Vía ProBlogDesign]