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.
2 comentarios, 4 referencias
+
#