O cursor indica a posição na tela em que o usuário pode clicar ou inserir texto. Pode haver diferentes cursores utilizados para diferentes componentes do site. Um desenvolvedor deve garantir que os cursores usados no aplicativo devem ser atraentes. Por exemplo, um cursor de mão apontador pode ser usado no botão no mouse pairar. O indicador de texto (linha piscante) é utilizado na caixa de texto onde o texto deve ser inserido.
Existem vários estilos de cursor no CSS utilizados apenas especificando o valor da propriedade Cursor. No entanto, um desenvolvedor pode criar um cursor personalizado usando CSS.
Este guia de estudo fornecerá:
CSS Cursor
Cursor personalizado CSS
Antes de esbarrar no tópico, vamos ver algumas das formas do cursor CSS com um exemplo prático.
CSS Cursor
O CSS “cursorPropriedade tem valores diferentes, como um ponteiro, nenhum, progresso e mais. Vamos criar uma tabela que contenha linhas nas quais diferentes cursores serão exibidos no mouse pairar.
Exemplo: Criando uma tabela representando diferentes cursores de CSS em HTML
Primeiro, adicione o
elemento em html. Dentro deste elemento:
O
tag serão utilizadas para fazer linhas.
A primeira linha contém os títulos.
Esses títulos são especificados utilizando o
Tag. Outro
Tags contêm dois
Tags para preencher as colunas com dados.
O segundo
A tag representa os elementos do botão que são aplicados com um CSS “cursor”Propriedade com valores diferentes.
O código HTML para o cenário acima é dado abaixo:
seletor de cursor CSS
estilo cursor
Cursor: Ponteiro
Cursor: Progresso
Cursor: Não permitido
Cursor: Nenhum
Cursor: Mova
Cursor: pegue
Cursor: cópia
Cursor: Col-Resize
Cursor: ROW-RESIZE
Cursor: texto
O código acima gerará o seguinte resultado:
Na próxima seção, aplicaremos diferentes estilos aos elementos HTML.
Todos os elementos HTML são aplicados com estilos CSS que são explicados abaixo:
““preenchimento”Propriedade com“0”O valor não inclui espaço em torno do conteúdo do elemento.
““margem”Propriedade com“0”O valor não adiciona espaço fora de cada um dos elementos.
““família de fontes”A propriedade recebe um valor“Arial, Helvetica, Sans-Serif”. A lista de estilos de fontes é dada para garantir que, se o primeiro estilo não for suportado pelo navegador, outros estilos devem ser aplicados.
O elemento de tabela HTML é aplicado com as propriedades CSS descritas abaixo:
““fronteira”A propriedade está definida com o valor“1px Solid Gainsboro”, Que representa a largura da fronteira, o estilo de fronteira e a cor da borda, respectivamente.
““margem”Propriedade se comporta conforme especificado acima.
Elemento de estilo “TD”
TD Alinhamento de texto: centro;
O
O elemento é aplicado com a propriedade “alinhamento de texto"Com o valor"Centro”. Ele alinhará o texto da coluna no centro.
O elemento do botão usado no código HTML acima é estilizado com novas propriedades CSS que são explicadas abaixo:
““cor de fundo”Especifica a cor do fundo do elemento.
““preenchimento”Com os valores atribuídos como“10px 10px”Adiciona espaço de 10px na parte superior e 10px nos lados esquerdo-direita dos itens do elemento.
““cor”Ajusta a cor da fonte do elemento.
““largura”É a propriedade que ajusta a largura do elemento.
O código acima gerará o seguinte resultado:
Até agora, discutimos os cursores que são fornecidos pelo CSS. Na próxima seção, o exemplo descreverá como criar um cursor personalizado com CSS.
Cursor personalizado CSS
Os desenvolvedores devem usar cursores adequados para seus aplicativos. Os cursores devem ser atraentes para obter a atenção dos usuários. Além disso, o cursor personalizado pode ser criado para esse fim.
Veja o exemplo abaixo!
Exemplo: como criar cursor personalizado com CSS?
Em HTML, adicione dois elementos div. Um com a classe “círculo”E o outro com a classe“apontar”.
Html
Vamos seguir em direção à seção CSS.
Elemento de "corpo" de estilo
corpo Altura: 100VH;
O elemento corporal do arquivo html é aplicado com o estilo “altura”Propriedade para definir a altura do elemento.
Estilo “círculo” div
.círculo Largura: 20px; Altura: 20px; borda: 2px branco sólido; Radio de fronteira: 50%;
Abaixo está a explicação das propriedades do CSS que são aplicadas ao elemento div ter classe “círculo”:
““largura”A propriedade ajusta a largura do elemento.
““fronteira”Propriedade com o valor especificado como“2px branco sólido”Representa a largura da fronteira, o estilo de fronteira e a cor.
““Radio de fronteira”A propriedade muda a rodada de fronteira do elemento.
Estilo “ponto” div
.apontar Largura: 5px; Altura: 5px; cor de fundo: branco; Radio de fronteira: 50%;
O elemento div com ponto de classe é fornecido com diferentes propriedades descritas abaixo:
““cor de fundo”Propriedade especifica a cor do fundo do elemento.
““Radio de fronteira”Define as bordas do elemento.
Outras propriedades funcionarão da mesma forma que discutidas.
O código fornecido exibirá o seguinte cursor na página da web:
Criamos o cursor usando HTML e CSS. Agora, na próxima seção, o código JavaScript é escrito para adicionar a funcionalidade necessária ao cursor.
JavaScript
A descrição do código JavaScript acima é fornecido abaixo:
““”A tag está emparelhada com tag, que é usada para escrever código JavaScript.
““const”A palavra -chave identifica que a palavra -chave const seguida por uma variável não pode ser transferida.
““documento.QuerySelector ('.círculo')”Retorna o elemento Div Circle que corresponde ao seletor especificado no documento.
““documento.QuerySelector ('.apontar')”Retorna o elemento Div Point que corresponde ao seletor especificado no documento.
““const MoveCursor = (e) =>”Esta função especifica a função do cursor.
““e.Cliente”Retorna a coordenada vertical quando o evento do mouse foi acionado.
““e.ClientX”Retorna a coordenada horizontal quando o evento do mouse é acionado.
““cursorcircle.estilo.transformar”O círculo div é aplicado com transformação de estilo.
““Cursorpoint.estilo.transformar”O Div Point é aplicado com transformação de estilo.
““traduzir ($ mousex px, $ mousey px)”O valor da propriedade de transformação define as coordenadas horizontais e verticais.
““janela.AddEventListener ('Mouse', MoveCursor)”O método do ouvinte de eventos ouvirá o movimento do mouse. Faz parte do objeto de janela global.
Depois de fornecer os blocos de código acima, o cursor se moverá automaticamente na tela, como mostrado abaixo:
Isso é legal! Criamos um cursor personalizado com diferentes propriedades CSS.
Conclusão
O CSS “cursor”Propriedade tem numerosos valores que indicam vários estilos de cursor. No entanto, utilizando os elementos HTML e as propriedades CSS, podemos fazer cursores personalizados. Então, o código JavaScript é implementado para ativar sua funcionalidade. Este estudo demonstrou como criar cursores CSS personalizados com um exemplo prático.
