Blog sobre programación, tecnología, humor y más…
Abr
08
26

Iconos en los enlaces

Por: DarkPaladin

Buscando en la web encontre algo muy interesante, se trata de añadir iconos a tus enlaces segun hacia donde o que esten dirigidos. Es algo muy facil de hacer, miren estos ejemplos:

Bonito, ¿no?. Y sin necesidad de clases. Pues es muy facil hacer esto, y tambien entenderlo; este es el codigo css que se tiene que usar, por ejemplo para un mp3:

CSS:
  1. a[href$='.mp3']{
  2. padding-left: 20px;
  3. background: transparent url('iconos/icon_music.gif') no-repeat center left;
  4. }

Archivo Mp3

Lo explico: A los elementos a (enlaces) cuyo atributo href contenga al final '.mp3' aplicale el siguiente estilo. Lo unico que reemplazas es la url donde tienes el icono.

Es facil ;)

Ahora digamos que queremos que todos los archivos de musica tengan el mismo icono:

CSS:
  1. //Agregas a la lista todos los formatos que quieras que tengan el mismo icono
  2. a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.m4a'] {
  3. padding-left: 20px;
  4. background: transparent url('iconos/icon_music.gif') no-repeat center left;
  5. }

Archivo Mp3
Archivo Wav
Archivo Ogg
Archivo Wma
Archivo M4a

Listo! :D XD. Veamos ahora esto

Stranger - Hilary Duff en YouTube
With Love - Hilary Duff en YouTube

Se ve aun mejor ;). el codigo seria este:

CSS:
  1. a[href *="youtube.com/watch?"] {
  2. padding-left: 32px;
  3. background: transparent url('iconos/ytb.gif') no-repeat center left;
  4. }

Le aplica el estilo si el atributo "href" contiene "youtube.com/watch?".

Incluso con los e-mail:

E-mail

Bueno pues es todo. El codigo css completo (claro, le pueden agregar cuantas cosas quieran :D) lo encuentran aqui: Css. Los iconos que use son: Iconos.

Enlace al sitio: pooliestudios

Esta tecnica funciona solo en Firefox, Opera, Safari, Camino e Internet Explorer 7 (inferiores al 7 no funcionan) segun ese sitio.

En: CSS


Trackback URI | Comentarios RSS

3 Comentarios en “Iconos en los enlaces”

  • 1
    # Shawe dijo:

    Es la cosa más absurda para hacer, y nunca había pensado :P Gracias por tu info, lo aprovecharé :D

    Gravatar de Shawe
    Abr
    08
    27
    04:07AM

  • 2
    # Luis dijo:

    Internet Explorer siempre dando problemas. Gracias por el artículo, muy interesante.

    Gravatar de Luis
    Abr
    08
    30
    02:08AM

  • 3
    # Sajhu » Blog Archive » Iconos En Cada Enlace dijo:

    [...] digamos que queremos que todos los archivos de musica tengan el mismo icono: [...]

    Gravatar de Sajhu » Blog Archive » Iconos En Cada Enlace
    Jun
    08
    21
    06:24PM


Deja tu comentario

XHTML: Puedes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Diseño completamente por DarkPaladin. 2008 Todos los derechos reservados.
Creative Commons License
dpaladin theme by Francisco Javier is licensed under a Creative Commons Atribución-No comercial-No Derivadas 2.5 México License.