Webmaster Libre

Desarrollo web con software libre

Buscador

Iconos automáticos para describir tus enlaces

Seguro que durante los últimos meses habéis visto un montón de páginas haciéndose eco de un fantástico tutorial de Ask the CSS Guy que nos enseñaba como conseguir que nuestros enlaces mostraran iconos identificando su destino. (Showing hyperlink cues with CSS).

Iconize your text links

Sin duda, es un efecto bonito que, usado con moderación, añade un punto extra de usabilidad a nuestras páginas. Como seguro sabéis, el contrapunto es que puede ser tedioso preocuparse de agregar estilos para todos los tipos de cosas que podemos llegar a enlazar y que, al usar selectores avanzados, no funciona en el aún omnipresente Internet Explorer 6.

Si sois de los vagos, como yo, habréis estado dejando pasar esta técnica, pero hoy, desde Infected FX nos llega la solución: Iconize text links with CSS.

Desde el sitio de Alexander Kaiser podréis descargar una completa CSS acompañada de los iconos necesarios para que con sólo subir los archivos y copiar el código en vuestra CSS (o llamarlo desde otra petición, que ya sabéis que no es tan sano para el servidor) podáis empezar a utilizarlo.

Además, con sobreescribir los iconos o editar un poco la CSS ya lo tendremos totalmente personalizado. Buena idea ¿eh?

Otras entradas

Esta entrada fue publicada por Alma Fernández el Miércoles, 12 de Diciembre de 2007 y está archivada en: CSS, Recursos. Puedes dejar un comentario, o enviar un trackback desde tu sitio.

3 Comentarios

Agrega el tuyo
  1. Hola Alma.

    Efectivamente el uso de esta técina tiene el problema del explorer 6, que no puede con los selectores avanzados de css [1].

    Yo he creado un plugin para jquery, que soluciona esto y además le he metido un par usos más, como el de si el enlace es externo a nuestro sitio, nos coloca el atributo target=’blank’, con lo cual nuestro código además de ser más usable es accesible.

    También si nuestro sitio externo tiene un favicon, nos puede colocar ese como icono externo si lo deseamos.

    Tengo varias versiones y algunas mejoras pendientes, por ahora voy por la versión 0.3 :).

    Te lo comento por si te interesa probarlo, yo encantado de mejorarlo.

    Saludos

    jquery-links :
    [0] http://www.noth.es/2007/11/24/actualizacion-del-jquery-link-version-03/

    [1] http://www.librosweb.es/css/capitulo2/selectores_avanzados.html

    noth 13 Diciembre, 2007

  2. Tiene muy buena pinta, si señor. Solucionas varias cosas con un solo plugin y usando jQuery, definitivamente lo probaré.

    Alma Fernández 13 Diciembre, 2007

  3. Una ayuda visual siempre viene bién, yo lo utilizo bastante y ahora con tu artículo mucho más! :D

    gracias!

    silvia 10 Enero, 2008

Comentar:

Algunas etiquetas HTML permitidas:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Blogalaxia BlogESfera - Directorio de Blogs Hispanos Web Developement Blogs - BlogCatalog Blog Directory