Efeito de Avatar

2 participantes

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

Tópico resolvido Efeito de Avatar

Mensagem por IsmaelS. 09.09.14 15:57

  • Descrição:
Gostaria saber se era possível ter este efeito de avatar no índice do fórum:
http://narutoeternal.ativoforum.com/

  • Informações:
Fórum:http://kodactheme.criaforum.com/Versão:PHPBB2
Tipo:Pedido de códigoTags:Efeito,Avatar

avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por waghcwb 09.09.14 19:57

Pode ser mais especifico a exatamente qual efeito o senhor deseja? é aquele ao passar o mouse em cima dos avatares no index ou o efeito completo deles em si?
waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. 09.09.14 20:10

Amigo ambos se possível!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por waghcwb 09.09.14 20:53

Teste o seguinte

Código:
.lastpost-avatar img {
   background: #FFF;
   border: 1px solid #D5D5D5;
   border-radius: 50%;
   box-shadow: 0 2px 2px rgba(0,0,0,.1);
   height: 40px;
   padding: 1px;
   transition: all 1s;
   width: 40px;
}
.lastpost-avatar img:hover {
   border-color: #A1A1A1;
   border-radius: 1px;
   box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. 09.09.14 23:01

Seria possível colocar mais abaixo o avatar? Ou seja mover mais para o centro, que ao colocar o mouse em cima se reparar ele fica um bocadinho acima se possível colocar centrado!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por waghcwb 09.09.14 23:54

Basta que o senhor use a seguinte propriedade
Código:
margin-top: -VALOR;

Note que o valor é negativo ( - )

Veja um exemplo:

Código:
.lastpost-avatar img {
  background: #FFF;
  border: 1px solid #D5D5D5;
  border-radius: 50%;
  box-shadow: 0 2px 2px rgba(0,0,0,.1);
  height: 40px;
  padding: 1px;
  transition: all 1s;
  width: 40px;
  /* NOTE A PROPRIEDADE AQUI */
  margin-top: -10px;
}

Basta usar o valor que o senhor deseja. Para os outros lados é a mesma coisa

margin-left para esquerda
margin-right para direita
margin-top para cima
margin-bottom para baixo

waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. 10.09.14 0:56

Olá,

No fórum quero deixar como está, mas nos sub-fóruns queria mexer também tem possibilidade?
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por waghcwb 11.09.14 18:46

Apenas nos subforuns? Se for, no caso o senhor pode fazer a alteração de forma global e na mensagem da homepage inserir a estilização que deseja apenas na homepage.

Ou seja, faça a alteração como deseja no CSS normal com as margens que deseja, e na mensagem da homepage altere as margens para 0

Exemplo
Código:
.lastpost-avatar img {
  margin-top: 0;
}
waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. 11.09.14 19:29

Então eu desejo assim na página inicial:
Código:
.lastpost-avatar img {
      background: #FFF;
      border: 1px solid #D5D5D5;
      border-radius: 50%;
      box-shadow: 0 2px 2px rgba(0,0,0,.1);
      height: 40px;
      padding: 1px;
      transition: all 1s;
      width: 40px;
      margin-top: 4;
    }
    .lastpost-avatar img:hover {
      border-color: #A1A1A1;
      border-radius: 1px;
      box-shadow: 0 2px 2px rgba(0,0,0,.2);
    }

Tenho que colocar esse na homepage, e este na .CSS?
Código:
    .lastpost-avatar img {
      margin-top: 0;
    }
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por waghcwb 11.09.14 20:01

Na verdade seria o contrário amigo, achei que entendesse um pouco de CSS por isso não deixei exemplos muito elucidativos, mas vamos lá então

Note seu código
Código:
.lastpost-avatar img {
      background: #FFF;
      border: 1px solid #D5D5D5;
      border-radius: 50%;
      box-shadow: 0 2px 2px rgba(0,0,0,.1);
      height: 40px;
      padding: 1px;
      transition: all 1s;
      width: 40px;
      margin-top: 4;
    }
    .lastpost-avatar img:hover {
      border-color: #A1A1A1;
      border-radius: 1px;
      box-shadow: 0 2px 2px rgba(0,0,0,.2);
    }

Não é errado não atribuir um valor especifico para um valor, porém cada navegador vai entender esse valor de uma maneira diferente, o "4" para você pode não ser o mesmo para mim, entende? Por isso, procure declarar o valor em pixels ou outra unidade de medida
Código:
margin-top: 4;

Poderia ser
Código:
margin-top: 4px;

Para inserir um CSS na homepage não basta colar ele lá, vai precisar inserir entre as tags "style", assim:
Código:
<style type="text/css">/* Códigos aqui */</styles>

Tenta fazer isso, se tiver dificuldades nos avise.

waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. 11.09.14 20:07

Olá,

Fiz o que pediu colocar em "4px", agora na parte de homepage que código coloco ao certo dentro?
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por waghcwb 11.09.14 20:11

Isso no CSS

Código:
.lastpost-avatar img {
      background: #FFF;
      border: 1px solid #D5D5D5;
      border-radius: 50%;
      box-shadow: 0 2px 2px rgba(0,0,0,.1);
      height: 40px;
      padding: 1px;
      transition: all 1s;
      width: 40px;
      margin-top: 4px;
    }
    .lastpost-avatar img:hover {
      border-color: #A1A1A1;
      border-radius: 1px;
      box-shadow: 0 2px 2px rgba(0,0,0,.2);
    }


E isso na mensagem da home

Código:
<style type="text/css">.lastpost-avatar img {
      margin-top: 0;
    }</style>
waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. 11.09.14 20:15

Fiz o que pediu mas não notei nada de diferente mas aqui fica uma print como quero:

Efeito de Avatar J7un7t

Veja ao passar o mouse o efeito fica muito abaixo das informações ao lado direito, eu queria alinhado se possível, percebeu?
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Efeito de Avatar

Mensagem por waghcwb 12.09.14 15:49

Amigo, você fez algo errado.. O valor dos pixels la não estão negativos, assim eles ficam mais para baixo ainda

Veja
Efeito de Avatar LPwzYZv

Altere o valor para 4 pixels negativos
Código:
margin-top: -4px;
waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por IsmaelS. 12.09.14 19:18

Obrigado amigo, ficou perfeito resolvido!!
avatar

IsmaelS.
Hiper Membro

Membro desde : 24/11/2012
Mensagens : 2994
Pontos : 4142

http://suporte-design.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito de Avatar

Mensagem por waghcwb 12.09.14 19:33


Tópico movido de Questões sobre aparência do fórum para Questões resolvidas.
waghcwb

waghcwb
Membro

Membro desde : 07/09/2012
Mensagens : 734
Pontos : 1097

http://punbb.forumeiros.com

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