Contenido

Mejora la usabilidad de tus enlaces con CSS

28 sep

+ 6

Evidentemente la mejor forma de hacer llegar la usabilidad de un enlace a un usuario es mediante la vista, así que hemos de optimizarle los enlaces para que pueda distinguir entre externos, internos, mails, descarga de ficheros, feeds,… y así conseguir hacerle llegar más información acerca del resultado que va a obtener al hacer click sobre ese enlace.

Para ello creo que la mejor forma es usar una imagen que nos permita mostrar claramente el tipo de enlace del que se trata, por ejemplo el sobre de correo para los mails, el símbolo de RSS para los feeds …

Para conseguir esto desde CSS debemos conocer algunos de los selectores de este lenguaje, y una vez conocidos ponernos manos a la obra.

Enlaces externos 

a[href^=”http:”]{
background: url(external.gif) no-repeat right top;
padding-right: 10px;
}

Enlaces a mails

a[href^=”mailto:”]{
background: url(email.gif) no-repeat right top;
padding-right: 10px;
}

Enlace a ficheros

a[href$=”.pdf”]{
background: url(acrobat.gif) no-repeat right top;
padding-right: 10px;
}

Visto esto, solo nos queda adaptar nuesto .pdf al tipo de fichero que queramos destacar.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.