20 de fev de 2013

Efeito Shake Hover

Oi Oi Gente!
Acho que já virou rotina começar o post pedindo desculpas por não postar mais cedo e hoje não vai ser diferente e os motivos sempre serão os mesmos aqueles escolares! E eu percebi que faltam apenas 1 seguidor para cumprirmos com a nossa meta de 140 então se puderem nos ajudar ficaríamos gratas!
Hoje eu venho com um tutorial bem legal e que eu faria mais já estamos usando um efeito bem massa também, mas eu vou fazer porque eu curto bastante e garanto que você irão curtir também. ~Créditos ao We Heart HTML

 Primeiro, você precisa de uma imagem assim:

 A parte de cima que tem a foto é sem o hover [quando não passamos o mouse encima] e a parte com meu nome é a parte com hover [quanto passamos o mouse encima]. Você tem que cortar a imagem certo no meio, para que fique como aqui c: . Agora vá em Modelo > Design > Editar HTML > Ctrl + F e pesquise por ]]></b:skin> e acima cole:
@-webkit-keyframes efeitomod {
50% {-webkit-transform: rotate(-4deg);}
75% {-webkit-transform: rotate(3deg); }
100% {-webkit-transform: rotate(0deg); }
}
.mode {background: url(LINK DA IMAGEM); height: 100px; width:200px; display: inline-block;}
.mode:hover {-webkit-animation: efeitomod .5s alternate linear; background-position: bottom;}


Bem, você apenas vai mudar as partes em Negrito, itálico e sublinhado.
Negrito
É o link da imagem que você fez.
Sublinhado
É a altura da imagem que você fez. Mas preste atenção, você tem que por a metade da altura total da imagen. Ex.: Sua imagem tem a altura total de 200px, você vai só por a metade, que seria 100px. Entendeu? :3
Itálico
É a largura da imagem, você tem que colocar a altura total da imagem.
Entendido? isso são as únicas coisas que você vai mudar.
Agora, para usar, coloque isso aonde você quer que o efeito apareça:
<a class='mode' href='LINK'/>

Para colocar mais pessoas na equipe com este efeito, você tem que criar uma class para cada pessoa, Ex.:
Tem 3 pessoas em sua equipe, e você quer por cada uma delas com este efeito, você vai ter que repetir a class:

.mode {background: url(LINK DA IMAGEM); height: 100px; width: 200px; display: inline-block;}
.mode:hover {-webkit-animation: efeitomod .5s alternate linear; background-position: bottom;} 
mudando apenas a parte em Negrito, e nos links você apenas muda a parte em Itálico:
<a class='mode' href='LINK'/>

Nenhum comentário:

Postar um comentário


- Antes de qualquer coisa, fale um pouco da postagem.
- Não desrespeite ninguém e nem o blog!
- Aceito criticas construtivas.
- NÃO aceito APENAS: Seguindo, segue de volta?