Iconos en los enlaces
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:
-
a[href$='.mp3']{
-
padding-left: 20px;
-
background: transparent url('iconos/icon_music.gif') no-repeat center left;
-
}
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:
-
//Agregas a la lista todos los formatos que quieras que tengan el mismo icono
-
a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.m4a'] {
-
padding-left: 20px;
-
background: transparent url('iconos/icon_music.gif') no-repeat center left;
-
}
Archivo Mp3
Archivo Wav
Archivo Ogg
Archivo Wma
Archivo M4a
Listo!
XD. Veamos ahora esto
Stranger - Hilary Duff en YouTube
With Love - Hilary Duff en YouTube
Se ve aun mejor ;). el codigo seria este:
-
a[href *="youtube.com/watch?"] {
-
padding-left: 32px;
-
background: transparent url('iconos/ytb.gif') no-repeat center left;
-
}
Le aplica el estilo si el atributo "href" contiene "youtube.com/watch?".
Incluso con los 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.


