Efeito de sombra no AVATAR

[CristianoCMP]

Olá pessoal tudo bem?
Bom dei uma lida por aqui e no forum phpbb.com e nao consegui achar nada sobre o assunto, mas creio que ninguem ainda quis inventar isto..

Seria um efeito no AVATAR, por ex: uma sombra nos AVATARES do forum, e ao passar o mouse sobre ele uma borda branca no avatar externa, e some a sombra.

Se alguem souber de algo... ou extensão que faça isto! Lembrando q procurei alguma extensão e nao achei!

Grato a todos.

[LucasLV]

Não testei, mas seria algo mais ou menos assim. Abre seu content.css ou então adiciona em seu custom.css:

Código: Selecionar todos

.postprofile .avatar img {
box-shadow: 3px 3px 20px 5px #000;
-moz-box-shadow: 3px 3px 20px 5px #000;
-webkit-box-shadow: 3px 2px 10px 5px #000;
-o-box-shadow: 3px 3px 20px 5px #000;
}

Isso dará o aspecto de sombra aos avatares, altere em 3px ou 20px pra aumentar ou diminuir.

Pra desaparecer ao passar o mouse e a borda branca aparecer, adiciona:

Código: Selecionar todos

.postprofile .avatar img:hover {
box-shadow: none;
border: 3px solid #fff;
  -webkit-transition: all 0.7s linear;
  -moz-transition: all 0.7s linear;
  -o-transition: all 0.7s linear;
  transition: all 0.7s linear; /* uma transilção pra não ficar um efeito seco ao passar o mouse */
}

Testa ai e me fala

[CristianoCMP]

Nossa como eu nao tinha visto isto antes kkkkkkk

Funcionou Lucas Muito Obrigadoooooo

Outra coisa, e quanto tempo heimmmm Forum la bombando!!!! Graças a Deusss, e 99% das alterações ainda são creditos seus !!!

OBS so um detalhe, a sombra ficou somente para 1 lado, lado esquerdo, seria possivel ela ficar na diagonal pegando a parte do lado e de cima tambem? xD

Abraçosssssssss

[LucasLV]

Nossa como eu nao tinha visto isto antes kkkkkkk

Funcionou Lucas Muito Obrigadoooooo

Outra coisa, e quanto tempo heimmmm Forum la bombando!!!! Graças a Deusss, e 99% das alterações ainda são creditos seus !!!

OBS so um detalhe, a sombra ficou somente para 1 lado, lado esquerdo, seria possivel ela ficar na diagonal pegando a parte do lado e de cima tambem? xD

Abraçosssssssss

Boas, que bom que tudo está correndo bem.
Tente ir alterando os px do box-shadow pra chegar a um resultado que te agrade.

[CristianoCMP]

Sim alterei tudo os número ali e a sombra apenas se prolonga pela lateral kkkkk ela limita ao tamanho do avatar 🤣🤣🤣

[Alma]

Hello
E definindo os 2 primeiros valores para 0, deve estar tudo bem.
Por exemplo:

Código: Selecionar todos

box-shadow: 0 0 10px 3px #000;

Cordialmente

[CristianoCMP]

Hello
E definindo os 2 primeiros valores para 0, deve estar tudo bem.
Por exemplo:

Código: Selecionar todos

box-shadow: 0 0 10px 3px #000;

Cordialmente

Nada.... mesma coisa, nao muda! tudo igual

[henrique.seven2011]

Dê uma conferida: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp