23/11/2012

[Tutorial Blogger] Efeito na imagem igual ao do blog





As provas acabaram hoje. AWWWWW YEAH!
Sério, me desculpem por postar mas é que final do ano é essa budega e esse desespero mesmo pra mim, me desculpem!
Bem, eu pretendo postar hoje todos os pedidos da Ask e atualizar mais um pouquinho o novo layout, que eu já mudei umas 3 vezes no blog de teste, hah.
Eu vou começando pelos pedidos mais fáceis de ensinar mesmo, então aí vai nem vai precisar de "Continue Lendo"!

Está vendo que quando você passa o mouse nas nossas imagens elas ficam com opacidade e as bordas arredondadas? Pois é, é isso que eu vou ensinar!
Abra o seu blog e vá em Modelo> Editar HTML. Aperte Ctrl+F e procure por ]]></b:skin> . Em cima desse código, você coloca esse aqui:


.main img {
filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
-webkit-transition-duration: .70s;
}

.main img:hover {
filter:alpha(opacity=55);
 -moz-opacity:0.55;
 opacity:0.55;
-moz-border-radius: 25px;
-webkit-boder-radius: 25px;
border-radius: 25px;
-webkit-transition-duration: .70s;
cursor: crosshair;
}

Ee pronto!  Fácil, não? Eu peguei esse código baseando em outros códigos, mas acho que o Kawaii World fez algo parecido também, então é só procurar lá se não conseguirem entender comigo explicando.

Ah, sim, a Lu falando, agora que notei que tava na conta do Tutoriais mesmo mas... Ahhhh, vocês entendem minha linguagem de presidiária, né? :3

3 comentários :

Leia a nossa página de Regras antes de comentar, por favor :3