Tipos de cursores en diseño web

Tiempo estimado de lectura: 4 minutos

 

Todos los tipos de cursores

Hoy vamos a ver los distintos tipos de cursores que existen y cómo podemos cambiar los que vienen por defecto en nuestra web. Con estos códigos podemos cambiar los cursores por los que nosotros elijamos, con lo que ganaremos en personalización en nuestra web.

Tipos de cursores

Seguramente conocerás el cursor por defecto (la flechita blanca), o el cursor de escritura (Una especie de I) que puedes ver en Microsoft Word, pero existen muchos tipos más de cursores:  el de ayuda, los de redimensionar, la manita blanca de los vínculos… en este artículo vamos a verlos todos.

Códigos que vamos a utilizar

Los códigos que vamos a ver son muy sencillos, tanto que solo utilizaremos la propiedad cursor y todas sus variaciones. Esta propiedad indica el tipo de cursor que se mostrara cuando nos situemos sobre un elemento concreto.

Comenzaremos mostrando los cursores más conocidos:

<span style="cursor:auto">Cursor auto (el cursor de escritura)</span><br><br>
<span style="cursor:crosshair">Cursor crosshair (en forma de cruz)</span><br><br>
<span style="cursor:default">Cursor por defecto</span><br><br>
<span style="cursor:e-resize">Cursor  e-resize (horizontal)</span><br><br>
<span style="cursor:help">Cursor help (una interrogación pegada al puntero)</span><br><br>
<span style="cursor:move">Cursor move (cuatro flechitas enfrentadas)</span><br><br>
<span style="cursor:n-resize">Cursor n-resize (vertical) </span><br><br>
<span style="cursor:ne-resize">Cursor ne-resize (oglicuo de izquierda a derecha)</span><br><br>
<span style="cursor:nw-resize">Cursor nw-resize (oblicuo de derecha a izquierda)</span><br><br>
<span style="cursor:pointer">Cursor  pointer (la manita de los vínculos)</span><br><br>
<span style="cursor:progress">Cursor progress (un circulito girando)</span><br><br>
<span style="cursor:s-resize">Cursor s-resize (igual que el n-resize)</span><br><br>
<span style="cursor:se-resize">Cursor se-resize (igual que el ne-resize)</span><br><br>
<span style="cursor:sw-resize">Cursor sw-resize (igual que el nw.resize)</span><br><br>
<span style="cursor:text">Cursor text (igual que el automático)</span><br><br>
<span style="cursor:w-resize">Cursor w-resize (igual que el e-resize)</span><br><br>
<span style="cursor:wait">Cursor wait (igual que el progress)</span>

Para utilizar estos cursores, solo tienes que poner el objeto (texto, imagen…) donde quieres que se muestre ese cursor, entre las etiquetas < span style... > y < /span >.
Y si quieres vver el resultado solo tienes que pasar el cursor sobre los textos:

  • Cursor auto (el cursor de escritura)
  • Cursor crosshair (en forma de cruz)
  • Cursor por defecto
  • Cursor  e-resize (horizontal)
  • Cursor help (una interrogación pegada al puntero)
  • Cursor move (cuatro flechitas enfrentadas)
  • Cursor n-resize (vertical)
  • Cursor ne-resize (oglicuo de izquierda a derecha)
  • Cursor nw-resize (oblicuo de derecha a izquierda)
  • Cursor  pointer (la manita de los vínculos)
  • Cursor progress (un circulito girando)


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *