El cursor indica la posición en la pantalla donde el usuario puede hacer clic o ingresar texto. Puede haber diferentes cursores utilizados para diferentes componentes del sitio web. Un desarrollador debe asegurarse de que los cursores utilizados en la aplicación sean atractivos. Por ejemplo, se puede usar un cursor de mano apuntando en el botón al pasar el mouse. El indicador de texto (línea parpadeante) se utiliza en el cuadro de texto donde se debe ingresar el texto.
Hay varios estilos de cursor en CSS que se utilizan simplemente especificando el valor de la propiedad del cursor. Sin embargo, un desarrollador puede crear un cursor personalizado usando CSS.
Esta guía de estudio proporcionará sobre:
-
- cursor CSS
- Cursor personalizado CSS
Antes de entrar en materia, veamos algunas de las formas de los cursores CSS con un ejemplo práctico.
cursor CSS
El CSS” cursor La propiedad ” tiene diferentes valores, como puntero, ninguno, progreso y más. Vamos a crear una tabla que contenga filas en las que se mostrarán diferentes cursores al pasar el mouse por encima.
Ejemplo: crear una tabla que represente diferentes cursores CSS en HTML
Primero, agregue el elemento
| . Otras etiquetas | |||
|---|---|---|---|
para llenar las columnas con datos.
| representa los elementos del botón que se aplican con un CSS “ cursor ” propiedad con diferentes valores.
| El código HTML para el escenario anterior se proporciona a continuación: < mesa >< tr > < el estilo = 'ancho: 200px;' > selector de cursor css el > < el estilo = 'ancho: 200px;' > estilo de cursor el > tr > < tr > < td > cursor: puntero td > < td >< botón estilo = 'cursor: puntero;' > puntero botón > td > tr > < tr > < td > cursor: progreso td > < td >< botón estilo = 'cursor: progreso'; > Progreso botón > td > tr > < tr > < td > cursor: no permitido td > < td >< botón estilo = 'cursor: no permitido;' > No permitido botón > td > tr > < tr > < td > cursor: ninguno td > < td >< botón estilo = 'cursor: ninguno;' > ninguno botón > td > tr > < tr > < td > cursor: mover td > < td >< botón estilo = 'cursor: mover;' > moverse botón > td > tr > < tr > < td > cursor: agarrar td > < td >< botón estilo = 'cursor: agarrar;' > agarrar botón > td > tr > < tr > < td > cursor: copiar td > < td >< botón estilo = 'cursor: copiar;' > Copiar botón > td > tr > < tr > < td > cursor: cambio de tamaño de columna td > < td >< botón estilo = 'cursor: cambio de tamaño de columna;' > redimensionar col botón > td > tr > < tr > < td > cursor: redimensionar fila td > < td >< botón estilo = 'cursor: redimensionar fila;' > redimensionar fila botón > td > tr > < tr > < td > cursor: texto td > < td >< botón estilo = 'cursor: texto;' > texto botón > td > tr > mesa > Estilo 'todos' los elementos * {relleno: 0 ; margen: 0 ; familia tipográfica: Arial, Helvetica, sans-serif; }
Elemento de estilo 'tabla' mesa {margin: 0px auto; borde: 1px ganancia sólida; }
“ margen ” se comporta como se especifica arriba. Estilo “td” Elemento td {alineación de texto: centro; } se aplica con la propiedad “ texto alineado ” con el valor “ centro ”. Alineará el texto de la columna en el centro.
| Elemento de estilo 'botón' botón {color de fondo: azul cadete; relleno: 10px 10px; color: #ffffff; ancho: 150px; }
El código anterior generará el siguiente resultado: Cursor personalizado CSSLos desarrolladores deben utilizar cursores adecuados para sus aplicaciones. Los cursores deben ser atractivos para captar la atención de los usuarios. Además, el cursor personalizado se puede crear para este propósito. ¡Mira el ejemplo de abajo! Ejemplo: ¿Cómo crear un cursor personalizado con CSS? En HTML, agregue dos elementos div. Uno con la clase” círculo ” y el otro con la clase “ punto ”. HTML < división clase = 'círculo' > división >< división clase = 'punto' > división > Estilo 'cuerpo' Elemento cuerpo {altura: 100vh; } Estilo 'círculo' div .círculo {ancho: 20px; altura: 20px; borde: 2px blanco sólido; borde-radio: 50 % ; }
Estilo 'punto' div .punto {ancho: 5px; altura: 5px; color de fondo: blanco; borde-radio: 50 % ; }
El código dado mostrará el siguiente cursor en la página web: JavaScript < texto >const cursorCircle = document.querySelector ( '.círculo' ) ; const cursorPoint = document.querySelector ( '.punto' ) ; const moveCursor = ( y ) = > { const ratónY = e.clienteY; const ratonX = e.clienteX; cursorCircle.style.transform = ` traducir ( ${ratónX} píxel, ${mouseY} píxeles ) ` ; cursorPoint.style.transform = ` traducir ( ${ratónX} píxel, ${mouseY} píxeles ) ` ; } ventana.addEventListener ( 'movimiento del ratón' , moverCursor ) texto >
Después de proporcionar los bloques de código anteriores, el cursor se moverá automáticamente en la pantalla como se muestra a continuación: ConclusiónEl CSS” cursor La propiedad ” tiene numerosos valores que indican varios estilos de cursor. Sin embargo, al utilizar los elementos HTML y las propiedades CSS, podemos crear cursores personalizados. Luego, se implementa código JavaScript para activar su funcionalidad. Este estudio ha demostrado cómo crear cursores CSS personalizados con un ejemplo práctico. |
