Cursores Personalizados

Como devem ter notado em algumas das imagens que publiquei por aqui, aparece uma imagem diferente no lugar do cursor ao passar o rato por cima das imagens que se pode abrir com o Lightbox Colorbox.

Era algo que já há algum tempo que andava querendo implementar aqui e embora por enquanto ainda só tenha colocado em algumas imagens, em certos blogues acho que ideia pode ser interessante.

Imagine que publica imagens, (ficheiros zip ou vídeos, no caso de utilizarem uma alternativa ao Lightbox nativo do Blogger tal como o Shadowbox ) e utiliza o Lightbox para mostrar o conteúdo.

Não era interessante que em cada tipo de ficheiro, o cursor do rato aparecesse de maneira que identificasse o conteúdo? 8)

Bem, isso é possível de implementar no Blogger com um pouco de código CSS no código do template e editando o código de cada item na aba Editar HTML em Envio de Mensagens.

Alguns exemplos:

Como podem ver, em cada imagem aparece uma imagem diferente ao colocar o rato em cima.

O segredo está no código CSS, criamos algumas class (lembrem-se que as class no CSS começam com um ponto (.) em vez de cardinal (#)), damos um nome a cada uma delas e coloca-se onde quisermos acima de ]]></b:skin> no código HTML do template.

CSS dos exemplos acima:

Ver Código

---

.cursorimg { cursor:url("URL-DA-Imagem"),auto }
.cursorzip { cursor:url("URL-DA-Imagem"),auto }
.cursorvideo{ cursor:url("URL-DA-Imagem"),auto }
.cursormover { cursor:url("URL-DA-Imagem"),auto }
.cursormail { cursor:url("URL-DA-Imagem"),auto }

Ocultar Código

E colocamos em pratica, editando o código da imagem da maneira exemplificada abaixo:

<img class="cursorimg" src="//lh6.ggpht.com/_Jm8aDaSCrFU/SvSkzhczNyI/AAAAAAAAALY/oMhBQJhy5Yw/Contacto.png" style="height: 48px; width: 42px;" border="0" />

Basta adicionar a class escolhida em cada imagem, dependendo do tipo de cursor que desejamos que tenha.

E se em vez de imagens, desejássemos utilizar este truque em texto simples?

E colocar um diferente tipo de cursor que não imagens para cada bloco de texto ou link?

Exemplo 1: Código HTML Cursor Ajuda - "Ajuda"

Exemplo 2: Código HTML Cursor Pointer - "Pointer"

Exemplo 3: Código HTML Cursor Espera - "Espera"

Exemplo 4: Código HTML Cursor Crosshair - "Crosshair"

Exemplo 5: Código HTML Cursor Mover - "Mover"

Exemplo 6: Código HTML Cursor Imagem - "Emoticon"

Exemplo 7: Link para qualquer lado (por exemplo: Heromorph)

Código CSS dos exemplos acima por ordem de apresentação e como colocar em pratica:

Ver Código

---

.cursorajuda { cursor: help }
.cursorpointer { cursor: pointer }
.cursorespera { cursor: wait }
.cursorcrosshair { cursor: crosshair }
.cursormove { cursor: move }
.cursoremoticon { cursor:url(URL-DA-Imagem),auto }
.cursorimgem { cursor:url(URL-DA-Imagem),auto }

Como colocar em pratica, utilizando como exemplo os dois últimos exemplos acima:

<p class="cursoremoticon">Exemplo 6: Código HTML Cursor Imagem - "Emoticon"</p>
<p><a class="cursorimgem" href="//heromorph.com/heromorph2/" title="Visitar Heromorph">Exemplo 7: Link para qualquer lado (por exemplo: Heromorph)</a></p>

Ocultar Código

Fonte: CSS cursor Property

Espero que este pequeno tutorial/dica seja de utilidade a alguém. :D

Até Breve. :-F

Queres ler outro artigo ao calhas?