10.1 Propriedade cursor
O CSS permite alterar a aparência do cursor ao passar sobre elementos usando a propriedade cursor.
Esta propriedade permite definir vários tipos de cursores, melhorando a interatividade e o apelo visual das páginas web.
A propriedade cursor define a aparência do cursor do mouse quando está sobre um elemento. Os valores podem ser
pré-definidos ou imagens personalizadas.
Sintaxe:
element {
cursor: value;
}
Valores:
A propriedade cursor suporta vários valores que podem ser divididos em pré-definidos e personalizados.
Valores pré-definidos:
default: cursor padrãopointer: cursor em forma de mão, geralmente usado para linkstext: cursor em forma de texto (I), geralmente usado para campos de textomove: cursor para moverwait: cursor em forma de ampulheta ou indicador de esperahelp: cursor em forma de ponto de interrogaçãocrosshair: cursor em forma de miranot-allowed: cursor em forma de sinal de proibição (círculo cortado)grabegrabbing: cursores para arrastar elementos
Exemplo de uso de valores pré-definidos:
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
<div class="default-cursor">Cursor padrão</div>
<div class="pointer-cursor">Cursor de ponteiro</div>
<div class="text-cursor">Cursor de texto</div>
10.2 Valores personalizados (cursotes customizados)
A propriedade cursor também suporta o uso de imagens personalizadas como cursores.
Para isso, é utilizado o valor url.
Sintaxe:
element {
cursor: url("custom-cursor.png"), fallback;
}
Onde:
url('custom-cursor.png'): indica o caminho para a imagem do cursorfallback: valor pré-definido que é usado se a imagem personalizada não puder ser carregada
Exemplo de uso de cursores personalizados:
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Cursor personalizado</div>
</body>
Especificações e limitações para cursores personalizados:
- Formatos de imagens: formatos suportados são
.cur,.png,.jpg,.gif. - Tamanhos de imagens: recomenda-se usar imagens de 32x32 pixels ou menores para melhor desempenho e compatibilidade.
- Coordenadas do ponto de clique: na imagem do cursor, é possível definir as coordenadas do ponto de clique (hotspot). Por padrão, é o canto superior esquerdo (0,0).
10.3 Detalhes do uso de cursores personalizados
Formatos de imagens
Cursors personalizados podem estar em vários formatos, como PNG, GIF, JPG e SVG. Recomenda-se usar formatos com suporte a transparência (por exemplo, PNG), para que o cursor pareça correto sobre qualquer fundo.
Tamanhos de imagens
As imagens de cursores não devem ser muito grandes. Os tamanhos recomendados são 32x32 pixels ou menores. Imagens grandes podem não ser exibidas corretamente em alguns navegadores.
Especificação das coordenadas de foco
É possível especificar as coordenadas de foco (hotspot) do cursor usando valores adicionais após a URL da imagem.
Sintaxe
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Onde:
xey: coordenadas do foco em relação ao canto superior esquerdo da imagem.
Exemplo de uso com coordenadas de foco:
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor-focus">Cursor personalizado com foco</div>
</body>
Explicação do código:
.custom-cursor-focus: define um cursor personalizado com coordenadas de foco (16, 16), tornando o meio da imagem o ponto quente.
Aplicação prática:
- Melhoria do UI/UX: o uso de cursores personalizados pode melhorar significativamente a interface do usuário, tornando-a mais intuitiva e esteticamente agradável.
- Elementos interativos: cursores personalizados podem ser aplicados a elementos interativos, como botões, links, ícones, etc.
- Jogos e aplicações: em jogos e aplicativos web, cursores personalizados ajudam a criar um estilo e atmosfera únicos.
GO TO FULL VERSION