25 julho 2012

Efeito "Dance"

Baloes *o*
Hey cupcakes apimentados, desculpem pelo cookie de desaparecimento que eu comi, mas estava fazendo um layout para o Dancin' With Strawberries (visite clicando ali em cima) mas voltei com um efeito que pode ser usado tanto para afiliados quanto para equipe, no D'WS eu uso na equipe se quiser ver como fica mas o efeito é assim:

Mas porque dance? Porque com a velocidade do efeito e as bordas arredondas parecer que a imagem dança, mas também por causa do nome do blog onde o efeito foi criado (Dancin' With Strawberries)

Aplique acima de b:skin :

.equipe {

-webkit-border-radius: 70px; /* bordas arredondadas */
-webkit-border-top-left-radius: 0; /* borda arredondada em cima na esquerda */
border-radius: 60px; /* bordas arredondadas */
border-top-left-radius: 0;  /* borda arredondada em cima na esquerda */
border: 1px double #fff; /* borda colorida */
box-shadow: 1px 3px 15px 2px #ccc; /* sombra da imagem */
-webkit-transition-duration: 1.10s; /* duração da transição */

}
.equipe:hover {

border-top-left-radius: 70px; /* borda arredondada em cima na esquerda */
border-top-right-radius: 100px; /* borda arredondada em cima na direita */
border-bottom-left-radius: 0px; /* borda arredondada embaixo na esquerda */
border-bottom-right-radius: 0px; /* borda arredondada embaixo na direita */
-webkit-transition-duration: 1.10s; /* duração da transição */
}



Observações:

1. Alguns "bordas arredondadas" estão com o valor zero, mas se é zero então é mesmo que nada certo? NÃO!  Se tirar o canto não fica quadradinho

2. Pode mudar a velocidade da transição mas o efeito vai mudar, só avisando!

3. Eu usei avatares 100x100, e digo mais: fica melhor na equipe do que nos afiliados pois tem imagens menores ok?

Bom gente linda, é isso, olha foi sem querer que eu fiz esse efeito mas ficou muito fofo e novo! Se usar lembre-se de creditar ok?
Próximo post: Blockquote hover
Kiss&Kiss

10 comentários:

Bruninha ;* disse...

Ótimo tuto , o efeito fica lindo *-*

- Flor estou seguindo aqui , ficaria muito feliz vê-la em meu blog (:
~ Beijos~
http://blogthelifeofgirls.blogspot.com.br/

Millene Raquel disse...

muito perfeito!!!!
Amei tudo aqui!
Kissus,
http://semprecomvoce2012.blogspot.com.br/

Camila disse...

O resultado fica lindo!
Amei!


Beijos,
Mundorosaachock.blogspot.com

May disse...

oie o CV ta de cara nova e muitas novidades, da uma passadinha lá? por favor? beijus

cherryinmay.blogspot.com.br

Naiara disse...

Muito legal o efeito

Inovando-sz.blogspot.com

Anna {GQ} disse...

Super lindo o efeito. Ficou demais mesmo. Infelizmente não tenho equipe, mas estou pensando em montar uns afiliados com imagens, talvez eu use! Esse seu blog? Coisa mais linda. Estou seguindo com certeza :3 Visite o GQ, vai ser uma honra te ver lá.

Beijos,
Anna
http://garota-queen.blogspot.com/

Emilia ♫ disse...

Adorei, o efeito fica demais!
Estou seguindoo viu? Adorei aqui :3
Beijo,
Emi.
www.thecherrytomypie.blogspot.com

Jade Marlla disse...

Olá flor

Visitando pela primera vez o blog e amei,já seguindo;

E sobre o post muito legal o tuto,nunca tinha visto.

E sobre o meu cantinho,visita lá tem bastante novis e sorteios.
Corre lá.
Beijos
www.livrosegostos.blogspot.com

Julia fashion disse...

Bom então eu perguntei se vc consegueria explicar como explicar a criar degsiners para blogspot.É que a sua postagem ficou muito boa eu queria saber se vc conseguiria.
Desculpe por não ter explicado direito!

Isabela disse...

Ei flor, você não colocou o código para colocar no gadget da imagem ^.^
http://lazygirll.blogspot.com.br/