Mini iconos en los enlaces externos

Precaución. Esta es una de esas entradas que sólo interesan a diseñadores web, bloggers y similares. Y a estos, no demasiado.

Quizás hallais visto en más de una web pequeños iconos al lado de los enlaces que identifican los enlaces externos a la web (como este). Muchas veces se utiliza Javascript o similares para lograrlo, pero se puede conseguir exactamente el mismo efecto utilizando simple CSS, como ya decía Stuart Langridge hace años. Aunque el utilizar CSS tiene el inconveniente de que solo se podrá ver en navegadores medianamente decentes, o lo que es lo mismo, los que implementen los selectores de CSS3, como Mozilla Firefox (no, en IE no se verá. IE ni tan siquiera se puede llamar navegador).

El CSS necesario tendría una pinta parecida a esta:

.post a[href^=”http:”] {
    background: transparent url(‘./enlace.png’) 100% 50% no-repeat;
    padding-right: 10px;
}

.post a[href^=”http://mundogeek.net”], div.content a[href^=”http://www.zootropo.f2o.org”] {
    background: inherit;
    padding-right: 0px;
}

aunque evidentemente, sustituyendo los nombres de las clases y las direcciones de la web y de la imagen a utilizar como icono.

En este ejemplo utilizamos el selector ^=, en el primer caso para seleccionar todos los enlaces que comiencen con http:, es decir, los enlaces absolutos, estableciendo como fondo la imagen de icono para todos ellos. Pero no todos los enlaces internos son relativos, por lo que utilizamos otros dos selectores para hacer que no se muestre el icono si la dirección web comienza con http://mundogeek.net o http://www.zootropo.f2o.org.

Una lástima que Internet Explorer esté frenando tanto el avance de la red, porque con CSS se pueden hacer cosas bastante interesantes.

Comentarios
  1. Y mientrastanto tengamos que soportar los usuarios IE, como se haría en Javascript? Es compatible/combinable con el mismo efecto en CSS? Es interesante 🙂

    Responder

  2. Muy bueno el truco 😛

    Responder

  3. con Javascript podrías usar getElementByTagName para coger todos los enlaces, aplicar un par de expresiones regulares para quedarte solo con los externos y luego usar enlace.style.background… o algo así

    Responder

  4. Nada de javascript! los que usen IE que se joroben! 😀 Esos son pequeños “premios” para los que sabiamente usan buenos navegadores.

    Por cierto, para entender esos selectores de CSS3 yo uso SelecORacle:
    http://www.processblack.com/weblog/index.php?Id=816

    😉

    Responder

  5. Precisamente tengo (tenia, te me adelantaste xDDD) pendiente hacer un pequeño tip en mi web al respecto de esto.

    Solo que yo lo vi en la Wikipedia, ahi tambien utilizan los selectores de manera muy ingeniosa 🙂

    Responder

  6. bueno, aunque halla yo escrito esto seguro que puedes aportar algo más, ¿nu? ^^

    Responder

  7. Muy bueno el consejo. Va bien pero tengo un problema: el selector también aplica el estilo a las imágenes enlazadas. ¿Hay alguna manera de evitar esto?

    Gracias

    Responder

Deja un comentario