Efeito nas mensagens de categorias

+3
Konai
BrunoH.
pyrohinotama
7 participantes

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

Tópico resolvido Efeito nas mensagens de categorias

Mensagem por pyrohinotama 24.05.13 22:52

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
pyrohinotama

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por BrunoH. 24.05.13 23:09

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.
BrunoH.

BrunoH.
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10385

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama 24.05.13 23:12

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.
pyrohinotama

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por BrunoH. 25.05.13 2:31

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

Até mais.
BrunoH.

BrunoH.
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10385

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por Konai 25.05.13 5:42

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
Konai

Konai
Membro Entusiasta
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama 25.05.13 10:55

ainda apresenta o mesmo erro:

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

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

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por Shek 30.05.13 19:38

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!
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama 31.05.13 0:36

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

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por StyLe® 02.06.13 1:06

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...
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama 02.06.13 2:34

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 ._. )
pyrohinotama

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por MateusA 02.06.13 2:48

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.
MateusA

MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por StyLe® 02.06.13 2:55

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...
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama 02.06.13 3:05

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.
pyrohinotama

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por StyLe® 02.06.13 3:07

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;
}
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por MateusA 02.06.13 3:08

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.
MateusA

MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama 02.06.13 3:21

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

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por StyLe® 02.06.13 23:09

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...
avatar

StyLe®
Super Membro

Membro desde : 28/04/2012
Mensagens : 1919
Pontos : 2654

https://ajuda.forumeiros.com/t79652-

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por Legolass 02.06.13 23:27

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>
Legolass

Legolass
Membro

Membro desde : 10/04/2013
Mensagens : 651
Pontos : 912

http://www.fanfictionunited.com.br

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito nas mensagens de categorias

Mensagem por pyrohinotama 03.06.13 0:05

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

pyrohinotama
Membro

Membro desde : 30/03/2013
Mensagens : 852
Pontos : 1304

http://rpgadventure.umforum.net/h2-alianca-katsuo

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos