CSS permite modificar ciertos detalles de interacción del usuario como contornos de elementos o el cursor del ratón.

Mediante CSS también se pueden modificar ciertas interacciones de los elementos con interfaces del usuario, como por ejemplo, el ratón.

Contornos (outline)

La familia de propiedades outline-* nos permiten modificar el comportamiento del contorno de los elementos: una línea divisoria que rodea el contenido externo del propio elemento. A diferencia de los bordes, esta línea divisoria, por defecto no ocupa espacio y no tiene porque tener una forma rectangular.

Es fácil de observar esta línea divisoria en los navegadores, pulsando TAB y moviéndonos por los diferentes enlaces de la página. Generalmente, aparece como una línea punteada y es muy similar al funcionamiento de los bordes.

Propiedad Valor Significado
outline-color: invert | color Invierte el color de la misma.
outline-style: estilo de borde | none Idem a los bordes. Estilo de la línea divisoria.
outline-width: medium | thin | thick | tamaño Tamaño de los bordes. Tamaño predefinido o específico.
outline-offset: tamaño Desplazamiento del contorno.

La propiedad outline-color permite modificar el color de la línea divisoria, en el caso de que el tamaño outline-width sea mayor que cero. Además, al igual que con los bordes, también se puede cambiar el estilo de la línea con outline-style.

En CSS3 también existe la propiedad outline-offset, que nos permite ampliar el desplazamiento o espacio interior dentro del perfil del elemento.

Atajo: Contornos

Es posible, al igual que con muchas otras propiedades, resumir en una sola propiedad para ahorrar espacio. El orden recomendado es el siguiente:

div {
    outline: <color> <style> <width>
}

Cursor del ratón

CSS permite modificar la apariencia del ratón, dependiendo de la zona del documento HTML donde nos encontremos. Para ello solo tenemos que especificar la propiedad cursor dentro del elemento que busquemos, junto al valor del cursor deseado:

Propiedad Valor Significado
cursor: palabra clave de cursor Muestra un cursor de ratón específico.

Veamos un ejemplo:

div {
    cursor: text;
}

Donde hemos utilizado la palabra clave text, existe una amplia gama valores predefinidos para diversas situaciones, que separaremos en dos grupos.

Cursores CSS2

Son los más extendidos y compatibles con todos los navegadores. Funcionan sin problema en cualquier sistema y pueden utilizarse sin preocuparse por el soporte.

Valor Significado
default Muestra el cursor del ratón por defecto del sistema. Usualmente, una flecha/cursor.
crosshair Muestra una cruceta. Útil para tareas en las que requieres precisión.
help Muestra un cursor de ayuda. Generalmente, una interrogación o un puntero con interrogación.
move Muestra un cursor para mover elementos. Se suele representar con flechas hacia todos lados.
pointer Muestra un cursor para hacer click. Usualmente, una mano o algún tipo de apuntador.
progress Muestra un cursor que indica que se está trabajando en segundo plano.
text Muestra un cursor que permite seleccionar texto de una forma más cómoda.
wait Muestra un cursor que indica que se está trabajando en primer plano y deberías esperar.

Por último, tenemos valores como e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize o w-resize, que representan la redimensión de ventanas en puntos cardinales como norte, sur, este, oeste y derivados.

Cursores CSS3

A partir de CSS3, se añadieron una serie de valores propios para cubrir ciertas carencias en la lista de cursores anterior. Los navegadores que no soporten CSS3 (actualmente, muy pocos) pueden no estar preparados para mostrarlos.

Valor Significado
none No muestra ningún cursor, pero el cursor del ratón sigue funcionando. Útil para bromas.
context-menu Muestra un cursor de texto junto a un menú contextual (al hacer clic con botón derecho).
cell Muestra un cursor de cruceta, utilizado en hojas de cálculo para ajustar celdas.
vertical-text Idem al cursor text, pero con orientación para texto vertical.
alias Muestra un cursor que representa un alias o «acceso directo» a algo.
copy Muestra un cursor que representa una copia. Usualmente un cursor con un símbolo +.
no-drop Muestra un cursor que indica que no se puede arrastrar y soltar en ese lugar.
not-allowed Muestra un cursor que indica que no se puede realizar una acción (prohibido).
grab Muestra un cursor que indica que algo se puede agarrar y arrastrar (drag & drop).
grabbing Muestra un cursor que indica que algo se está arrastrando (drag & drop).
zoom-in Muestra un cursor que indica que se puede acercar la imagen (lupa con signo +).
zoom-out Muestra un cursor que indica que se puede alejar la imagen (lupa con signo -).

Se añaden otros cursores de orientación a puntos cardinales como ew-resize, ns-resize, nesw-resize, nwse-resize, otros para redimensionar filas o columnas de una tabla row-resize y col-resize o all-scroll que indica que se puede hacer scroll en cualquier dirección.

A continuación podemos ver algunos ejemplos de los cursores mencionados en las listas anteriores:

Cursores CSS2 y CSS3

Cursores personalizados

Uno de los valores anteriores de la lista es cursor: url(images/nyan.png), el mismo formato que se utiliza, por ejemplo, para utilizar imágenes externas de fondo con background. De la misma forma, podemos utilizar cursores personalizados. Sin embargo, esta funcionalidad, aunque forma parte de la especificación CSS2, tiene varias particularidades que conviene aclarar. Su utilización sería la siguiente:

div {
    cursor: url(imagen.ext);                /* Formato básico */
    cursor: url(imagen.ext) pos-x pos-y;    /* Con posición */
}

La imagen del cursor personalizado debe especificarse en el interior de url(), al igual que se hace en imágenes de fondo CSS. Aunque esta propiedad tiene bastante tiempo, tiene bastante problemas de soporte:

Más información en soporte de cursores CSS.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).