Mudando o cursor do mouse com CSS
CSS - Mudar o cursor do mouse com CSSModificando o cursor do mouse
Informação:
Nesta matéria abordaremos métodos de como mudar o cursor de seu mouse de maneira rápida e fácil, possibilitando modificar o cursor para diversos modelos diferentes ou até mesmo um cursor pe
Obs: Vale lembrar que ps comandos citados nesta matéria funcionam em todos os navegadores sem distinção, sem a necessidade de prefixos.
Vejamos um exemplo:
.exemplo1 {
cursor:pointer;
}
Sombras em textos e objetos com CSS3
O comando cursor permite que o estilo do cursor do mouse seja modificado facilmente por algum outro modelo padrão ou até mesmo uma imagem personalizada .
Opções do comando cursor:
- Crosshair: Para precisão; posicionamento;
- Default: Padrão do sistema (seta);
- Pointer: Objeto clicável;
- Move: Objeto móvel;
- Text: Selecionar ou editar um texto;
- Wait: Icone de espera ou carregamento;
- Help: Ajuda;
- e-resize: Direita;
- ne-resize: Diagonal cima-direita;
- n-resize: Cima;
- nw-resize: Diagonal cima-esquerda;
- w-resize: Esquerda;
- sw-resize: Diagonal baixo-esquerda;
- s-resize: Baixo;
- se-resize: Diagonal baixo-direita.
Abaixo alguns exemplos de utilização:
.exemplo_1 {
cursor:crosshair;
}
.exemplo_2 {
cursor:help;
}
.exemplo_3 {
cursor:move;
}
.exemplo_4 {
cursor:pointer;
}
.exemplo_5 {
cursor:text;
}
Veja o Resultado:
Cursor com Imagens
O comando cursor permite também que o cursor padrão do mouse seja substituido por uma imagem ou outro icone de sua escolha. Essa função permite que o cursor do mouse seja modificado tanto em apenas uma parte de seu site quanto no site inteiro.
Vejamos um exemplo:
.exemplo_1{
cursor: url(http://www.webcis.com.br/images/lupa-clientes.cur), default;
}
Para que seja possível a substituição do cursor, é necessário que a imagem a ser utilizada esteja nos formatos .cur ou .gif (para imagens estáticas) ou .ani (para animações, como o exemplo acima) e que a imagem esteja hospedada em seu próprio site ou qualquer outro link externo.
Veja o Resultado:
Criação e Diagramação
