Gerador de Cursor CSS
Uma ferramenta para gerar e visualizar estilos de cursor CSS2, CSS3 e cursores personalizados.
Cursores CSS2Suporte Universal
auto
Clique para copiar
inherit
Clique para copiar
crosshair
Clique para copiar
default
Clique para copiar
help
Clique para copiar
move
Clique para copiar
pointer
Clique para copiar
progress
Clique para copiar
text
Clique para copiar
wait
Clique para copiar
e-resize
Clique para copiar
ne-resize
Clique para copiar
nw-resize
Clique para copiar
n-resize
Clique para copiar
se-resize
Clique para copiar
sw-resize
Clique para copiar
s-resize
Clique para copiar
w-resize
Clique para copiar
Cursores CSS3Navegadores Modernos
none
not IE, Safari, Opera
Clique para copiar
context-menu
not Firefox, Chrome
Clique para copiar
cell
not Safari
Clique para copiar
vertical-text
Clique para copiar
alias
not Safari
Clique para copiar
copy
not Safari
Clique para copiar
no-drop
Clique para copiar
not-allowed
Clique para copiar
ew-resize
Clique para copiar
ns-resize
Clique para copiar
nesw-resize
Clique para copiar
nwse-resize
Clique para copiar
col-resize
Clique para copiar
row-resize
Clique para copiar
all-scroll
Clique para copiar
grab
only Webkit and Firefox
Clique para copiar
grabbing
only Webkit and Firefox
Clique para copiar
zoom-in
only Webkit and Firefox
Clique para copiar
zoom-out
only Webkit and Firefox
Clique para copiar
Cursores PersonalizadosAvançado
Cursores baseados em URL
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
Formatos Suportados
.cur
.png
.jpg
.gif
Exemplo de Uso
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Cursores baseados em URL
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
Formatos Suportados
.cur
.png
.jpg
.gif
Exemplo de Uso
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
Considerações de Acessibilidade
- • Forneça dicas visuais adicionais em vez de depender apenas de cursores para expressar a funcionalidade
- • Use cursores que sejam visíveis no modo de alto contraste
- • Use cursores animados com moderação, considerando as configurações de acessibilidade
- • Forneça indicadores de foco para usuários de navegação por teclado
Otimização de Desempenho
- • Pré-carregue imagens de cursor personalizadas para evitar atrasos
- • Use sprites CSS para reduzir as solicitações HTTP
- • Evite alterações desnecessárias de cursor para melhorar o desempenho
- • Considere que cursores personalizados não são exibidos em ambientes móveis