{ HTML } Personalizando Cursores de Maneira Divertida...

| |
 ...
 Preguiça, sai daqui, por favor.
  Balas de goma!
 "Final Masquerade" - Linkin Park
 ...
 ...



Hello pequenos coelhos cintilantes! Como se sentem hoje? Eu espero que estejam bem e aproveitando os últimos dias de férias, aqui onde moro a galera anda apavorada em busca de materiais escolares... Essa mania de deixar tudo para a última hora, hein? Eu adorava comprar meus materiais, sempre escolhia os cadernos mais "purpurizados" possíveis e, até hoje, sou louca por produtos de papelaria.

Bem, a postagm de hoje é o segundo tutorial de HTML que posto aqui, o primeiro foi o de tooltips com efeito hover, quem lembra? ~risos~
Só postarei este tutorial pois me foi pedido por alguém no ask, se quiserem ler o pedido, cliquem aqui. Essa pessoa me pediu algumas maneiras de personalizar o cursor padrão, eu tenho uns truques na manga e resolvi postar hoje. Caso não queira ler esta postagem, continuem navegando pelo blog! Até breve! <3


O que são cursores padrões?


São os cursores que o blogger nos disponibiliza para utilizar livremente. Os cursores padrões podem ser usados em links, palavras negritadas, sublinhadas, tachadas e por ai vai. Vamos conhecê-los?

Passe o seu cursor do mouse sobre os nomes abaixo para visualizá-los!

default
crosshair
pointer
move
nw-resize
n-resize
e-resize
help
text
wait

OBS: caso os cursores não estejam aparecendo me avisem para que eu possa arrumar, certo?

Truques básicos...

Bom, agora vamos colocá-los em prática! Caso queira por cursores diferentes em links, procure por cada uma das linhas abaixo, acrescente o código destacado em lilás abaixo de cada um, mas não apague NADA que acompanhe os códigos, somente acrescente o que está destacado:



  • a:link { cursor: NOME_DO_CURSOR; }
  • a:visited { cursor: NOME_DO_CURSOR; }
  • a:hover { cursor: NOME_DO_CURSOR; }

ps: Você pode substituir o "NOME_DO_CURSOR" por "url(url do cursor);" se não quiser utilizar o cursor padrão!

Caso queira que o cursor se diferencie nas palavras em negrito, itálico, ou sublinhado coloque isso no seu HTML:


b, strong { cursor: NOME_DO_CURSOR; color: #COR_DA_FONTE; }
u, underline { cursor: NOME_DO_CURSOR; color: #COR_DA_FONTE; }
i { cursor: NOME_DO_CURSOR; color: #COR_DA_FONTE; }

Agora que já temos uma noção básica sobre os cursores...

"Efeito cursor duplo"

Este efeito é simples, teremos dois cursores: Um padrão e outro para os links em estado "hover". É parecido com o que expliquei acima!

Para utilizar este efeito é simples:

Passo 1:


  • Abra seu HTML e procure por "body";
  • Antes de fechar as chaves, cole o seguinte código:

cursor: url(URL DA IMAGEM), progress;

Agora é simples, basta colocar a url do seu cursor no local certo e salvar.

Passo 2:


  • Procure por: a:hover;
  • E agora cole o seguinte código:

cursor: url(URL DA IMAGEM), progress;

Cole então o código do seu segundo cursor no local indicado! Agora salve e pronto!

  • Certifique-se de colar este código nos links em hover dos widgets também! Basta procurar por "widgets" no seu HTML e procurar pelo hover dos links, colar o código e pronto!

"Efeito explosão"


Eu já utilizei este efeito em um template do Bunny Days, ele chamou bastante a atenção! Trata-se de uma pequena "explosão de estrelinhas", ela ocorre quando se clica em qualquer parte do blog, seja em links ou na área de postagem!

Para utilizar este efeito...

  • Vamos a Modelo / Editar HTML & "Ctrl+F", procure por:  </head>
  • Acima da tag, cole o seguinte código > aqui;

Antes de colar o código no devido lugar, cole-o em um bloco de notas, é melhor para editar (eu acho! XD). Para mudar as cores, o trecho que deve ser editado é o seguinte:

<script type="text/javascript">
// <![CDATA[
var sparks=75; // how many sparks per clicksplosion
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array('#03f', '#f03', '#0e0', '#93f'');
//                     blue    red     green   purple  

Para mudar as cores, você precisa colocar os respectivos códigos em ordem, no caso, eu destaquei de forma bem colorida no código acima! Não existe um número máximo de cores, eu utilizava três.
Aqui, é oferecido uma enorme variedade de cores, é só escolher, alterar, colar no local indicado e salvar. Sem mistérios.
Espero que tenham gostado do tutorial e, anônimo do ask, se este não for o tutorial que você estava procurando, me avise ok? Irei corrigir o mais rápido possível!

Até breve! ♥

5 comentários:

  1. Ainda não comprei meus materiais, as papelarias estão realmente lotadas ;-;
    Amei o post <3 Estava querendo há um tempo os nomes desses cursores. Efeito explosão de estrelinhas *0* Deve ficar um amor.

    >> c-olor.blogspot.com.br/
    - C h u ~

    ResponderExcluir
  2. Minhas férias já acabaram T_T Mas estou bem mesmo assim kkk

    Suas dicas são ótimas, tá tudo muito bem explicado *_* Acho muito fofo esses cursores, mas estava dando erro no meu layout então tive que tirar...

    ♥ Rendas e Doces

    ResponderExcluir
  3. Olá Usagi, eu marquei o Bunny Days em duas tags, se quiser fazê-las, está aqui ^3^ E que cursores legal essas ideias, eu acho a das estrelinhas tão bonitinho ♥

    Kissus ~ l-ovelymilkshake

    ResponderExcluir
  4. Usava muito esse codigo quando tinha um outro blog mas já tinha esquecido! Vou favoritar a pagina da postagem ensinando pra usar depois hehe

    http://lugarrnenhum.blogspot.com/

    ResponderExcluir
  5. Oii, Aceita Parceria? (ou afiliação?) Eu gostei muito do teu blog!
    Alternative World Parceria x Afiliação

    ResponderExcluir