Efeito nas mensagens de categorias

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Efeito nas mensagens de categorias

Mensagem por pyrohinotama em 24/05/13, 06:52 pm

Qual é minha questão:
Ola, observem as categorias deste fórum: http://fairytail-xtreme.ativoforum.com/forum
percebam que ao passar o mouse por cima das imagens das categorias eles giram e aparece outra.gostaria do código utilizado para este efeito( se possivel em html, para eu poder usar em postagens normais por meu fórum.)

Endereço do meu fórum:
http://rpgadventure.umforum.net

Versão do fórum:
PHPBB2
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por BrunoH. em 24/05/13, 07:09 pm

Olá,

Código HTML:
Código:
<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


   <img src="http://i48.servimg.com/u/f48/16/88/27/59/regras10.png">



   <div>
   
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/jkcasc10.png" style="margin-top:-8px; margin-left:-8px" align="center">
   </div>


</div>
</div>

CSS:
Código:
div.flip {-webkit-perspective: 600px;height: 72px;position: relative;width: 450px;}
div.flip:hover > div.rotate.x {-webkit-transform: rotateX(180deg);}
div.flip div.rotate {-webkit-transform-style: preserve-3d;height: 100%;transition: all 0.3s ease-in-out 0.3s;-webkit-transition-property: all;-webkit-transition-duration: 0.3s;-webkit-transition-timing-function: ease-in-out;-webkit-transition-delay: 0.3s;width: 100%;}
div.flip div.rotate > * {-webkit-backface-visibility: hidden;height: 100%;position: absolute;width: 100%;}
div.rotate.x :nth-child(2) {-webkit-transform: rotateX(180deg);}
div.flip div.rotate > div {background: rgb(238, 238, 238);box-sizing: border-box;padding: 8px;}
O Efeito funcionará nos tópicos, basta instalar o HTML no tópico e o CSS na sua Folha de Estilo CSS.

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama em 24/05/13, 07:12 pm

ola ate que funcionou, mas de forma errada-
aparece as duas imagens ao mesmo tempo(uma em cima e a outra em baixo)e ao passar o mouse em cima acontece o efeito mas não aparece mais nada.
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por BrunoH. em 24/05/13, 10:31 pm

Olá,
Poderia nos informar o tópico que utilizou o tal código? Para que eu possa verificar qual seria o problema.

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por Gaaratsu em 25/05/13, 01:42 am

Saudações senhor!

Aceda à sua "Folha de estilo CSS":
Painel de Controle :seta2: Visualização :seta2: Imagens e Cores :seta2: Cores :seta2: Aba 'Folha de estilo CSS'


Substitua o código do BrunoH. por este:
Código:
div.flip{-moz-perspective:600px;-o-perspective:600px;-webkit-perspective:600px;height:72px;perspective:600px;position:relative;width:450px}div.flip div.rotate{-moz-transform-style:preserve-3d;-moz-transition:all .3s ease-in-out .3s;-o-transform-style:preserve-3d;-o-transition:all .3s ease-in-out .3s;-webkit-transform-style:preserve-3d;-webkit-transition:all .3s ease-in-out .3s;height:100%;transform-style:preserve-3d;transition:all .3s ease-in-out .3s;width:100%}div.flip div.rotate > *{-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;position:absolute;width:100%}div.flip div.rotate > div{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:#eee;box-sizing:border-box;padding:8px}div.rotate.x :nth-child(2){-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}div.flip:hover > div.rotate.x{-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}div.rotate.y :nth-child(2){-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}div.flip:hover > div.rotate.y{-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}

Valide!

No tópico, na descrição da categoria, fórum ou sub-fórum use este código HTML:
Código:
<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


   <img src="http://i48.servimg.com/u/f48/16/88/27/59/regras10.png">



   <div>
   
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/jkcasc10.png" style="margin-top:-8px; margin-left:-8px" align="center">
   </div>


</div>
</div>

Aceda à suas "Categorias e Fóruns":
Painel de Controle :seta2: Geral :seta2: Fórum :seta2: Categorias e Fóruns :seta2: Clique no botão Editar da categoria, fórum ou sub-fórum desejado para adicionar o efeito e coloque o código HTML acima.


Lembre-se de ativar o HTML por completo.

1 - Activar o HTML no Painel de Controle:
Painel de Controle ->> Geral ->> Fórum ->> Mensagns, MP e Email
Agora terá de activar a opção: "Permitir HTML".

2 - Activar o HTML no perfil de usuário: (não é no Painel de Controle)
Perfil ->> Preferências
Activar a opção "Sempre permitir HTML".

3 - Activar o HTML nos tópicos e mensagens: (não é no Painel de Controle)
Tópico ou Mensagem ->> Opções ->>
Não marcar a opção "Desativar códigos HTML nesta mensagem".

Atenciosamente! Piscada
avatar

Gaaratsu
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 07/08/2010
Mensagens : 6005
Pontos Ativos : 7504

Ver perfil do usuário http://narutongo.forumeiros.com/

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama em 25/05/13, 06:55 am

ainda apresenta o mesmo erro:

http://rpgadventure.umforum.net/t9-como-fazer-pedidos#65

desçam um pouco, esta na resposta ao tópico
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por Shek em 30/05/13, 03:38 pm

Olá!

Em Painel de Controle > Geral > Fórum > Categorias e Fóruns > Selecione o subfórum Editar > e em sua descrição, adicione:
<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x"> <img src="URL_DA_PRIMEIRA_IMAGEM">
<div>

<img src="URL_DA_SEGUNDA_IMAGEM" style="margin-top:-8px; margin-left:-8px" align="center" />
</div>


</div>
</div><div class="flip" style="width: 20px; height: 10px; display: inline-block;"><div class="rotate y">

</div>
</div>
Adicione em seguida, o CSS indicado por Dr.House em Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilos CSS >.

Até mais!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17160
Pontos Ativos : 21418

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama em 30/05/13, 08:36 pm

ainda apresenta erro, parecido com o anterior, mas desta vez uma imagem tem metade sua coberta pela outra
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por StyLe® em 01/06/13, 09:06 pm

Olá,

Código HTML
Código:
<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


   <img src="http://i48.servimg.com/u/f48/16/88/27/59/10310.png">



   <div>
   
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/310.png" style="margin-top:-8px; margin-left:-8px" align="center">
   </div>


</div>
</div>

Código CSS
Código:
div.flip {
-moz-perspective:600px;
-o-perspective:600px;
-webkit-perspective:600px;
height:72px;
perspective:600px;
position:relative;
width:450px;
}
div.flip div.rotate {
-moz-transform-style:preserve-3d;
-moz-transition:all .3s ease-in-out .3s;
-o-transform-style:preserve-3d;
-o-transition:all .3s ease-in-out .3s;
-webkit-transform-style:preserve-3d;
-webkit-transition:all .3s ease-in-out .3s;
height:100%;
transform-style:preserve-3d;
transition:all .3s ease-in-out .3s;
width:100%;
}
div.flip div.rotate > * {
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
height:100%;
position:absolute;
width:100%;
}
div.flip div.rotate > div {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background:#eee;
box-sizing:border-box;
padding:8px;
}
div.rotate.x :nth-child(2) {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg)
}
div.flip:hover > div.rotate.x {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
div.rotate.y :nth-child(2) {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
div.flip:hover > div.rotate.y {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}

Resulta?


Até mais...

StyLe®
Membro do Fórum

Masculino
Inscrito dia : 28/04/2012
Mensagens : 1919
Pontos Ativos : 2653

Ver perfil do usuário http://ajuda.forumeiros.com/t79652-

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama em 01/06/13, 10:34 pm

ola, ainda com o mesmo erro, aparace as duas imagens, uma em cima e outra em baixo, eu gostaria que a primeira imagem foce a que estivesse normal, e quando bota o mouse em cima da primeira "roda" e aparece a segunda, vocês estão tentando fazer isto? porque foi o que eu pedi desde o começo( percebi que no html não tem nenhum comando "hover" ou algo do tipo, para especificar a imagem que ira surgir depois de colocar o mouse ._. )
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por MateusA em 01/06/13, 10:48 pm

Olá!

Aceda a categoria que deseja fazer o efeito.
Painel Seta Geral Seta Fórum Seta Categorias e subfóruns
Procure pelo subfórum desejado clique em modificar e bote isso na descrissão

Código:
<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


   <img src="http://i48.servimg.com/u/f48/16/88/27/59/regras10.png">



   <div>
   
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/jkcasc10.png" style="margin-top:-8px; margin-left:-8px" align="center" />
   </div>


</div>
</div><div class="flip" style="width: 20px; height: 10px; display: inline-block;"><div class="rotate y">
</div>
</div><style>.pun table .dtcr{-webkit-box-shadow:5px 0 5px #00E;background:url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif)repeat top center;border-radius:0 15px 0 0;border-top:10px #E3D9C7;box-shadow:5px 5px 5px #00E;font-size:10px;font-style:oblique;margin-left:80px;text-align:center;width:58%}div.flip{-moz-perspective:600px;-o-perspective:600px;-webkit-perspective:600px;height:72px;perspective:600px;position:relative;width:450px}div.flip div.rotate{-moz-transform-style:preserve-3d;-moz-transition:all .3s ease-in-out .3s;-o-transform-style:preserve-3d;-o-transition:all .3s ease-in-out .3s;-webkit-transform-style:preserve-3d;-webkit-transition:all .3s ease-in-out .3s;height:100%;transform-style:preserve-3d;transition:all .3s ease-in-out .3s;width:100%}div.flip div.rotate > *{-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;position:absolute;width:100%}div.flip div.rotate > div{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:#eee;box-sizing:border-box;padding:8px}div.rotate.x :nth-child(2){-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}div.flip:hover > div.rotate.x{-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}div.rotate.y :nth-child(2){-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}div.flip:hover > div.rotate.y{-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}blockquote,blockquote blockquote,blockquote blockquote blockquote{-moz-border-radius:6px;-moz-box-shadow:2px 2px 2px #a8a180;-webkit-border-radius:6px;-webkit-box-shadow:2px 2px 2px #a8a180;background:-moz-linear-gradient(#f2f2f2,#ffffff);background-color:#fff;background-image:-webkit-linear-gradient(#f2f2f2,#ffffff);border:1px solid #a8a180;border-radius:6px;box-shadow:2px 2px 2px #a8a180;font-size:11px;margin:0;padding:10px;width:90%}</style>

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por StyLe® em 01/06/13, 10:55 pm

Troque o código CSS por este
Código:
div.flip:hover > div.rotate.x {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
div.flip:hover > div.rotate.y {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
div.flip {
-moz-perspective:600px;
-o-perspective:600px;
-webkit-perspective:600px;
height:130px;
perspective:600px;
position:relative;
width:450px;
}


Resulta?


Até mais...

StyLe®
Membro do Fórum

Masculino
Inscrito dia : 28/04/2012
Mensagens : 1919
Pontos Ativos : 2653

Ver perfil do usuário http://ajuda.forumeiros.com/t79652-

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama em 01/06/13, 11:05 pm

ainda o mesmo problema , as duas imagens aparecem "juntas", ao mesmo tempo e quando põe o mouse por cima delas elas giram, é para aparecer só "uma", e depois que colocar o mouse por cima, aparecer a outra.
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por StyLe® em 01/06/13, 11:07 pm

Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS
e adicione este código
Código:
div.flip:hover > div.rotate.x {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
div.flip:hover > div.rotate.y {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
div.flip {
-moz-perspective:600px;
-o-perspective:600px;
-webkit-perspective:600px;
height:130px;
perspective:600px;
position:relative;
width:450px;
}

StyLe®
Membro do Fórum

Masculino
Inscrito dia : 28/04/2012
Mensagens : 1919
Pontos Ativos : 2653

Ver perfil do usuário http://ajuda.forumeiros.com/t79652-

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por MateusA em 01/06/13, 11:08 pm

Olá querido,

Você testou o codigo nas categorias? Aqui funcionou perfeitamente da mesma versão que a sua veja

http://snapshot.forumeiros.com/forum

Pode deixar o codigo ativo para que eu possa indentificar o erro?

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama em 01/06/13, 11:21 pm

cara, eu ja escrevi la no começo que não pretendo usar nas categorias, e sim em posts -.-'
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por StyLe® em 02/06/13, 07:09 pm

Amigo troque o código por este, basta você adicionar esse código em um tópico
Código:
<style>div.flip:hover > div.rotate.x {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
div.flip:hover > div.rotate.y {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
div.flip {
-moz-perspective:600px;
-o-perspective:600px;
-webkit-perspective:600px;
height:130px;
perspective:600px;
position:relative;
width:450px;
}</style>
<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


  <img src="http://i48.servimg.com/u/f48/16/88/27/59/10310.png">



  <div>
 
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/310.png" style="margin-top:-8px; margin-left:-8px" align="center">
  </div>


</div>
</div>

Resulta?


Até mais...

StyLe®
Membro do Fórum

Masculino
Inscrito dia : 28/04/2012
Mensagens : 1919
Pontos Ativos : 2653

Ver perfil do usuário http://ajuda.forumeiros.com/t79652-

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por Legolass em 02/06/13, 07:27 pm

Olá, tente este código

Código:
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">  <a rel="nofollow" title="" href="#" target="_blank"><img border="0" src="ENDEREÇO_DA_IMAGEM" style="margin-right:1px;" alt="Icon"/></a>
avatar

Legolass
Usuário destaque

Masculino
Inscrito dia : 10/04/2013
Mensagens : 651
Pontos Ativos : 912

Ver perfil do usuário http://www.fanfictionunited.com.br

Resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama em 02/06/13, 08:05 pm

mas neste so mostra uma imagem ._.
eu quero: imagem1 ->"põe mouse em cima"-> imagem2
avatar

pyrohinotama
Usuário destaque

Masculino
Inscrito dia : 29/03/2013
Mensagens : 852
Pontos Ativos : 1304

Ver perfil do usuário http://rpgadventure.umforum.net/h2-alianca-katsuo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum