Tutorial - Efeito do gadget "Elas Gostam"

 

Yoo!

Senti falta de começar a postagem assim, fiquei tão inspirada no novo Kawaii World que até o uso de algo tão informal me deixa meio estranha. Tenho algum tipo de fobia com isso de desorganização. Felizmente, o blog está muito mais organizado agora e espero que continue assim.

Enfim, se vocês forem até meu gadget cujo o título é "Elas Gostam", podem ver que há um certo efeito nas imagens. Ao passar o mouse, outra parte da imagem é revelada, dando a impressão de que na verdade um novo elemento aparece. Nada mais é que um pequeno truque pelo height.

Prestem atenção neste pequeno detalhe e garanto que vão ter ideias com esse efeitozinho para várias coisas, incluindo menus.

1. Crie sua imagem. O exemplo que usarei será parecido com o meu. A imagem apresenta a figura e abaixo uma barrinha com as letras indicativas, assim:

A - Parte da imagem

B - Parte da barrinha 

2. Após criar, pegue as medidas. Note que a imagem é uma só, mas iremos precisar de medidas separadas. Primeiro pegue a medida da parte A e depois da imagem toda.

3. Lá mesmo em editar HTML (como usualmente) procure por ]]></b:skin> e acima da tag, cole:

.efeitozinho {

float:left;

width: LARGURApx;

height:ALTURA1px;

-webkit-transition-duration: .90s;

background:url(LINK DA SUA IMAGEM) no-repeat;

}

.efeitozinho:hover {

height: ALTURA2px;

}

Você só precisará substituir algumas coisinhas.

Em largura coloque o valor da largura da sua imagem.

Em altura 1 coloque o valor da altura com somente a parte A.

Em altura 2 coloque o valor da altura com as duas partes (a imagem toda).

Em link da sua imagem, já sabe o que colocar.

4. Após editar os valores e salvar só faltará colocar em um gadget de HTML/JavaScript. Nele, cole:

<a href="seu link" class="efeitozinho"></a>

Prontinho! Gostaram?