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!
Muito legal esses efeito se reblogar pode deixar que eu coloco creditos bjos de luz
ResponderExcluirprincessofjeans.blogspot.com
São legais mesmo!! haha' ;)
ExcluirOk, coloque os créditos mesmo!!
Beijoos
Vou usar no layout que eu estou fazendo, muito bom
ResponderExcluirSelena-adocicada.blogspot.com
Vota em mim galeraaa
Beijioss
Com esses efeitos, seu lay vai ficar lindoo! ^^
ExcluirKissus *_*
Eu já tinha visto esse tuto >< ele é bastante legal! estou pretendendo usar no proximo lay que já estou fazendo ><
ResponderExcluirhttp://forever-teens-89.blogspot.com.br/
Ele é legal mesmo!! hehe'
ExcluirQue legal, aproveite ele mesmo para fazer seu lay.. c:
Beijoos
Super Legal!!! Meio complicado de fazer, mais beim legal...
ResponderExcluirAMEI seu blog, não pude deixar de seguir, então, dáh uma passadinha no meu por favor amore??
Bjus! (◕‿◕✿)
http://euusomaquiagem.blogspot.com
Legal mesmo!! hahaha' não acho que é tãão complicado, mas aos poucos você consegue! ;)
ExcluirObrigada por seguir, flor! Dou uma passadinha siim! ^^
Kissus