Criando seu próprio efeito

Olá, anjos. O blog está sobre a minha responsabilidade, a Débora foi viajar e a dona também (Helena), tenho que estar postando hoje (meu dia, quarta feira), sexta, sábado, domingo, é o enorme prazer postar pra vocês, então eu tenho que estar aqui cuidando dele por enquanto que elas estão de viagem, antes da Débora sair pra viajar ela conversou comigo e passou tudinho, já que o blog está em minhas mãos. ◕‿◕

Bom pessoas, minhas aulas ainda não começaram, estou aproveitando por enquanto que estou de férias, e estar postando aqui pra vocês nas férias é bem melhor que estar em época de estudos. Vou começar ensinando um tutorial pra vocês que é de como criar seus própios efeitos, efeitos de afiliados, de Welcome, e tudo mais, vamos aprender comigo ~

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, quem já sabe criar efeitos, faz direitinho. 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 (x). 

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 (x).

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.

Em um  gadget HTML/JavaScript, cole:

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

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

Espero que tenham gostado ◑ω◐