Assine:
Customizando O Cursor
Customizando o cursor
Escrito por MattheusRoriz em WebStandards e CSS. Data: 18/10/2007
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Com o CSS é possível customizar o tipo de cursor a ser usado em sua página. Sem enrolação vamos direto ao assunto.
Adicionando um cursor customizado para um link
A sintaxe para se customizar um cursor é bem simples:
SELETOR{cursor: valor}
Para que vocês possam entender melhor, vamos a um exemplo:
CODE
<html>
<head>
<style type="text/css">
.xlink{cursor: crosshand}
.ylink{cursor: help}
</style>[/size]
[size="2"]</head>[/size]
[size="2"]<body>
<a href=# class="xlink">Cruz</a>
<a href=# class="ylink">Help</a>
</body>[/size]
[size="2"]</html>
<head>
<style type="text/css">
.xlink{cursor: crosshand}
.ylink{cursor: help}
</style>[/size]
[size="2"]</head>[/size]
[size="2"]<body>
<a href=# class="xlink">Cruz</a>
<a href=# class="ylink">Help</a>
</body>[/size]
[size="2"]</html>
Adicionando um cursor customizado para toda a página
Se você deseja redefinir o cursor para toda a página a sintaxe é bem simples:
CODE
<html>
<head>
<style type="text/css">
body{cursor: crosshand}[/size]
[size="2"]</style>[/size]
[size="2"]</head>[/size]
[size="2"]<body>
<p>Algum texto</p>
</body>[/size]
[size="2"]</html>
<head>
<style type="text/css">
body{cursor: crosshand}[/size]
[size="2"]</style>[/size]
[size="2"]</head>[/size]
[size="2"]<body>
<p>Algum texto</p>
</body>[/size]
[size="2"]</html>
Adicionando um cursor customizado para áreas em uma página
Para mudar o cursor de acordo com as áreas da página a sintaxe é essa:
CODE
<html>
<head>
<style type="text/css">
.xlink A{cursor: crosshand}
.ylink A{cursor: help}
</style>[/size]
[size="2"]</head>[/size]
[size="2"]<body>
<span class="xlink">
<a href=# class="xlink">Cruz</a>
<a href=# class="ylink">Cruz</a>
</span>[/size]
[size="2"]<span class="ylink">
<a href=# class="xlink">Help</a>
<a href=# class="ylink">Help</a>
</span>[/size]
[size="2"]
</body>
</html>
<head>
<style type="text/css">
.xlink A{cursor: crosshand}
.ylink A{cursor: help}
</style>[/size]
[size="2"]</head>[/size]
[size="2"]<body>
<span class="xlink">
<a href=# class="xlink">Cruz</a>
<a href=# class="ylink">Cruz</a>
</span>[/size]
[size="2"]<span class="ylink">
<a href=# class="xlink">Help</a>
<a href=# class="ylink">Help</a>
</span>[/size]
[size="2"]
</body>
</html>
Tabela de propriedades do cursor
Utilize um dos exemplos acimas e apenas substitua pelos valores abaixo:
cursor:default
cursor:crosshair
cursor:hand
cursor:pointer
cursor:pointer;cursor:hand
cursor:move
cursor:text
cursor:wait
cursor:help
cursor:n-resize
cursor:ne-resize
cursor:e-resize
cursor:se-resize
cursor:s-resize
cursor:sw-resize
cursor:w-resize
cursor:nw-resize
cursor:progress
cursor:not-allowed
cursor:no-drop
cursor:vertical-text
cursor:all-scroll
cursor:col-resize
cursor:row-resize
cursor:url(uri)
Patrocinado pelo Google adsense.....não me deixe passar fome!!!!hehe
Mais recentes em WebStandards e CSS
- Mini-lib css reset do micox
- Por Micox - Abaixo mostrarei tipo uma mini-lib css com o qual eu...
- Mapear regiao
- Por faro - Substituindo a tag map pelo css....
- Layout diferente.
- Por faro - Boa noite pessoal como vão todos... esse é meu primeiro...
- Rollover via css
- Por NightSpy - Achei este efeito na net, como não achei novamente,...
- Menu drop-down só com css - até 4 níveis
- Por Micox - Código pronto - só copiar, colar e usar...
Ver mais Artigos de WebStandards e CSS.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com