1
Obrigado

Algumas palavras de agradecimento nunca são demais.

Alterar a aparência do cursor com CSS

O cursor pode ter sua aparência alterada a depender de qual o elemento de um site sobre o qual ele seja posicionado. Essa exibição é automática assim que o usuário acesse o site. Veja como realizar essa mudança com o CSS.




Exemplos de configuração

Exemplo de um estilo em forma de cruz dado ao cursor no "body" da sua página:

body{ 
cursor:crosshair;
}


Pode-se, evidentemente, dar estilos diferentes para vários elementos da mesma página.

Exemplo de um estilo em forma de cruz sobre o "body" incrementado com uma ampulheta sobre as imagens e com a mão, nos links:

body{ 
cursor: crosshair;
}
img{
cursor: wait;
}
a:link{
cursor: pointer;
}


Para terminar, você também pode atribuir um cursor personalizado a uma página.

Basta colocar no código CSS o tag desejado, partindo do princípio de que o seu cursor está na pasta atual:

cursor: url('seu_cursor_personalizado.cur'), apontar; 


Existem muitos softwares que podem criar cursores personalizados, sendo que o melhor é partir de cursores originais e mudá-los, sem esquecer de salvá-los antes de qualquer manipulação (no Windows, eles se encontram no C:windowscursors). O tamanho dos cursores não deve ultrapassar 32x32 px.

Estilos aceitos por todos os navegadores

  • auto: Aspecto idêntico ao cursor padrão no tag que tem o atributo, não muda nada.
  • default: Cursor padrão do navegador.
  • pointer: Cursor em forma de mão com o dedo reto.
  • text: Cursor de edição de texto.
  • help: Cursor de ajuda.
  • wait: Cursor de espera
  • progress: Cursor de progressão.
  • move: Cursor de deslocamento.
  • crosshair: Cursor em forma de cruz.

Estilos não aceitos por todos os navegadores

Observação: Firefox e Opera, entre outros, ignoram as orientações listadas abaixo.
  • inherit : Mesmo cursor que o tag parente.
  • not-allowed: Cursor de forma arredondada e cruzada.
  • no-drop: Cursor em forma de mão com o dedo reto e um círculo cruzado.
  • col-resize: Cursor feito de duas linhas verticais com uma seta de cada lado.
  • row-resize: Cursor feito de duas linhas horizontais com uma seta de cada lado.

Cursores de redimensionamento

  • n-resize: Cursor de redimensionamento de baixo para cima.
  • s-resize: Cursor de redimensionamento de cima para baixo.
  • e-resize: Cursor de redimensionamento da esquerda para a direita.
  • w-resize: Cursor de redimensionamento da direita para a esquerda.
  • ne-resize: Cursor de redimensionamento de baixo à esquerda para cima à direita.
  • nw-resize: Cursor de redimensionamento de baixo à direita para cima à esquerda.
  • se-resize: Cursor de redimensionamento de cima à esquerda para baixo à direita.
  • sw-resize: Cursor de redimensionamento de cima à direita para baixo à esquerda.


Nota: Na verdade, é muito fácil lembrar-se de todas essas propriedades ao mesmo tempo.

n, s, e, w correspondem a norte, sul, leste, oeste, ou seja, pra cima, pra baixo, pra direita, pra esquerda.

Basta indicar a direção para a qual o cursor deve apontar, seguido, obviamente, de "-resize".

Foto: © EGOR ZEMLIAKOV - 123RF.com

Veja também

Este documento, intitulado 'Alterar a aparência do cursor com CSS', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.

0 Comentário