Contenido

Mejora la usabilidad de tus enlaces con CSS

28 Sep

+ 3

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.

tengo que volver a probarlo, pero en su dia probe algo parecido si no igual, y en nuestro querido explorer no funciona, tal ve con la entrada del 7 se dignen a hacer las cosas bien

saludos , cuando lo pruebe te comento

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.


Cerrar
Enviar por Correo