30 de dez de 2012

Efeito scale and shadow

Ooi gente!
Só queria avisar que amanhã eu não tenho certeza que posto. Só tenho certeza de que vou viajar a partir do dia 1º, então vou programar alguns posts, que já estão preparados.
Eu estava aqui fazendo o layout para o concurso, e desenvolvi um efeito muito legal, desenvolvi ele com o CssMaker, e gostei bastante do resultado. Basicamente ele aumenta, arredonda e tem uma sombra bem grande no hover, o que destaca a imagem em questão.

Acho que ele fica legal tanto em imagens de afiliados quanto em equipes, blogroll, mas as imagens têm de ser quadradas, para que não fique estranho. Se quiserem, façam algumas modificações, podem misturar alguns efeitos, se sintam livres.

Live preview aqui, no gadget "Efeito scale and shadow".

Cole o código abaixo antes de ]]></b:skin>

.team {
transition:All 0.4747s ease;
-webkit-transition:All 0.4747s ease;
-moz-transition:All 0.4747s ease;
-o-transition:All 0.4747s ease;
transform: rotate(0deg) scale(1) ;
-webkit-transform: rotate(0deg) scale(1) ;
-moz-transform: rotate(0deg) scale(1) ;
-o-transform: rotate(0deg) scale(1) ;
-ms-transform: rotate(0deg) scale(1) ;
}
.team:hover{
transform: rotate(0deg) scale(1.174) ;
-webkit-transform: rotate(0deg) scale(1.174) ;
-moz-transform: rotate(0deg) scale(1.174) ;
-o-transform: rotate(0deg) scale(1.174) ;
-ms-transform: rotate(0deg) scale(1.174) ;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
-moz-box-shadow: -1px -1px 75px #000000;
-webkit-box-shadow: -1px -1px 75px #000000;
box-shadow: -1px -1px 75px #000000;
}

Para usar o efeito, cole num gadget de HTML/JavaScript:

<a href="SEULINK" title="NOME"><img src="LINK DA IMAGEM" class="team" /></a>

Espero que tenham gostado, se usarem creditem, e não repassem, por favor.

Beijos, até mais!
Feliz ano novo!

8 comentários:

  1. Ele é lindo, se tirar um pouco a sombra fica melhor, eu acho ^^

    ~~> Plush Clouds <~~

    ResponderExcluir
  2. O efeito eh lindo depois vou usar no meu novo layout,boas festas e um feliz ano novo!!
    MMME

    ResponderExcluir
  3. O efeito é lindo *-*
    Cat Girl

    ResponderExcluir
  4. Oi fofa,feliz ano novo!Tem tag e selinho para você lá no meu blog -->http://blog-dicasforyou.blogspot.com.br/2012/12/o-blog-ganhou-uma-tag-e-um-selinho.html#more

    Beijos e um ótimo 2013!!!

    ResponderExcluir
  5. Recado informal da Bibina:
    Oyy' amoree, só estou passando aqui para te desejar um feliiz ano novo!! Que 2013 seja um ano de conquistas e prosperidade >.< E que vc realize todos os seus sonhos e metas para esse ano ^-^
    Bjoos Nhaaaack --> My Candy Space (acesse pelo meu perfil)

    ResponderExcluir
  6. esse efeito é lindo! Renova

    Seria pedir muito pra voltar no blog? @esteffanifontes - tt
    Aos Dezesseis Anos - aosdezesseisanos.blogspot.com.br
    Obg pela visita, volte sempre! Beijos, e Feliz Ano Novo.

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.