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 deben ser atractivos. Por ejemplo, se puede usar un cursor de mano de señalización en el botón en el mouse ratón. El indicador de texto (línea parpadeante) se utiliza en el cuadro de texto donde se va a ingresar el texto.
Hay varios estilos de cursor en CSS utilizados simplemente especificando el valor de la propiedad del cursor. Sin embargo, un desarrollador puede crear un cursor personalizado utilizando CSS.
Esta guía de estudio proporcionará en:
Cursor CSS
CSS CURSOR PERSONALIZADO
Antes de toparse con el tema, veamos algunas de las formas del cursor CSS con un ejemplo práctico.
Cursor CSS
El CSS "cursor"La propiedad tiene diferentes valores, como un puntero, ninguno, progreso y más. Creemos una tabla que contenga filas en las que se mostrarán diferentes cursores en el ratón.
Ejemplo: Creación de una tabla que representa diferentes cursores CSS en HTML
Primero, agregue el
elemento en html. Dentro de este elemento:
El
La etiqueta se utilizará para hacer filas.
La primera fila contiene los encabezados.
Estos encabezados se especifican utilizando el
etiquetas. Otro
Las etiquetas contienen dos
Etiquetas para llenar las columnas con datos.
El segundo
La etiqueta 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 da a continuación:
selector de cursor CSS
estilo cursor
Cursor: puntero
cursor: progreso
cursor: no permiso
cursor: ninguno
cursor: mover
cursor: agarrar
cursor: copia
cursor: col-rese
Cursor: Risización de fila
cursor: texto
El código anterior generará el siguiente resultado:
En la siguiente sección, aplicaremos diferentes estilos a los elementos HTML.
Todos los elementos HTML se aplican con estilos CSS que se explican a continuación:
"relleno"Propiedad con"0"El valor no incluye espacio alrededor del contenido del elemento.
"margen"Propiedad con"0"El valor no agrega espacio fuera de cada uno de los elementos.
"Familia tipográfica"A la propiedad se le asigna un valor"Arial, Helvetica, Sans-Serif". La lista de estilos de fuentes se da para garantizar si el primer estilo no es compatible con el navegador, se deben aplicar otros estilos.
El elemento de tabla HTML se aplica con las propiedades CSS que se describen a continuación:
"borde"La propiedad se establece con el valor"1px Solid Gainsboro"Que representa el ancho de la frontera, el estilo de borde y el color del borde respectivamente.
"margen"La propiedad se comporta como se especifica anteriormente.
Elemento de estilo "TD"
TD Text-Align: Center;
El
El elemento 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: CadetBlue; relleno: 10px 10px; Color: #ffffff; Ancho: 150px;
El elemento de botón utilizado en el código HTML anterior tiene el estilo de nuevas propiedades CSS que se explican a continuación:
"color de fondo"Especifica el color del fondo del elemento.
"relleno"Con los valores asignados como"10px 10px"Agrega un espacio de 10px en el fondo superior y 10px en los lados izquierdo-derecha de los elementos del elemento.
"color"Ajusta el color de fuente del elemento.
"ancho"Es la propiedad que ajusta el ancho del elemento.
El código anterior generará el siguiente resultado:
Hasta ahora, hemos discutido los cursores proporcionados por CSS. En la próxima sección, el ejemplo describirá cómo crear un cursor personalizado con CSS.
CSS CURSOR PERSONALIZADO
Los desarrolladores deben usar cursores adecuados para sus aplicaciones. Los cursores deben ser atractivos para llamar 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
Vamos a seguir hacia la sección CSS.
Elemento de estilo "cuerpo"
cuerpo Altura: 100 VH;
El elemento corporal del archivo HTML se aplica con el estilo "altura"Propiedad para configurar la altura del elemento.
A continuación se muestra la explicación de las propiedades CSS que se aplican al elemento DIV que tiene clase "círculo":
"ancho"La propiedad ajusta el ancho del elemento.
"borde"Propiedad con el valor especificado como"2px blanco sólido"Representa el ancho de la frontera, el estilo del borde y el color.
"radio fronterizo"La propiedad cambia la ronda de borde del elemento.
Estilo "Point" Div
.punto Ancho: 5px; Altura: 5px; Color de fondo: blanco; Radio fronterizo: 50%;
El elemento DIV con el punto de clase se proporciona con diferentes propiedades que se describen a continuación:
"color de fondo"La propiedad especifica el color del fondo del elemento.
"radio fronterizo"Establece los bordes del elemento redondo.
Otras propiedades funcionarán lo mismo que se discutió.
El código dado mostrará el siguiente cursor en la página web:
Hemos creado el cursor usando HTML y CSS. Ahora, en la siguiente sección, el código JavaScript se escribe para agregar la funcionalidad requerida al cursor.
Javascript
La descripción del código JavaScript anterior se da a continuación:
""La etiqueta se combina con la etiqueta, que se usa para escribir código JavaScript.
"estúpido"La palabra clave identifica que la palabra clave const seguida de una variable no se puede reasignar.
"documento.QuerySelector ('.círculo')"Devuelve el elemento Div Circle que coincide con el selector especificado en el documento.
"documento.QuerySelector ('.punto')"Devuelve el elemento Div Point que coincide con el selector especificado en el documento.
"const moveCursor = (e) =>Esta función especifica la función del cursor.
"mi.clery"Devuelve la coordenada vertical cuando se activó el evento del mouse.
"mi.clerx"Devuelve la coordenada horizontal cuando se activa el evento del mouse.
"cursorcle.estilo.transformar"El círculo div se aplica con transformación de estilo.
"punto de cursor.estilo.transformar"El punto div se aplica con transformación de estilo.
"traducir ($ mousex px, $ mousey px)El valor de la propiedad de transformación establece las coordenadas horizontales y verticales.
"ventana.addEventListener ('mouse', Movecursor)"Event Listener Method escuchará el movimiento del mouse. Es parte del objeto de ventana global.
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:
Eso es genial! Hemos creado un cursor personalizado con diferentes propiedades CSS.
Conclusión
El 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 hacer cursores personalizados. Luego, el código JavaScript se implementa para activar su funcionalidad. Este estudio ha demostrado cómo crear cursores CSS personalizados con un ejemplo práctico.
