Efeito moderas.
Preview (x)
Esse efeito é muito fofo *-* e pode ser usado tanto nas imagens das moderadoras(os) quanto nos parceiros.
Para utilizar deste efeito, ponha em seu css:
/***** EFEITO MODERAS POR: I-LOVETHINGS, LOVERS-OF-DESIGNS E SPAZIOHTML ******/
.imagem:hover{opacity:1.0;-webkit-transition-duration: .45s;}
.efeito img{width: 116px; -webkit-transition-duration: .45s;}
.efeito:hover img {-webkit-transition-duration: .45s; -webkit-transform: rotate(360deg); opacity: 0.20;}
.efeito img:hover {-webkit-transition-duration: .45s; opacity: 1.0;}
Ponha este código aonde for usar o efeito:
<div class="efeito"> <a href="TUBMBLR-DA-MOD-OU-PARCEIRO"><img src="LINK-DA-IMAGEM" class="imagem"></a> <a href="TUBMBLR-DA-MOD-OU-PARCEIRO"><img src="LINK-DA-IMAGEM" class="imagem"></a> <a href="TUBMBLR-DA-MOD-OU-PARCEIRO"><img src="LINK-DA-IMAGEM" class="imagem"></a> </div>
Se usar credite! Thaysa.
O efeito Lava Up é um efeito que criei onde eu faço as imagens subirem, no meu exemplo elas sobem mas tem como ela ir para o lado, ir pra cima, pra baixo e etc.. Com o tempo eu vou fazendo outros jeitos e postando aqui pra vocês. Bora ao tutorial?
1- Cole isso no CSS:
Preview: (x)
.position {margin-top:29px; margin-left:80px;}
.borderlovers {display: inline-block; width:160px; height:160px;overflow: hidden;border:5px solid #fff;}
.borderlovers img{padding-top:0px;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s;}
.borderlovers:hover img{margin-top:-160px;}
Explicação: Estão vendo o .position? Ele ira posicionar seu efeito, ele que comanda se o efeito vai mais pra cima ou mais para o lado.2- Agora vamos ao HTML. Cole esse código abaixo de <body> ou da pagina que centraliza o seu theme:
2- O .borderlovers é onde define a cor da caixinha e os tamanho dos icons, meus icons são de 160x160 então elas já estão no tamanho certo, se a sua for menor ou maior vc tem que mudar ali.
3- O borderlovers img e o borderlovers:hover img são o que vai fazer o efeito subir. NO .borderlovers:hover img vocÊs estão vendo o tamanho do meu icon? Então, você terá que colocar o mesmo tamanho dele ali, assim a imagem irá subir, por isso é importante o tamanho da imagem.
4- Pra você ter esse efeito você precisa de uma imagem com 2 icons, uma irá ficar embaixo do outro, repare no meu exemplo: AQUI, viram? São dois icons grudadinhos, é só abrir um documento com a largura de um icon e a altura de 2 icons :}
<div class="position"> <div class="borderlovers"> <a href="LINK"><img src="http://media.tumblr.com/a4bdbb0de3c473f33f646a016a2f14a3/tumblr_inline_mlhbbi4Crd1qz4rgp.png"></a></div> <div class="borderlovers"> <a href="LINK"><img src="http://media.tumblr.com/d4a20ff3955149ea401648a60a0eb001/tumblr_inline_mlhbsf9uNi1qz4rgp.png"></a></div> <div class="borderlovers"> <a href="LINK"><img src="http://media.tumblr.com/93ec8e3d1f2da2f5b9194685f07ea58b/tumblr_inline_mlhbskvQKu1qz4rgp.png"></a></div> <div class="borderlovers"> <a href="LINK"><img src="http://media.tumblr.com/e1655a67880df4f8c955bdc6eb95c25a/tumblr_inline_mlhbu1nIFb1qz4rgp.png"></a></div> </div>
Explicação 2: Troque as URL das imagens se desejarem, e também onde esta “LINK” você coloca a URL do site que deseja como link.Pronto *-*
Se usar de like (♥) e credite.
![Oi oi pra quem esta ai do outro lado da telinha. Olha, hoje vou ensinar pra vocês o efeito Up Full - PREVIEW: (xxx). Esse efeito é um efeito muito fofinho que com a ajuda de um site estrangeiro eu consegui faze-lo. Bom, ele é simples mas requer um pouco de atenção, portanto, cuidado. Vamos ao tutorial? Se usar de like (♥) e credite.
[[MORE]]
1- Cole esse código no CSS:
.imagenslod {position: relative;overflow: hidden;width: 150px;height: 150px;display: inline-block;margin:5px;margin-bottom: 15px;box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);}
.imagenslod span {height: 150px;width: 150px;bottom: 0px;}
span.title {width: 150px;height: 20px;position: absolute;background: rgba(255,255,255,0.3);text-align: center;padding: -10px 0 4px;font-size: 14px;color: #fff;font-family: "BEBAS";-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}
span.title a {color:#fff;}
span.title a:hover {color:#ff578e;}
span.title:hover {width: 150px;height: 20px;position: absolute;background: rgba(255,255,255,0.5);text-align: center;padding: 160px 0 4px;font-size: 14px;color: #5f5f5f; font-family: "BEBAS";-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;-webkit-transform: rotate(360deg) ;}
Explicação: O .imagenslod é o que vai definir o tamanho da caixinha da foto, tem que ser do tamanho exato da foto, vai definir também o espaço que tem entre uma foto e outra e etc…
O .imagenslod é a parte branquinha onde fica o título, se vc alterar o tamanho da imagem vc terá que alterar o valor de width e height lá tbm.
span.title ai vai definir o espaço branquinho onde fica o título, ai vc pode mudar de cor e etc…
span.title a e o span.title a:hover é a cor do link.
span.title:hover é a parte que faz a parte branca do título subir ;]
2- Agora, você deve colar esse código onde deseja que suas fotinhas apareçam. (Se for na sidebar você vai colar na caixa da sidebar, se for no header ai você vai fazer uma div para colocar ele no header).
<div class="imagenslod">
<img src="http://media.tumblr.com/0d24f068362f65600f99b702beda98d3/tumblr_inline_mvsj3uZvde1rwneo8.png" width="150px" height="150px" />
<span class="title"><a href="LINK_AQUI">Lovers Of Designs</a></div>
<div class="imagenslod">
<a href="LINK_AQUI"><img src="http://media.tumblr.com/2671d4a3fff2250bafdf8978468b8bfa/tumblr_inline_mvsiulROVu1rwneo8.png" width="150px" height="150px" /></a>
<span class="title"><a href="LINK_AQUI">Lovers Of Designs</a></div>
<div class="imagenslod">
<a href="LINK_AQUI"><img src="http://media.tumblr.com/29dea011dc7842601d93d9e889ff8a76/tumblr_inline_mvc43gIrtE1rwneo8.png" width="150px" height="150px" /></a>
<span class="title"><a href="LINK_AQUI">Lovers Of Designs</a></div>
<div class="imagenslod">
<a href="LINK_AQUI"><img src="http://media.tumblr.com/2be9661eb5ccc8fd34c21b714208ce55/tumblr_inline_muzf2uOZ9O1rwneo8.png" width="150px" height="150px" /></a>
<span class="title"><a href="LINK_AQUI">Lovers Of Designs</a></div>
Prontinho, agora é só alterar a url das imagens, os links e colocar os nomes que deseja. Super fácil e legal né? Espero que gostem e se usar creditem por favor, obrigada.](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_ujJgHWmazEwADJ_eDInQ2P3IZPyZRaJENwLwQqVlzjmrvbc6bHgTyEAe8zN35QAaNKVbwS6Wg-SvwTyzP-NFV1YjIZGkSdzRbPlAMCPCDRJJNo98pjQQJXDOZwTtO0L9I7SrFxwpwzoTv9jTg_I_DH6IhDZeucuIUeqTgvjm1-KQ=s0-d)
Oi oi pra quem esta ai do outro lado da telinha. Olha, hoje vou ensinar pra vocês o efeito Up Full - PREVIEW: (xxx). Esse efeito é um efeito muito fofinho que com a ajuda de um site estrangeiro eu consegui faze-lo. Bom, ele é simples mas requer um pouco de atenção, portanto, cuidado. Vamos ao tutorial? Se usar de like (♥) e credite.
1- Cole esse código no CSS:
.imagenslod {position: relative;overflow: hidden;width: 150px;height: 150px;display: inline-block;margin:5px;margin-bottom: 15px;box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1);}
.imagenslod span {height: 150px;width: 150px;bottom: 0px;}
span.title {width: 150px;height: 20px;position: absolute;background: rgba(255,255,255,0.3);text-align: center;padding: -10px 0 4px;font-size: 14px;color: #fff;font-family: "BEBAS";-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}
span.title a {color:#fff;}
span.title a:hover {color:#ff578e;}
span.title:hover {width: 150px;height: 20px;position: absolute;background: rgba(255,255,255,0.5);text-align: center;padding: 160px 0 4px;font-size: 14px;color: #5f5f5f; font-family: "BEBAS";-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;-webkit-transform: rotate(360deg) ;}
Explicação: O .imagenslod é o que vai definir o tamanho da caixinha da foto, tem que ser do tamanho exato da foto, vai definir também o espaço que tem entre uma foto e outra e etc…
O .imagenslod é a parte branquinha onde fica o título, se vc alterar o tamanho da imagem vc terá que alterar o valor de width e height lá tbm.
span.title ai vai definir o espaço branquinho onde fica o título, ai vc pode mudar de cor e etc…
span.title a e o span.title a:hover é a cor do link.
span.title:hover é a parte que faz a parte branca do título subir ;]
2- Agora, você deve colar esse código onde deseja que suas fotinhas apareçam. (Se for na sidebar você vai colar na caixa da sidebar, se for no header ai você vai fazer uma div para colocar ele no header).
<div class="imagenslod"> <img src="http://media.tumblr.com/0d24f068362f65600f99b702beda98d3/tumblr_inline_mvsj3uZvde1rwneo8.png" width="150px" height="150px" /> <span class="title"><a href="LINK_AQUI">Lovers Of Designs</a></div> <div class="imagenslod"> <a href="LINK_AQUI"><img src="http://media.tumblr.com/2671d4a3fff2250bafdf8978468b8bfa/tumblr_inline_mvsiulROVu1rwneo8.png" width="150px" height="150px" /></a> <span class="title"><a href="LINK_AQUI">Lovers Of Designs</a></div> <div class="imagenslod"> <a href="LINK_AQUI"><img src="http://media.tumblr.com/29dea011dc7842601d93d9e889ff8a76/tumblr_inline_mvc43gIrtE1rwneo8.png" width="150px" height="150px" /></a> <span class="title"><a href="LINK_AQUI">Lovers Of Designs</a></div> <div class="imagenslod"> <a href="LINK_AQUI"><img src="http://media.tumblr.com/2be9661eb5ccc8fd34c21b714208ce55/tumblr_inline_muzf2uOZ9O1rwneo8.png" width="150px" height="150px" /></a> <span class="title"><a href="LINK_AQUI">Lovers Of Designs</a></div>
Prontinho, agora é só alterar a url das imagens, os links e colocar os nomes que deseja. Super fácil e legal né? Espero que gostem e se usar creditem por favor, obrigada.
http://lovers-of-designs.tumblr.com/post/66365720375/oi-oi-pra-quem-esta-ai-do-outro-lado-da-telinha
Efeito Slide Up
Esse é um efeito bem fácil e pratico de se fazer, alem de ser fácil é super legal. É bom para se usar em moderadores e parcerias.. Use como quiser.
Preview: (xxx)
Preview: (xxx)
1- Cole esse código no CSS:
.position {margin-top:10px; margin-left:50px;width:1000px;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s;}
.image {position: relative;overflow: hidden;width: 150px;height: 150px;display: inline-block;margin-right: 15px;margin-bottom: 15px;box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.1);border:5px solid #fff;}
img {position: absolute;left: 0;top: 0;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}
span.title {width: 150px;height: 24px;position: absolute;background: rgba(255,255,255,1.0);text-align: center;padding: 5px 0 0px;font-size: 14px;color: #999;font-family: 'Play', sans-serif;;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}
/* SLIDE UP */
div.image.slideUp span { bottom: -29px;}
div.image.slideUp:hover img {top: -29px;}
div.image.slideUp:hover span {bottom: 0px;}
nome {background: rgba(232,142,215,0.3); padding:0px; border-radius:2px;color#fff;}
2- Agora cole esse código abaixo de <body> ou do código que centraliza o seu theme:<div class="position"> <div class="image slideUp"> <img src="http://media.tumblr.com/02ce4c81f5782a411d4886f63fb8c860/tumblr_inline_mqnpzm22MP1qz4rgp.png" width="150px" height="150px" /><span class="title"><a href="LINK DA MODERA"><nome>Jessica</nome></a></span></div> <div class="image slideUp"> <img src="http://media.tumblr.com/10324e8a1b1a3b1e43ad68552f826ea8/tumblr_inline_mq5uqh2lhb1qz4rgp.png" width="150px" height="150px" /><span class="title"><a href="LINK DA MODERA"><nome>Thaysa</a></nome></span></div> <div class="image slideUp"> <img src="http://media.tumblr.com/df1d6425da737c2a4b27b3c811990c10/tumblr_inline_mq5ui7e4wO1qz4rgp.png" width="150px" height="150px" /><span class="title"><a href="LINK DA MODERA"><nome>Gio</a></nome></span></div> </div>
É isso, espero que gostem. Se quiserem colocar mais fotos fiquem a vontade, o código não é tão difícil para se mexer. Se caso vocês quiserem colocar o efeito dentro de uma caixa, eu recomendo que vocês tirem o .position pois esse código é só para quem quer colocar ele no header/banner e etc… Espero que gostem.Se usar de like (♥) e credite. Esse tutorial foi retirado de um site gringo (x) e explicado do meu jeito, então, credite ao Lovers e ao cssdeck.
0 comentário "Efeitos de CSS"
Postar um comentário