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)
