Nuevos cursores con CSS3

11/Ene/2012 1082

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:

Comentarios

  1. Loredophertarry [#]

    free slots games big fish casino

  2. Normantam [#]

    casino game online casino slots

  3. DiedraEcope [#]

    casino blackjack free casino games

  4. PatrickMam [#]

    casino online slots online slots

  5. LouiseNorse [#]

    vegas casino slots online casino real money

  6. Skinconsehick [#]

    online slots online casino gambling

  7. DavidMesse [#]

    online casino bonus free slots

  8. AshleyBop [#]

    free casino games play slots

  9. DiedraEcope [#]

    online casino real money casino play

  10. Defattaithaccug [#]

    online casino gambling gold fish casino slots

  11. SharylSet [#]

    no deposit casino online casino games

  12. BotoLyncIntet [#]

    slots free gold fish casino slots

  13. WhitneyHak [#]

    slot games casino blackjack

  14. Williamsalty [#]

    casino bonus codes casino game

  15. Samuelnet [#]

    free casino online casino

  16. WilliamHog [#]

    online casino slots online slot games

  17. SidLok [#]

    gold fish casino slots online casino bonus

  18. JamesDet [#]

    vegas slots online no deposit casino

  19. AshleyBop [#]

    online casino games online casinos

  20. Normantam [#]

    slot games casino real money

  21. BotoLyncIntet [#]

    online casino slots free

  22. Loredophertarry [#]

    online casino bonus vegas casino slots

  23. CarlosBub [#]

    slots online gold fish casino slots

  24. DavidMesse [#]

    big fish casino world class casino slots

  25. DiedraEcope [#]

    big fish casino free slots games

  26. LouiseNorse [#]

    vegas slots online cashman casino slots

  27. Hazellelax [#]

    online casino bonus slots games

  28. SharylSet [#]

    free slots games online casino gambling

  29. Skinconsehick [#]

    best online casinos slots free

  30. PatrickMam [#]

    online casinos cashman casino slots

  31. DiedraEcope [#]

    free online slots best online casino

  32. Defattaithaccug [#]

    online casino gambling online casino games

CSSLab