Crie seu próprio efeito!

Olá, amores.

Estou muito feliz, hoje vi minha amiga que mudou de escola, estava morrendo de saudades dela. ♥

Cheguei em casa às duas, mas Jogos Vorazes me viciou (apesar de estar lendo-o pela segunda vez). Ontem eu assisti Percy Jackson e o Ladrão de Raios. Não me matem, mas eu achei bom. Não virei filha de Atena, talvez se eu ler o livro.

Estou feliz também por que a linda, maravilhosa, diva e fofa da Be - Soltando Balões - pediu um tutorial para que eu postasse. Cara, eu amo essa guria *u* 

Ignorem a primeira parte, somos tributos e estávamos conversando sobre os buttons do Jogos. Vou tentar ser o mais clara possível, ok?

Lembrando que existem vários tutoriais por aí, mas eu que fiz esse baseado no que aprendi.

O primeiro de tudo é a estrutura, e então, no seu bloco de notas, cole:

.nome do seu efeito{

colocaremos mais tarde

}

.nome do seu efeito:hover{

colocaremos mais tarde

}

Coloque o nome do seu efeito onde está indicado, dã

Quem já sabe criar efeitos, faz direto. Mas eu uso um site onde você pode criar a partir das ferramentas do site. Entre aqui e se você já sabe, personalize como quer, se não, preste atenção.

Quando estou criando meus efeitos, vou para a aba CSS Transition. Lá terá uma lista que é onde você personalizará seu efeito. Onde está escrito Transition Duration é a duração do efeito, quanto mais você aumenta, mais devagar será.

Um pouco mais abaixo, tem dois botõezinhos: Normal e On Hover. Normal é quando o mouse não está sobre a imagem. Você pode ajustar a rotação em Rotate, o tamanho em Scale, a inclinação em Skew e se ele vai para a direita ou esquerda em Translate.

Veja o print:

Para visualizar, clique em save e passe o mouse no retângulo onde está escrito CSS 3.0 Transition. Quando terminar, clique em On Hover e personalize como seria se o mouse estivesse sobre a imagem. Salve. Copie o código que está do outro lado da tela.

Siga as indicações na imagem. Recomendo testar em um blog de testes, para não ocorrer nenhum erro.

Cole o código pronto acima de ]]></b:skin> e salve.

Num gadget HTML/JavaScript, cole:

<a href="URL" title="NOME"><img src="IMAGEM" class="NomeDoSeuEfeito" /></a>

Você tem que colocar exatamente o nome do seu efeito em todos os lugares indicados. Por exemplo, se no HTML você colocou beijomeliga, no gadget tem que estar beijomeliga. Entendido?

Espero que gostem, e peçam mais ^^