13 maio 2012

Efeito nas imagens do post


Oii gente, esse post vai ensiná-los a personalizar as imagens do post, é rápido e fácil :)

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:

Unknown disse...

O efeito é bem bacana! Gostei bastante!
Abç

http://adraftbox.blogspot.com.br/

~ Yurii Lee =^.^= disse...

Adorei o efeito. Poderia mudar o nosso nome na sua elite? Mudamos de Domo Kun Lovers para Just Tonight!

Kissus ;3
Just Tonight

Anônimo disse...

Muito útil, o efeito é bem legal! Vou experimentar o mais rápido possível.
http://sigaoseusonho.blogspot.com.br/

Gislaine Dias | Blog disse...

Adorei o tutorial, o efeito fica lindo.
http://i-teenbr.net.tc

Anny S. disse...

Que lindo o efeito *o*

Flor, mandei o cabeçalho pro seu email, desculpa a demora! Beijos :)

Unknown disse...

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 ♥

Unknown disse...

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

Ana Paula Fuentes disse...

Acho esse efeito lindo,dá um destaque a mais no blog ^^

Go Belezando

@cl_alvs disse...

gostei do efeito,mas não sou muito chegada a usar (:
Uma Garota Única

amy disse...

Adorei o efeito =3
www.plush-bomb.blogspot.com.br

Mabel Aguiar disse...

Você ganhou um selo.

http://themyteenagedream.blogspot.com.br/2012/05/novo-selinho-do-blog.html
Beijos

Anônimo disse...

Bacana o efeito *-*

Beijos, Gabriela 4-Brownies

Anônimo disse...

Super legal, mas aonde coloca esse link??

Anônimo disse...

link ñ :s Código*

Taynan Matheus disse...

Gostei demaiis! Vou usar! ;)