Mis apuntes de desarrollo web </>

Cursor del ratón

La propiedad cursor especifica el tipo de cursor que se muestra cuando este se encuentra sobre un elemento.

Valores para cursor
Categoría Valor Descripción y ejemplo
General auto El navegador determina el cursor que muestra basado en el contenido presente.
default Muestra el cursor del ratón por defecto del sistema (flecha).
none No muestra ningún cursor, pero el cursor del ratón sigue funcionando.
Enlaces y estado context-menu Indica que un menú contextual está disponible debajo del cursor (boton derecho).
help Indica que hay ayuda disponible.
pointer Cursor usado sobre enlaces.
progress Indica que el programa está ocupado en segundo plano, pero el usuario aún puede interactuar con la interfaz.
Wait Indica que el programa está trabajando en primer plano.
Selección cell Cursor de cruceta, que indica que se pueden ajustar celdas.
crosshair Cursor de cruceta. A menudo utilizado para indicar la selección en un mapa de bits.
text Permite seleccionar texto de una forma más cómoda.
vertical-text Permite seleccionar texto de manera vertical.
Arrastrar y soltar alias Representa un alias o acceso directo.
copy Indica que algo se puede copiar.
move Indica un elemento que puede moverse de su lugar.
no-drop Indica que no se puede arrastrar y soltar en ese lugar.
not-allowed Indica que no se puede realizar una acción.
Redimención y desplazamiento. all-scroll Muestra que algo se puede desplazar en cualquier dirección (panorámica).
col-resize Permite cambiar el tamaño de las columnas horizontalmente.
e-resize Permite cambiar el tamaño del borde derecho de un cuadro.
ew-resize Permite cambiar el tamaño a la izquierda o a la derecha.
n-resize Permite cambiar el tamaño del borde superior de un cuadro.
ne-resize Permite cambiar el tamaño de la esquina superior derecha de un cuadro.
nesw-resize Permite cambiar el tamaño en las direcciones superior derecha o inferior izquierda.
ns-resize Permite cambiar el tamaño hacia arriba o hacia abajo.
nw-resize Permite cambiar el tamaño de la esquina superior izquierda de un cuadro.
nwse-resize Permite cambiar el tamaño en las direcciones superior izquierda o inferior derecha.
row-resize Permite cambiar el tamaño de las filas verticalmente.
s-resize Permite cambiar el tamaño del borde inferior de un cuadro.
se-resize Permite cambiar el tamaño de la esquina inferior derecha de un cuadro.
sw-resize Permite cambiar el tamaño de la esquina inferior izquierda de un cuadro.
w-resize Permite cambiar el tamaño del borde izquierdo de un cuadro.
Otros valores grab Indica que algo se puede agarrar y arrastrar.
grabbing Indica que algo se está arrastrando.
zoom-in Indica que se puede acercar la imagen.
zoom-out Indica que se puede alejar la imagen.

Scroll

A parte de resolver contenido desbordado con la propiedad overflow, CSS tiene otras propiedades de scroll útiles, estas son:

scroll-behavior:
Especifica el comportamiento del desplazamiento para un elemento con desplazamiento.
scroll-snap-type:
Se utiliza en el elemento contenedor y permite identificar el tipo de los puntos de ajuste del contenido. Tambien acepta un segundo parámetro que determina si el viewport del contenido se debe ajustar a los elementos de forma obligatoria o no.
scroll-snap-align:
Se utiliza en los elementos hijos del contenedor e indica el punto de ajuste para alinear el elemento.
Propiedad Valores Descripción
scroll-behavior auto La caja de desplazamiento realiza el desplazamiento instantáneamente.
smooth La caja se desplaza suavemente.
scroll-snap-type none Cuando se desplaza la ventana gráfica de este contenedor de desplazamiento, debe ignorar los puntos de ajuste.
x Los puntos de ajuste son horizontales.
y Los puntos de ajuste son verticales.
both Los puntos de ajuste son tanto horizontales como verticales.
mandatory El scroll se mueve automáticamente al punto de ajuste que se haya determinado.
proximity El scroll se mueve automáticamente sólo cuando el scroll esté muy próximo al punto de ajuste que se haya determinado.
scroll-snap-align none El elemento no tiene ningún punto de ajuste en su eje.
start El elemento tiene como punto de ajuste su inicio.
end El elemento tiene como punto de ajuste su final.
center El elemento tiene como punto de ajuste su centro.

Ejemplos:

  • scroll-snap-type: y proximity;
    scroll-snap-align: start;
  • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos molestiae itaque, sit maiores explicabo modi veritatis consequatur ullam dolor enim vel libero, aliquam rem officia perferendis commodi harum magnam laboriosam.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur nihil officia commodi nesciunt cupiditate eius? Commodi consectetur ipsum quibusdam quisquam quidem magni? Eaque sapiente, repellendus nulla consectetur adipisci laboriosam deserunt.
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero aperiam sed nemo, laudantium officiis fuga reiciendis libero maxime quis, eos modi impedit laborum. Cupiditate dolorum totam, veniam libero sapiente doloremque?
  • scroll-snap-type: x mandatory;
    scroll-snap-align: start;
  • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos molestiae itaque, sit maiores explicabo modi veritatis consequatur ullam dolor enim vel libero, aliquam rem officia perferendis commodi harum magnam laboriosam.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur nihil officia commodi nesciunt cupiditate eius? Commodi consectetur ipsum quibusdam quisquam quidem magni? Eaque sapiente, repellendus nulla consectetur adipisci laboriosam deserunt.
  • Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero aperiam sed nemo, laudantium officiis fuga reiciendis libero maxime quis, eos modi impedit laborum. Cupiditate dolorum totam, veniam libero sapiente doloremque?