JMiur [E]

Hace ya mucho, mucho tiempo, me había sorprendido por la forma en que se podían identificar los vínculos externos y aprendí eso del uso de los selectores gracias a un comentarista que despejó mis dudas al respecto.

Selectores, pseudo-clases y pseudo-elementos son cosas que usamos habitualmente aunque no nos demos cuenta (más información 1 | 2 | 3)

El más común es el hover:
a {color: white;}
a:hover {color: red;}
Pero hay muchos más y con CSS3 se siguen agregando constantemente. Una cosa así, detecta los enlaces que tienen imágenes en formato JPG y les agrega un ícono a su izquierda:
a[href $='.jpg'] {
  background:url(URL_IMAGEN) no-repeat left top;
  padding-left 20px;
}
Quisque condimentum lacinia ornare! Nulla magna tortor, vehicula eget fringilla sit amet, laoreet at lectus. Donec tempus odio ac ligula tincidunt eget placerat dolor fermentum. Nulla facilisi. Praesent pulvinar felis at eros eleifend sagittis. Cras facilisis nisl id diam condimentum convallis.

Hace poco, ghacks.net publicaba un artículo donde nos mostraban un userscript llamado cursor indicator para la extensión Stylish de Firefox que le daba una variante a esa idea de identificar el tipo de enlace. Esta vez, en lugar de mostrarse un ícono o imagen al lado de ella, lo que cambia es el cursor

En este caso, reconocen archivos de tipo PDF, DOC, EXE, etc y podría ser una alternativa válida para incorporar en un sitio web de manera directa porque los cursores son fácilmente manipulables con CSS ya que puede usarse cualquier tipo de imagen excepto en Internet Explorer que exige que sean imágenes en formato CUR lo que complica las cosas.

Obviamente, nada es perfecto pero, podemos obviar esa incapacidad y seguir adelante porque no afectará en nada al resultado, quien tenga un navegador distinto de IE lo verá bien y quien use IE verá el cursor normal.

Para utilizar cursores personales basta indicar la dirección URL de la imagen que vamos a utilizar; y en este caso, serán estas:


Y las propiedad básicas serían estas:
a[href$=".pdf"]:hover { cursor:url(imagen_1), pointer; }
a[href$=".doc"]:hover { cursor:url(imagen_2), pointer; }
a[href$=".xls"]:hover { cursor:url(imagen_3), pointer; }
a[href$=".txt"]:hover { cursor:url(imagen_4), pointer; }
a[href$=".txt"]:hover { cursor:url(imagen_5), pointer; }
a[href$=".exe"]:hover { cursor:url(imagen_6), pointer; }
a[href ^="mailto:"]:hover { cursor:url(imagen_7), pointer; }
Este es un ejemplo concreto:

4 comentarios:

Indeziisoow  

Se ven muy buenos los cursores. Muy buena la entrada JMiur. :D

Responder
Gem@  

Me encanta la idea pero casi no los veo :S

Responder
Beben Koben  

i'm agree with master gema...
i think we have all out to create trick's or hack's, but...most people not look :D
keep going on to creativity master Vagabundia \m/

Responder
Adrián J. Messina  

Muy bueno, a ver que sale.!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR