Ponle iconos a tus enlaces usando CSS

La idea es muy simple, en Ask the CSS Guy enseñan como agregar iconos a los enlaces utilizando CSS.

 

Es tan sencillo como  agregar:

a[href$=’.extension/URL’] {
padding-right: 20px;
background: transparent url(icons/icono.gif) no-repeat center right;
}

De esta forma si nosotros queremos que aparesca un icono cada vez que linkeamos un archivo .doc pondremos:

a[href$=’.doc’] {
padding-right: 20px;
background: transparent url(icons/doc.gif) no-repeat center right;
}

Y si enlazamos una imágen hacia Flickr tendremos que agregar:

a[href *=”flickr.com/photos/”] {
padding-right: 20px;
background: transparent url(icons/icon_pic.gif) no-repeat center right;
}

Aquí hay un ejemplo de implementación para descargar.

 

Packs de recursos a precios increíbles
Aprovecha la ocasión y hazte con alguno de estos packs con recursos de calidad para profesionales, ahora a precios muy rebajados:
Pack rebajado un 99%1000 fotos rebajadas un 64%

Categorías

CSS

Creativos Online

Perfil del administrador de Creativos Online, el punto de encuentro en Internet para todos los amantes del diseño gráfico y web. ¿Os animáis a... Ver perfil ›

Escribe un comentario