Links con iconos usando condicionales CSS
Algo que queda muy bien y sirve para guiar a los usuarios: iconos distintos para links a tipos de archivo especÃficos: Un Ãcono para los PDF, otro para los ZIP, y hasta para links salientes a otros sitios. Obviamente lo ideal es que los Ãconos aparezcan automáticamente para cada link, y no estar cargándolos manualmente.
Si no sabÃas cómo hacer esto usando solamente CSS, te comento que resulta estúpidamente sencillo:
Lo principal es entender el simple funcionamiento de los condicionales “^” y “$“. El condicional “^” significa empieza con, y “$” significa termina con.
Sabiendo eso puedes añadir iconos a los links salientes, que son los que empiezan con http://
a[href^="http://"] {
estilos para los links salientes
}
Y también puedes añadir cualquier cosa a los links con extensiones especÃficas, en este caso daremos un estilo diferente a todos los links que terminan en .rar:
a[href$=".rar"] {
estilos para los links a archivos .rar
}
El resto es solo cuestión de experimentar un poco, los condicionales funcionan con cualquier navegador medianamente nuevo.
3 Comentarios en “Links con iconos usando condicionales CSS”
Información Bitacoras.com…
Valora en Bitacoras.com: Algo que queda muy bien y sirve para guiar a los usuarios: iconos distintos para links a tipos de archivo especÃficos: Un Ãcono para los PDF, otro para los ZIP, y hasta para links salientes a otros sitios. Obviamente lo ideal…..
Pues yo lo he probado en FireFox 3.0.10 (Win), FireFox 3.0.11 (Lin) y IE 7.0 y no me funciona en niguno. Ni siquiera he intentado poner imágenes de fondo, sino simplemente cambiar el color del texto según la extensión! Pero nada.
Aquà tienes el código, no sé si hubiera un error, pero no creo:
<html>
<head>
<style>
a [href$=".zip"] { color:#00c; }
a [href$=".pdf"] { color:#c00; }
a [href$=".jpg"] { color:#0c0; }
</style>
</head>
<body>
<p><a href='mi.zip'>ZIP 00c</a></p>
<p><a href='mi.pdf'>PDF c00</a></p>
<p><a href='mi.jpg'>JPG 0c0</a></p>
</body>
</html>