Testador de Cursores CSS

• Pré-visualização instantânea de cursores CSS: visualize os 38 estilos de cursor CSS padrão passando o mouse sobre cada cartão do testador. O cursor muda na hora ao passar o mouse - sem cliques, sem espera e sem adivinhar como cada cursor fica na sua plataforma.
• Testador de cursores CSS online e seguro: o testador roda inteiramente no seu navegador, sem coleta de dados, sem rastreamento e sem requisições ao servidor. É uma ferramenta de referência puramente do lado do cliente - sua navegação é totalmente privada.
• Testador de cursores CSS sem instalação: use o testador direto em qualquer navegador moderno, sem downloads, plugins ou extensões. Os cursores são renderizados com o conjunto nativo do seu sistema operacional, então você vê exatamente o que seus usuários verão.
• 100% grátis com cópia em um clique: o testador de cursores CSS é totalmente grátis, sem cadastro, sem limites de uso e sem anúncios. Clique em qualquer cartão de cursor para copiar na hora a declaração CSS pronta para uso.

• Escolher o cursor certo para elementos de interface: use o testador para encontrar o cursor correto para botões, links, elementos arrastáveis e controles desativados. Passe o mouse por cada cursor no testador para ver exatamente como fica antes de adicioná-lo à sua folha de estilo.
• Design de interfaces de arrastar e soltar: interfaces de arrastar e soltar exigem feedback preciso do cursor - grab ao passar o mouse, grabbing ao arrastar e no-drop sobre destinos inválidos. O testador permite visualizar todos os cursores de arraste lado a lado.
• Componentes de painéis redimensionáveis e divisores: painéis redimensionáveis precisam de cursores de redimensionamento direcional (ew-resize, ns-resize, col-resize, row-resize). Use o testador para visualizar todas as variantes e escolher a correta para cada alça de redimensionamento.
• Acessibilidade e feedback de UX: o feedback correto do cursor é um requisito de acessibilidade - os usuários dependem das mudanças de cursor para entender o que é interativo. O testador ajuda a verificar que elementos desativados usam not-allowed e estados de carregamento usam wait ou progress.
• Verificação de cursores entre plataformas: cursores CSS são renderizados de forma diferente no Windows, macOS e Linux. Use o testador em cada plataforma para verificar que o cursor escolhido fica correto para seu público-alvo antes de publicar.
• Revisão de código e documentação: ao revisar código CSS ou escrever documentação de componentes, use o testador como referência rápida para verificar se os valores de cursor estão corretos e adequados para a interação descrita.

A propriedade CSS cursor define o formato do cursor do mouse que aparece quando o usuário passa o mouse sobre um elemento. É um dos sinais de UX mais importantes em interfaces web - o cursor comunica aos usuários o que acontecerá ao interagir com um elemento. A especificação CSS define 38 valores de cursor padrão organizados em categorias: cursores gerais, indicadores de link e status, cursores de seleção, cursores de arrastar e soltar, cursores de redimensionamento e cursores de zoom. Nosso testador de cursores CSS permite visualizar todos eles usando a renderização nativa de cursores do seu sistema operacional, então você vê exatamente o que seus usuários verão na plataforma deles.

1. Explore ou pesquise: use as abas de categoria para filtrar cursores por tipo (Geral, Links e status, Seleção, Arrastar e soltar, Redimensionamento, Zoom), ou digite um nome ou descrição de cursor na caixa de busca. O testador atualiza a grade na hora.
2. Passe o mouse para visualizar: mova o mouse sobre qualquer cartão de cursor para ver o cursor mudar em tempo real. A barra de informações na parte inferior mostra o nome do cursor, a declaração CSS e a descrição. O testador usa a renderização nativa de cursores do seu navegador - nenhuma imagem ou SVG é usada.
3. Clique para copiar: clique em qualquer cartão de cursor para copiar a declaração CSS completa (por exemplo, cursor: pointer; ) para a área de transferência. Cole direto na sua folha de estilo. O cartão mostra uma confirmação de “Copiado!” por 1,5 segundo.

• Geral: auto (o navegador decide), default (seta da plataforma) e none (cursor oculto). Use auto para a maioria dos elementos e sobrescreva apenas quando necessário.
• Links e status: pointer para elementos clicáveis, wait para operações bloqueantes, progress para operações em segundo plano, help para gatilhos de dica e context-menu para alvos de clique direito.
• Arrastar e soltar: grab e grabbing para elementos arrastáveis, move para itens móveis, copy para operações de cópia, alias para atalhos, no-drop e not-allowed para alvos inválidos e ações desativadas.
• Redimensionamento: cursores de redimensionamento direcional para as 8 direções da bússola (n, s, e, w, ne, nw, se, sw) mais variantes bidirecionais (ew-resize, ns-resize, nesw-resize, nwse-resize) e col-resize , row-resize e all-scroll para redimensionar tabelas e painéis.

Os 38 valores de cursor CSS do testador são suportados no Chrome, Firefox, Safari, Edge e Opera. A aparência visual de cada cursor varia conforme o sistema operacional - o Windows usa cursores Aero, o macOS usa seu próprio conjunto e o Linux usa o tema de cursores X11. Isso é intencional: o navegador delega a renderização do cursor ao sistema operacional para que os cursores pareçam nativos na plataforma do usuário. O cursor none oculta o cursor por completo - use com cuidado e apenas quando fornecer um cursor personalizado via JavaScript, pois ocultar o cursor sem substituto é um problema de acessibilidade.