Nuevos cursores con CSS3

Nuevos cursores con CSS3

El cursor del mouse es un elemento muy poco considerado en el momento del diseño ó al aplicar estilos CSS. Pero la verdad es que es un complemento importantísimo de la accesibilidad y usabilidad, y por esa razón fue considerado en el momento de crearse tantos valores para esta propiedad.

Su uso es muy fácil y es aplicable no sólo a la pseudo-class :hover, sino que a cualquier etiqueta HTML:

<strong style="cursor: help;">¡Ayuda!</strong>

Lamentablemente la visualización de cada tipo de cursor depende del sistema operativo del usuario, y la capacidad de visualizarlo depende del browser que esté utilizando.

A continuación nombro todas las variedades y al final una página de ejemplo con todos ellos aplicados para que tengan al cursor considerado en su próximo proyecto:

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;

CSS3 (funcionan en los browsers modernos (IE9+, FF 3.5+, Chrome, Safari, Opera 9+):

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;

Propietarios (Firefox y Chrome/Safari):

cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;

Tu propio cursor:

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png), default;

* para mejor fallback después del url() utiliza algunos de los cursores CSS2
* Para Firefox y Chrome/Safari utiliza un PNG transparente.
* IE require que sea un archive .cur
* Opera no lo soporta

Ver cursores

Link:

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

textos_muy_largos_que_quiebran_nuestro_layout

Son excepciones, pero suceden momentos en que tienes tu layout bien ordenado y estructurado, y por esas cosas de la vida ingresas un texto muy largo (una URL de esas extensas) o en el comentario alguien lo hace, y toda la armonía que tenías en tu diseño se quiebra. No te quita el sueño, pero [...]

FadeIn/Out en menú con CSS

FadeIn/Out en menú con CSS

Situación: tenemos un menú con N elementos, los cuales se van activando (opacity: 1) a medida que el mouse pasa sobre cada uno, mientras el resto de los elementos permanecen inactivos (opacity: 0.5). Un efecto simple que se puede realizar tranquilamente con CSS y la caída estrepitosa de IE6. Primero, el ejemplo del nunca mal [...]

Diseñando experiencias

Diseñando experiencias

Hace mucho que dejé de trabajar como diseñador gráfico para primero dedicarme al desarrollo front-end, y más recientemente a la arquitectura de información y principalmente al manejo de proyectos digitales. Pero aún así, me encanta diseñar y siempre lo hago para mis proyectos personales, los cuales soy mi propio crítico y jefe. Ante ello, soy [...]

  1. Esta buena la demo con todos los cursores disponibles.

    Gracias!!

    Javier
    09 / Febrero / 2012

  1. [...] jQuery("#errors*").hide(); window.location= data.themeInternalUrl; } }); } www.csslab.cl (via @twittypork) - ...
    CSSLab - Nuevos cursores con CSS3 | Recursos | Scoop.it

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

Cargando