Boa tarde gente!
Nãos sei se é só comigo, mas esse caloooooooor e esse tédio estão me matando... ODEIO ficar sem nada para fazer, parece que o tempo não passa. Bom, agora eu passarei a postar mais, fazendo no mínimo 2 postagens por dia. Não vejo mal com isso, o que vai acontecer é que vocês terão mais tutoriais e utilitários. Passei um bom tempo pensando se isso seria ruim ou bom, e cheguei à conclusão que não há ponto negativo, vocês serão mais beneficiados. Antes, normalmente, eu postava de dia em dia, e mesmo assim esperava atingir um certo número de comentários, mas agora vou mudar isso, as postagens serão mais frequentes com no mínimo 2 por dia.
Enfim, trouxe para vocês o outro efeito do qual havia falado do post do Efeito Crossed. Ele é mais simplesinho, mas quando eu tentei "incrementar" e deixar ele mais bonitinho com mais coisas deu erro e as imagens sumiram kkk Não sei o que fiz, só sei que foi melhor deixar do jeito que estava. Assim, trouxe ele para vocês!
No seu HTML procure por ]]></b:skin> e acima dessa tag cole:
.rotate{
z-index: 1;
display: inline-block;
position: relative;
width: 110px; /* largura*/
height: 110px;/* altura */
text-align: center;
overflow: hidden;
border-radius:100px; /* borda redonda, se não quiser, apague isso*/
}
.rotate img {
z-index: 1;
width: 110px;/* largura*/
height: 110px;/* altura*/
border-radius: 100px;/ * borda redonda, se não quiser, apague isso*/
align: left;
}
.rotate .description{
z-index:3;
position: absolute;
border-radius: 100px; / * borda redonda da parte branca, se não quiser, apague isso*/
width: 1px;
height: 1px;
margin-top:-55px;/* metade da altura*/
margin-left: 55px;/* metade da largura*/
background: rgba(255,255,255,0.5); /* cor do fundo*/
color: #000; /*cor da letra*/
text-shadow: 1px 1px 1px #303857; /*sombra da letra*/
opacity: 0.0;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out
}
.rotate:hover .description {
-webkit-transform: rotate(360deg);
opacity: 1.0;
width: 106px; /* largura da parte branca*/
height: 106px;/* altura da parte branca*/
margin-top:-114px; /*altura mais 4 px*/
margin-left:1px;
border: 2px solid; /*tamanho da borda*/
border-color: #fff; /*cor da borda*/
}
Está tudo explicado entre /* e */. Depois adicione um gadget de HTML/Javascript e cole:
<div class="rotate"><img src="http://4.bp.blogspot.com/-a40EGb6ics4/UMTQBRGVeAI/AAAAAAAAEq0/nxfYJ35cB5U/s1600/zzzzzzzzzzzzz.png" /><div class="description"><br/>Algo aqui</div></div>
O que está em negrito é a URL da imagem, e o sublinhado é o que fica escrito.
Espero que tenham gostado =^.^= Beijos
Eu amo esse efeito,vou usar no meu layout 2013, eu tbm odeioo ficar sem nada pra fazer!!
ResponderExcluirJah estou participandoo --> http://a-penas-ana.blogspot.com.br/2012/11/campanha-de-natal-faca-uma-blogueiroa.html
Meu blog: rascunhosdecaneta.blogspot.com
adorei o blog estou seguindo segue o meu?
ResponderExcluirhttp://princesacomcoleteoficial.blogspot.com.br/
Bem legal! Gostei.
ResponderExcluirBjus!
coisasdemeninamodernabydani.blogspot.com.br
Que massa o efeito! Queria conseguir fazendo efeitos assim u-u.
ResponderExcluirExplosion Of HTML | Clique no perfil e visite :3
*fazer /burra
ExcluirQue lindo fica com esse efeitoo!
ResponderExcluirhttp://manguitarosa.blogspot.com.br/
beijooos
Lindo, o efeito fica lindo :3
ResponderExcluirAmor, tu tem tempo de postar em outro blog ? E que sabe, que to querendo te convidar pra postar la no Douce L'amour ...
Xoxo, Melissa :*
Super bacana vou usar qnd entrar alguém para equipe do blog!Seguindo...
ResponderExcluirhttp://cantinhodostutus.blogspot.com.br/
Muito lindo, ainda mas se for usar em autores (:
ResponderExcluir~~> Plush Clouds <~~ (novo layout, confira)