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:
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:
No hay comentarios:
Publicar un comentario