O efeito é assim:
As instruções estão no código, mas qualquer coisa, é só perguntar, ok?
Dêem um look:
.post img {
-webkit-border-radius: 25px; /* bordas arredondadadas */
-moz-border-radius: 25px;/* bordas arredondadadas */
border-radius: 25px; /* bordas arredondadadas */
opacity: 0.8; /* Opacidade */
-webkit-transition-duration: 1.20s; /* duração da transição */
}
.post img:hover {
opacity: 1.0; /* Opacidade */
-webkit-border-radius: 25px; /* bordas arredondadadas */
-webkit-border-top-left-radius: 0; /* borda da ponta de cima esquerda quadrada */
-moz-border-radius: 25px; /* bordas arredondadadas */
-moz-border-radius-topleft: 0; /* borda da ponta de cima esquerda quadrada */
border-radius: 25px; /* bordas arredondadadas */
border-top-left-radius: 0; /* borda da ponta de cima esquerda quadrada */
-webkit-transition-duration: 1.20s; /* duração da transição */
}
Queridos ,esqueci de falar mas coloque o código acima de b:skin e só se aplica as imagens do post, se quiser que funcione na sidebar também substitua "post" no código por "main"
Os efeitos são opacidade e a ponta de cima esquerda fica quadrada como na imagem. Porque três bordas arredondadas?? Bom existem tres tipo de arredondamendo de bordas: o CSS3, WebKit e Gecko, para funcionar nos três navegadores mais usados: Google Chrome, Mozilla Firefox e Internet Explorer, isso é difícil, eu sei, se achar muito grande o código, pode apagar todas as bordas arredondadas que não possuem a palavra "webkit" para funcionar a transição, quer mudar o efeito e não sabe como? Comenta. Gostou? Comenta. Usou? Comenta -e credita-. Gosta do blog? Comenta rsrs Obrigadaa
Beijos
15 comentários:
O efeito é bem bacana! Gostei bastante!
Abç
http://adraftbox.blogspot.com.br/
Adorei o efeito. Poderia mudar o nosso nome na sua elite? Mudamos de Domo Kun Lovers para Just Tonight!
Kissus ;3
Just Tonight
Muito útil, o efeito é bem legal! Vou experimentar o mais rápido possível.
http://sigaoseusonho.blogspot.com.br/
Adorei o tutorial, o efeito fica lindo.
http://i-teenbr.net.tc
Que lindo o efeito *o*
Flor, mandei o cabeçalho pro seu email, desculpa a demora! Beijos :)
Eu adorei o tutorial, geralmente só se encontra tutoriais assim pra fazer efeito opacity. Eu amei seu blog, você que faz o layout?
Se der, dá uma passadinha lá?!!
http://patricinhasdorock2.blogspot.com
Beijos ♥
Nossa, você tem um Dom pra fazar layouts ^^ Sim, o meu fui eu quem fiz, mais o cabeçalho eu ganhei no blog Lola Delight.
Beijoos gata.
http://patricinhasdorock2.blogspot.com
Acho esse efeito lindo,dá um destaque a mais no blog ^^
Go Belezando
gostei do efeito,mas não sou muito chegada a usar (:
Uma Garota Única
Adorei o efeito =3
www.plush-bomb.blogspot.com.br
Você ganhou um selo.
http://themyteenagedream.blogspot.com.br/2012/05/novo-selinho-do-blog.html
Beijos
Bacana o efeito *-*
Beijos, Gabriela 4-Brownies
Super legal, mas aonde coloca esse link??
link ñ :s Código*
Gostei demaiis! Vou usar! ;)
Postar um comentário