Conoce los nuevos cursores con CSS3

Los cursores en internet han tenido siempre una gran importancia, en especial las aplicaciones, porque es el cursor el que indica el estado, o la acción que podemos hacer, como por ejemplo el puntero para link, o las cuatro flechas para arrastrar, o las dos flechas en dos sentidos para acomodar el tamaño de dos elementos.

Por eso hoy vamos a conocer los nuevos cursores con CSS3, de los cuales también ya podemos habilitar la opción de incluir una imagen propia para tener un cursor personalizado.

Entonces, recapitulando un poco CSS, la propiedad que nos permite usar un cursor es “cursor”

Podemos implementar cualquiera de los siguientes con CSS2

cursor: auto;
cursor: inherit;
cursor: crosshair;
cursor: default;
cursor: help;
cursor: move;
cursor: pointer;
cursor: progress;
cursor: text;
cursor: wait;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;

Dependiendo del sistema operativo el tipo de cursor va a ser diferente en forma, pero se supone que al menos la mayoría de los SO soportan los diferentes cursores de CSS2. Ahora con CSS3 podemos expandir la lista por cursores mucho más útiles para diferente tarea en la que intervenga el cursor.

cursor: none;
cursor: context-menu;
cursor: cell;
cursor: vertical-text;
cursor: alias;
cursor: copy;
cursor: no-drop;
cursor: not-allowed;
cursor: ew-resize;
cursor: ns-resize;
cursor: nesw-resize;
cursor: nwse-resize;
cursor: col-resize;
cursor: row-resize;
cursor: all-scroll;

Los anteriores funcionan con los, navegadores modernos, incluso IE+9 así que no debería ser un problema poder usarlos y ver el resultado.

Algo que si hay que recordar es que al aplicar la propiedad de “cursor” todo el elemento es afectado para que cambie el cursor; para que pudieran funcionar correctamente algunos como los que son para redimensionar tendríamos que programarlos para aplicar estilos dinámicamente.

Finalmente CSSLab elaboró una muy buena página donde podemos ver cada cursor en acción, primero los CSS2, luego los CSS3 y por último los que sólo soportan Safari, Chrome y Firefox, para que le echen un vistazo den clic en la imagen de abajo.