Criar Web, manuais e recursos para desenvolvimento web
Manuais
Programas
FAQS
Diretório
Comunidade
  Inicio > Manuais > Workshop de CSS
SEÇÕES
Manuais relacionados
+Workshop de CSS
Categorias
+CSS

Índice do Manual Workshop de CSS
+ Aplicação avançada de estilo aos links
+ Como evitar que um página se imprima
+ Título para tabelas decoradas com CSS
+ Bordas pontilhadas com CSS
+ Estilos em campo de texto
+ Montar uma página com CSS
+ Montar uma página com CSS II
+ Montar uma página com CSS III
+ Montar uma página com CSS IV
+ Montar uma página com CSS V
+ Variar o desenho e a construção com a folha de estilos
+ Workshop de CSS, Opacity
+ Links com estilo CSS que simulam botões
+ Criar um menu dinâmico com CSS
+ Utilizar CSS para montar um boletim
+ Caixa simples e elegante com CSS
+ Decorar um campo select de formulário com CSS
+ Esconder com CSS o e-mail aos spambots
+ Efeito de sombra com CSS
+ Texto na vertical usando CSS
+ Mudando o cursor do mouse
+ Caixa CSS para colocar conteúdo
+ Construção CSS com duas colunas
+ Construção CSS com três colunas
+ Variação da construção com CSS com 3 colunas
+ Caixa CSS com as esquinas arredondadas
+ Caixa CSS com linha de borda arredondada
+ Construir uma galeria de fotos com CSS
+ Construir uma galeria de fotos com CSS usando listas
+ Criação de gráficos de barras com CSS para a construção
+ Estilizando formulários
+ Realizar um rollover só com CSS e utilizando imagens
+ CSS para campos textarea de formulário
+ CSS para imprimir páginas web
+ Gerar colunas com CSS de uma lista sem tabelas
+ Molduras para fotos com CSS
+ Gráfico de barras com CSS, parte 2

Descrição dos capítulos

Parceiros
- CSS para Web Design
- S.O.S Designers
- Slackware-Brasil
- Crie seu Web site
- Oficina da Net

Mudando o cursor do mouse

Como mudar com CSS as opções por padrão dos cursores ao passar por certas partes da página.


Nosso sistema operacional possui cursores por padrão. Aos cursores nos referimos ao ponteiro do mouse: a típica setinha ou qualquer outro desenho que possa ter.

No Windows podemos encontrar vários cursores que se ativam quando passamos por "certas zonas" de nossa tela. Por exemplo, quando nos posicionamos sobre um link, a típica setinha (denominada default em CSS) muda pela mãozinha (pinter). Como no exemplo anterior, podemos encontrar dezenas de situações onde nosso ponteiro muda de imagem.

Com a ajuda das folhas de estilo podemos forçar ao nosso sistema operacional que não seja regido mais sob as normas convencionais dos ponteiros; conseguindo assim um atraente desenho onde o ponteiro de nosso mouse pode chegar a ser até uma imagem de nossa própria criação.

A seguir, pode-se observar a lista dos cursores disponíveis por padrão no Windows:

  • default (seta)
  • crosshair (cruz)
  • e-resize (seta que aponta à direita)
  • hand (mão)
  • help (sinal de pergunta)
  • move (cruz com setas nas extremidades)
  • n-resize (seta que aponta para cima)
  • ne-resize (seta que aponta ao nordeste)
  • nw-resize (seta que aponta ao noroeste)
  • pointer (mão)
  • s-resize (seta que aponta para baixo)
  • se-resize (seta que aponta para o sudeste)
  • sw-resize (seta que aponta para o sudoeste)
  • text (I-beam)
  • w-resize (seta que aponta à esquerda)
  • wait (relógio de areia)
Assim como todas as propriedades da linguagem CSS, é possível definir o objeto aplicando-o a todo o documento ou somente a uma parte do mesmo.

A todo o documento:

<html>
<title>Mudar o cursor</title>
<head>
<style type="text/css">
<!--
body {cursor: pointer}
-->
</style>
</head>
<body>
</body>
</html>

A alguns setores do documento:

<html>
<title>Mudar o cursor</title>
<head>
</head>
<body>
<h4 style="cursor: default">default</h4>
<h4 style="cursor: crosshair">crosshair</h4>
<h4 style="cursor: pointer">pointer</h4>
<h4 style="cursor: move">move</h4>
<h4 style="cursor: nw-resize">nw-resize</h4>
<h4 style="cursor: ne-resize">ne-resize</h4>
<h4 style="cursor: n-resize">n-resize</h4>
<h4 style="cursor: e-resize">e-resize</h4>
<h4 style="cursor: help">help</h4>
<h4 style="cursor: text">text</h4>
<h4 style="cursor: wait">wait</h4>
</body>
</html>

Também é possível utilizar um cursor personalizado:

<html>
<title>Mudar o cursor</title>
<head>
<style type="text/css">
<!--
body {cursor : url("find.cur")}
-->
</style>
</head>
<body>
</body>
</html>

Ver exemplo em funcionamento

Autoria e outras referências sobre este artigo

Manuais relacionados com este artigo
Dentro de Workshop de CSS
Seguinte: Caixa CSS para colocar conteúdo
Anterior: Texto na vertical usando CSS
< Índice de Workshop de CSS

Categorias relacionadas
Através das categorias do nosso diretório podem ser encontrados outros tipos de recursos relacionados com este artigo:
+ Entrar em CSS


Comentário sem rever
Entre os comentários não revistos podem ter alguns interessantes que tenham sido enviado recentemente.
 Foi encontrado um comentário sem rever

VerVer os comentários não revistos

Sobre nós | Copyright | Anuncie | Entrar em contato <criarweb>

Hospedado por Hostnet Hospedagem de Sites