Cursor CSS personalizado

Cursor Css Personalizado



O cursor indica a posição na tela onde 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 sejam atraentes. Por exemplo, um cursor de mão apontando pode ser usado no botão ao passar o mouse. O indicador de texto (linha piscando) é utilizado na caixa de texto onde o texto deve ser inserido.

Existem vários estilos de cursor em CSS utilizados apenas especificando o valor da propriedade do cursor. No entanto, um desenvolvedor pode criar um cursor personalizado usando CSS.





Este guia de estudo fornecerá sobre:



    • Cursor CSS
    • CSS personalizado do cursor

Antes de entrar no assunto, vamos ver algumas formas de cursor CSS com um exemplo prático.



Cursor CSS

O CSS “ cursor ” tem valores diferentes, como um ponteiro, nenhum, progresso e muito mais. Vamos criar uma tabela que contém linhas nas quais diferentes cursores serão exibidos ao passar o mouse.



Exemplo: Criando uma Tabela Representando Diferentes Cursores CSS em HTML

Primeiro, adicione o elemento

em HTML. Dentro deste elemento:



    • A tag
será utilizada para fazer linhas.
  • A primeira linha contém os títulos.
  • Esses cabeçalhos são especificados utilizando as tags
    • contêm duas tags
    . Outras tags
    para preencher as colunas com dados.
  • A segunda tag
    		• representa os elementos de botão que são aplicados com um CSS “ cursor ” com valores diferentes.

    O código HTML para o cenário acima é dado abaixo:

    < tabela >
    < tr >
    < º estilo = 'largura: 200px;' > seletor de cursor css º >
    < º estilo = 'largura: 200px;' > estilo do cursor º >
    tr >
    < tr >
    < td > cursor: ponteiro td >
    < td >< botão estilo = 'cursor: ponteiro;' > ponteiro botão > td >
    tr >
    < tr >
    < td > cursor: progresso td >
    < td >< botão estilo = 'cursor: progresso;' > progresso botão > td >
    tr >
    < tr >
    < td > cursor: não permitido td >
    < td >< botão estilo = 'cursor: não permitido;' > não permitido botão > td >
    tr >
    < tr >
    < td > cursor: nenhum td >
    < td >< botão estilo = 'cursor: nenhum;' > Nenhum botão > td >
    tr >
    < tr >
    < td > cursor: mover td >
    < td >< botão estilo = 'cursor: mover;' > mover botão > td >
    tr >
    < tr >
    < td > cursor: agarrar td >
    < td >< botão estilo = 'cursor: agarrar;' > pegar botão > td >
    tr >
    < tr >
    < td > cursor: copiar td >
    < td >< botão estilo = 'cursor: copiar;' > cópia de botão > td >
    tr >
    < tr >
    < td > cursor: col-redimensionar td >
    < td >< botão estilo = 'cursor: col-resize;' > col-redimensionar botão > td >
    tr >
    < tr >
    < td > cursor: redimensionar linha td >
    < td >< botão estilo = 'cursor: redimensionar linha;' > redimensionar linha botão > td >
    tr >
    < tr >
    < td > cursor: texto td >
    < td >< botão estilo = 'cursor: texto;' > texto botão > td >
    tr >
    tabela >


    O código acima irá gerar o seguinte resultado:


    Na próxima seção, aplicaremos diferentes estilos aos elementos HTML.

    Estilizar “todos” os elementos

    * {
    preenchimento: 0 ;
    margem: 0 ;
    família de fontes: Arial, Helvetica, sans-serif;
    }


    Todos os elementos HTML são aplicados com estilos CSS que são explicados abaixo:

      • “ preenchimento ” propriedade com “ 0 ” não inclui nenhum espaço ao redor do conteúdo do elemento.
      • “ margem ” propriedade com “ 0 ” O valor não adiciona nenhum espaço fora de cada um dos elementos.
      • “ família de fontes ” propriedade é atribuída a um valor “ Arial, Helvética, sem serifa ”. A lista de estilos de fonte é fornecida para garantir que, se o primeiro estilo não for suportado pelo navegador, outros estilos devem ser aplicados.

    Elemento de estilo “mesa”

    tabela {
    margem: 0px automático;
    borda: 1px ganhos sólidos;
    }


    O elemento de tabela HTML é aplicado com as propriedades CSS descritas abaixo:

      • “ fronteira ” propriedade é definida com o valor “ 1px ganho sólido ” que representa a largura da borda, o estilo da borda e a cor da borda, respectivamente.

    “ margem ” se comporta conforme especificado acima.

    Elemento de estilo “td”

    td {
    alinhamento de texto: centro;
    }


    O elemento

    		é aplicado com a propriedade “ alinhamento de texto ” com o valor “ Centro ”. Isso alinhará o texto da coluna no centro.

    Elemento de estilo 'botão'

    botão {
    cor de fundo: cadetblue;
    preenchimento: 10px 10px;
    cor: #ffffff;
    largura: 150px;
    }


    O elemento de 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 inferior e 10px nos lados esquerdo-direito 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 irá gerar o seguinte resultado:


    Até agora, discutimos os cursores fornecidos pelo CSS. Na próxima seção, o exemplo descreverá como criar um cursor personalizado com CSS.

    CSS personalizado do cursor

    Os desenvolvedores devem usar cursores adequados para seus aplicativos. Os cursores devem ser atraentes para chamar a atenção dos usuários. Além disso, o cursor personalizado pode ser criado para essa finalidade.

    Veja o exemplo abaixo!

    Exemplo: Como criar um cursor personalizado com CSS?

    Em HTML, adicione dois elementos div. Um com a classe “ círculo ” e o outro com a classe “ apontar ”.

    HTML

    < div aula = 'círculo' > div >
    < div aula = 'apontar' > div >


    Vamos avançar para a seção CSS.

    Elemento de estilo “corpo”

    corpo {
    altura: 100vh;
    }


    O elemento body do arquivo HTML é aplicado com o estilo “ altura ” para definir a altura do elemento.

    Estilo “círculo” div

    .círculo {
    largura: 20px;
    altura: 20px;
    borda: 2px branco sólido;
    raio da borda: cinquenta % ;
    }


    Abaixo está a explicação das propriedades CSS que são aplicadas ao elemento div com classe “ círculo ”:

      • “ largura ” ajusta a largura do elemento.
      • “ fronteira ” com o valor especificado como “ 2px branco sólido ” representa a largura da borda, o estilo da borda e a cor.
      • “ raio da borda ” altera a borda arredondada do elemento.

    Estilo 'ponto' div

    .apontar {
    largura: 5px;
    altura: 5px;
    cor de fundo: branco;
    raio da borda: cinquenta % ;
    }


    O elemento div com ponto de classe é fornecido com diferentes propriedades que são descritas abaixo:

      • “ cor de fundo ” especifica a cor do fundo do elemento.
      • “ raio da borda ” define as arestas do elemento arredondadas.
      • Outras propriedades funcionarão da mesma forma que discutimos.

    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

    < roteiro >
    const cursorCircle = document.querySelector ( '.círculo' ) ;
    const cursorPoint = document.querySelector ( '.apontar' ) ;
    const moveCursor = ( e ) = > {
    const mouseY = e.clientY;
    const mouseX = e.clientX;

    cursorCircle.style.transform = ` traduzir ( ${mouseX} px, ${mouseY} px ) ` ;
    cursorPoint.style.transform = ` traduzir ( ${mouseX} px, ${mouseY} px ) ` ;
    }
    window.addEventListener ( 'mover o mouse' , mova o cursor )
    roteiro >


    A descrição do código JavaScript acima é fornecida abaixo:

      • “ , que é usada para escrever o código JavaScript.
      • “ const ” identifica que a palavra-chave const seguida por uma variável não pode ser reatribuída.
      • “ document.querySelector('.circle') ” retorna o elemento div do círculo que corresponde ao seletor especificado no documento.
      • “ document.querySelector('.point') ” retorna o elemento div de ponto que corresponde ao seletor especificado no documento.
      • “ const moveCursor = (e) => ” esta função especifica a função do cursor.
      • “ e.clientY ” retorna a coordenada vertical quando o evento do mouse foi acionado.
      • “ e.clientX ” retorna a coordenada horizontal quando o evento do mouse é acionado.
      • “ cursorCircle.style.transform ” o círculo div é aplicado com transformação de estilo.
      • “ cursorPoint.style.transform ” o ponto div é aplicado com transformação de estilo.
      • “ translate(${mouseX}px, ${mouseY}px) ” da propriedade transform define as coordenadas horizontal e vertical.
      • “ window.addEventListener('mouse', moveCursor) ” O método ouvinte de evento ouvirá o movimento do mouse. Faz parte do objeto janela global.

    Depois de fornecer os blocos de código acima, o cursor se moverá automaticamente na tela conforme mostrado abaixo:


    Que legal! Criamos um cursor personalizado com diferentes propriedades CSS.

    Conclusão

    O CSS “ cursor ” tem vários valores que indicam vários estilos de cursor. No entanto, utilizando os elementos HTML e as propriedades CSS, podemos criar cursores personalizados. Em seguida, o código JavaScript é implementado para ativar sua funcionalidade. Este estudo demonstrou como criar cursores CSS personalizados com um exemplo prático.

    Outro

    Categoria

    Publicações Populares

    Como compreender o loop de histerese magnética e a curva BH

    Qual é o processo para passar parâmetros de URL para um iframe em JavaScript?

    Como usar Rufus no Linux

    Como alterar o nome de usuário no Debian 11 Bullseye

    Como usar recuperadores no LangChain?

    Pandas para HTML

    Como instalar Domoticz no Raspberry Pi

    Integração Calendly Salesforce

    Um breve guia para emparelhamento de VPC na AWS?

    Como instalar o Discord no Debian 12

    Como usar o assistente de importação de dados no Salesforce

    Instalação USB Ubuntu: guia passo a passo

    Como configurar o Kali Linux no VirtualBox?

    Corrigir o erro de discórdia 1105 no Windows PC

    7 correções para “Ocorreu um problema ao iniciar C:\Windows\System32\LogiLDA.dll” no Windows

    Como utilizar o “break-after” com pontos de interrupção e consultas de mídia no Tailwind?

    O que Vcc significa no Arduino

    Como extrair dados de arquivos de texto com PowerShell

    O alerta “HostsFileHijack” do Windows Defender aparece se a telemetria estiver bloqueada - Winhelponline

    Como migrar aplicativos de um dispositivo Android para outro