1 de fev de 2013

2 efeitos: Efeito Raise + Efeito Streak

Olá caramelos com baunilha!! 

Hoje trouxe dois efeitos bem legais chamado Efeito Raise. Na verdade, ele se chama apenas Efeito para Autores, como achei sem graça shaushauhsua' decidi colocá-lo como Efeito Raise. Pois raise em português significa levantar e o efeito é mais ou menos isso! hahaha' e também outro efeito chamado Streak. Os dois são para colocar em moderadores. Créditos ao blog Jackie Dream e ao tumblr Html strew. Vamos aprender? (:



Efeito Raise

Preview aqui


Primeiro você deve criar duas imagens. Uma quando é normal e a outra quando passa o mouse,
como no exemplo abaixo:

             

Depois de ter feito isso, vá no seu HTML e procure por  ]]></b:skin>. Achou? Então cole esse código acima da tag procurada:

.slide-up-boxes {width: 133px; display: inline-block; margin-left: 6px;}
.slide-up-boxes a {
display: block;
margin: 0 0 0px 0;
background: #fff;
height: 98px;
margin-bottom: 5px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 5px 2px -2px rgba(0,0,0,0.11);}
.slide-up-boxes h5 {
color: #937560;
text-align: center;
height: 109px;
text-shadow: 1px 1px 0px #eee;
letter-spacing: 5px;
text-transform: uppercase;
font: normal 11px/104px Arial;
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.slide-up-boxes a:hover h5 {
margin-top: -114px;
opacity: 0;}
.slide-up-boxes div
{position: relative;
color: #fff;
height: 114px;
padding: 5px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
text-decoration: none;}
.slide-up-boxes a:hover div {opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);} 

Visualize se estiver tudo certo e depois salve!

Quando quiser usar este efeito, adicione um gadget HTML/JavaSript e nele cole:

 <div class="slide-up-boxes">
<a href="URL DO SITE">
<h5>
<img src="URL DA 1° IMAGEM" />
</h5>
<div>
<img src="URL DA 2° IMAGEM" />
</div></a></div>

Edite o que está destacado em rosa e salve!

Fácil, fácil, não é?!

Efeito Streak

Preview aqui

Primeiramente, vá no seu css ( pra quem não sabe onde ele está, vá em design >> modelo >> personalizar >> avançado >> Adicionar CSS ) e nele cole:

.imagem {width:ALTURApx; height:LARGURApx; overflow:hidden; border:5px solid #CORDABORDA; -webkit-transition-duration:0.7s; margin-top:3px}
.lala {width:ALTURApx; height:LARGURApx; -webkit-transition-duration:0.7s; position:absolute; overflow:hidden}
.imagem:hover .texto {margin-top:50%; -webkit-transition-duration:0.7s; opacity:0.8}
.texto {background-color:#fff; color:#3d3d3d; font-size:9px; text-align:center; width:LARGURA-DA-FAIXApx; margin-top:0px; padding:5px; -webkit-transition-duration:0.7s; opacity:0}


Importante: onde está em rosa, a largura deverá ser 10px menor que a largura da foto.


Cole o código abaixo aonde queira usar:


<div class="imagem">
<img class="lala" src="http://24.media.tumblr.com/tumblr_mbrfx4tW8g1r5mm7po4_250.png">
<div class="texto">texto aqui</div>
</div> 


Pronto!! Agora é só substituir as partes em rosa.


Espero que tenham gostado! hehehe'

Bye!

8 comentários:

  1. Muito legal esses efeito se reblogar pode deixar que eu coloco creditos bjos de luz

    princessofjeans.blogspot.com

    ResponderExcluir
    Respostas
    1. São legais mesmo!! haha' ;)
      Ok, coloque os créditos mesmo!!

      Beijoos

      Excluir
  2. Vou usar no layout que eu estou fazendo, muito bom
    Selena-adocicada.blogspot.com
    Vota em mim galeraaa
    Beijioss

    ResponderExcluir
    Respostas
    1. Com esses efeitos, seu lay vai ficar lindoo! ^^

      Kissus *_*

      Excluir
  3. Eu já tinha visto esse tuto >< ele é bastante legal! estou pretendendo usar no proximo lay que já estou fazendo ><


    http://forever-teens-89.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ele é legal mesmo!! hehe'
      Que legal, aproveite ele mesmo para fazer seu lay.. c:

      Beijoos

      Excluir
  4. Super Legal!!! Meio complicado de fazer, mais beim legal...

    AMEI seu blog, não pude deixar de seguir, então, dáh uma passadinha no meu por favor amore??
    Bjus! (◕‿◕✿)

    http://euusomaquiagem.blogspot.com

    ResponderExcluir
    Respostas
    1. Legal mesmo!! hahaha' não acho que é tãão complicado, mas aos poucos você consegue! ;)

      Obrigada por seguir, flor! Dou uma passadinha siim! ^^

      Kissus

      Excluir

Heey!! Se quiserem deixar o seu comentário, leia PLEASE aqui embaixo:

*Não xingue ninguém aqui! Seja educada(o)!
* Dúvidas, elogios e críticas são sempre bem-vindas!
* Leia toda a postagem, pois sempre faço com muito esforço e carinho pra vocês!
*Vou até o perfil de vocês para visitar e talvez até seguir o seu blog!

Obrigada por comentar!

Volte Sempre!