lw
programação
é elemento decorativo e elemento
gráfico funcional. Se essa propriedade
for usada corretamente, é possível dar
o destaque correto a certos elementos
da página, além de tornar o site muito
mais intuitivo, explicitando conteúdos,
links e ações.
Criar seu próprio cursor usando
uma imagem pode ser interessante,
mas é uma arma traiçoeira e deve
ser usada com extremo cuidado.
Não sobrecarregue demais com
efeitos especiais, isso pode frustrar a
expectativa do usuário.
Quando se está navegando por uma
página em um dispositivo que suporta
cursor, é esperado que, ao passar
sobre uma região comum da página,
apareça uma seta. Já quando passa
o mouse sobre um texto, espera-se o
indicador feito pela letra maiúscula I;
quando passamos por cima de algum
link, espera-se que uma mão apareça.
Embora menos visto, é agradável
também quando encontramos alguma
região da página com o cursor de
ajuda. Assim, é uma boa prática não
fazer alterações inesperadas no cursor
usando, por exemplo, alguma imagem
de difícil reconhecimento ou significado.
Além disso, tome cuidado para não
exagerar na estética e prejudicar o
desempenho do site. Embora seja um
problema de menor escala, lembre-se
também de que toda imagem adicional
aumenta o tempo de download da
página. E, claro, não podemos esquecer
o bom gosto. É extremamente irritante
navegar por sites festivos, como os
sites da década de 1990, repletos de
gifs animados. Ou seja, não coloque
uma caveira rodando nem pegando
fogo como cursor do seu site.
Com o projeto do layout em mãos, é
muito fácil fazer a alteração do cursor
com CSS. Basta definir algum valor
para o elemento cursor. Por exemplo,
se quiser que o cursor se altere para o
indicador de ajuda, quando o mouse
está sobre um div, basta configurar o
estilo da seguinte maneira:
<div style="cursor: help">Ajuda</div>
Ou, caso prefira alterar seu arquivo
Tome cuidado para não exagerar na
estética e prejudicar o desempenho
do site: toda imagem adicional aumenta
o tempo de download da página web
Existem diversas outras
configurações de cursores.
Quem quer uma lista completa
de tudo o que pode ser feito
com cursores usando CSS3 pode
conferir com detalhes em:
Também há o conhecido
w3schools, que, além de
explicar diversas propriedades,
também fornece um aplicativo no
qual é possível testar o efeito de
várias propriedades:
OPÇÕES
Sem grandes dificuldades, o cursor
pode ser mudado para diversas formas
de estilos, pode-se também definir
essa propriedade em uma classe.
Por exemplo, basta definir a classe
“cursor-ajuda” que altera o cursor para
o indicador de ajuda.
.cursor-ajuda {
cursor: help
}
E, em seu HTML, apontar a classe do
estilo seguinte:
<div class="cursor-ajuda">
Passe o mouse sobre esta área para ver o
cursor de ajuda.
</div>
É possível também mudar o cursor
utilizando JavaScript. Por exemplo,
com o código abaixo, o cursor se altera
para o “redimensionar para a esquerda”
quando o mouse passa sobre o link:
<a href="links.html" onMouseOver="this.style.
cursor='w-resize';">Redimensione</a>
O elemento cursor existe desde o
CSS1. No CSS2 tínhamos as opções:
auto; default:
duas opções diferentes
que definem o cursor padrão;
crosshair:
opção para um cursor em
forma de cruz;
help:
símbolo que indica que uma ajuda
está disponível;
move:
símbolo que indica que algo
pode ser movido;
pointer:
o cursor é renderizado como
um ponteiro;
progress, wait:
opções para indicar
que algum programa está em progresso;
text:
símbolo que indica que pode ser
locaweb
63
