| Navegación |
|
|
|
|
|
|
|
|
|
Clan Counter 1.6
|
|
|
|
|
|
Zona - Libre
|
|
|
|
|
|
|
|
|
|
Informacion
|
|
|
|
|
|
|
|
|
|
Ayuda Web Maste
|
|
|
|
|
|
|
|
Zona-Descarga
|
|
|
|
|
|
|
|
Zona - Amigos
|
|
|
|
|
|
|
|
|
|
|
| |
Muchas veces necesitamos mostrar iconos al lado de los enlaces, ayuda al lector ademas de que ayudan a expresar el significado del enlace si sabemos utilizarlo correctamente.
Pero, ¿y si estos enlaces fueran “inteligentes” y dependiendo del contenido del enlace, pasaran a mostrar un icono distinto automaticamente?
Esto es lo que vamos a crear con CSS, de forma sencilla.
Enlace a archivo PDF
Codigo CSS
| Código: |
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(http://pooliestudios.com/projects/iconize/icon_pdf.gif) no-repeat center right;
} |
Codigo HTML
| Código: |
| <a href="/vacaciones.pdf">Ver vacaciones</a> |
Enlace hacia correo
Codigo CSS
| Código: |
a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(http://pooliestudios.com/projects/iconize/icon_mail.gif) no-repeat center right;
} |
Codigo HTML
| Código: |
| <a href="mailto:nicksitostaff@gmail.com">Contactame</a> |
Enlace hacia ventanas emergentes
Codigo CSS
| Código: |
a[class ="popup"] {
padding-right: 18px;
background: transparent url(http://pooliestudios.com/projects/iconize/icon_popup.gif) no-repeat center right;
} |
Codigo HTML
| Código: |
| <a class="popup" href="Ayuda.html">Pagina de ayuda</a> |
Mas ejemplos
http://pooliestudios.com/projects/iconize/
Fuente: http://www.askthecssguy.com/
|
|
|
|
|
|
| |
Hoy habia 2 visitantes (2 clics a subpáginas) ¡Aqui en esta página!
PuBlicidad
|
|
|
|
|
|
|
|
