Apuntes sobre Css

¿Para qué quieres herencias cuando tienes !important?

Cursores en CSS

Con la propiedad cursor, puedes cambiar la apariencia del puntero cuando pasa sobre un elemento. Esto mejora la usabilidad indicando acciones disponibles (como clics, espera o ayuda). También es posible usar cursores personalizados mediante imágenes.

La propiedad cursor

Sintaxis:

element {
    cursor: valor;
}

Valores predefinidos

CSS ofrece muchos valores estándar:

  • auto: el navegador elige el cursor adecuado según el contexto.
  • default: flecha estándar.
  • pointer: mano, para enlaces o botones clicables.
  • text: barra de texto para campos editables.
  • crosshair: cruz, útil en herramientas de selección.
  • move: flechas cruzadas para mover elementos.
  • wait: reloj, indica espera.
  • progress: carga con posibilidad de interacción.
  • help: signo de interrogación para indicar ayuda.

Ejemplo:

a { cursor: pointer; }
div { cursor: crosshair; }
input { cursor: text; }

Cursores de redimensionamiento

Para zonas ajustables:

  • e-resize, w-resize, n-resize, s-resize
  • ne-resize, nw-resize, se-resize, sw-resize
div.resizable {
    cursor: se-resize;
}

Cursores modernos (CSS3)

Algunos valores nuevos mejoran la experiencia de usuario:

  • not-allowed: círculo tachado.
  • grab, grabbing: para elementos arrastrables.
  • zoom-in, zoom-out: lupa para ampliar o reducir.
button:disabled { cursor: not-allowed; }
div.draggable { cursor: grab; }
div.draggable:active { cursor: grabbing; }
img { cursor: zoom-in; }

Cursores personalizados

Se puede usar una imagen como cursor con url(). Es recomendable incluir un valor de respaldo.

p {
    cursor: url("/cursors/custom.png"), auto;
}

Formatos soportados: .png, .cur, .svg, .ani.

Ejemplo avanzado:

button {
    cursor: url("/cursors/star.png"), url("/cursors/star.cur"), pointer;
}

Consejo: Usa imágenes pequeñas (máx. 32x32 px) y comprímelas para mejor rendimiento.

Advertencia: El uso excesivo o innecesario de cursores personalizados es la forma mas segura de irritar a tus usuarios.

Buenas prácticas

Valores universales: Todas las propiedades CSS aceptan initial, inherit y unset:

  • initial: valor por defecto del navegador.
  • inherit: hereda del padre.
  • unset: mezcla de ambos, según sea heredable o no.

Accesibilidad: Usa cursores que refuercen la función (por ejemplo, pointer para botones). Evita imágenes poco intuitivas.

Diseño adaptable: En móviles no hay cursor visible, así que ofrece alternativas visuales con :hover o :focus.

Compatibilidad: Siempre proporciona un valor de respaldo. Verifica que los cursores se vean correctamente en todos los navegadores modernos.

Rendimiento: Usa formatos ligeros y evita cargar muchas imágenes distintas.

Pruebas: Visualiza el comportamiento del cursor sobre diferentes fondos y en distintos sistemas operativos.

TOP