WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Mudando o cursor do mouse com CSS

Publicidade

Modificando 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:

Exemplo 1
Exemplo 2
Exemplo 3
Exemplo 4
Exemplo 5
Exemplo 6

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:

Exemplo 1
Publicidade
Postado por: Arthur Di Polito
Criação e Diagramação 

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]