AjudaFM
Bem-Vindo
não é obrigado se registra para ver nosso tutoriais
agora se quiser tirar uma duvida registre-se
Bem vindo ao AJUDAFM 4.0
Cadastre-se agora para ter acesso a todos os nossos recursos. Uma vez cadastrado e logado, você será capaz de criar tópicos, postar respostas a tópicos já existentes, a reputação de seus companheiros, começar seu próprio mensageiro privado, atualizações de status post, gerir o seu perfil e muito mais. Esta mensagem será removida assim que tiver logado no AJUDAFM 4.0
Entrar Cadastre-se
AjudaFM

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

Mensagens : 100
CashFM : 264
Reputação : 21
inscrição : 02/07/2012
Idade : 19

avatar

Maxinho

AdminFM

AdminFM



Imagem preto e branco com o mouse em cima

Nesse tutorial estarei ensinando como criar efeito que qualquer imagem fica preto e branco com mouse em cima.


1º - Adicionar


Código:
img {
-webkit-filter: grayscale(0);
display: inline-block;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}img:hover {
-webkit-filter: grayscale(1);
}


Resultado


Passe o mouse em cima da imagem (lembrando funciona com todas as imagens)



Desenvolvido por Max Kyle | © AjudaFM
Editado e Postado por © Max Kyle


Atenção:
Lembrando galera todos os tutoriais são testados sem ter nenhum outro código ativo, pois isso pode gerar incompatibilidade entre eles.


_________________________________________________________________________________________________________

Olá Convidado, Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário http://ajudafm.ativoforum.com
Mensagens : 2
CashFM : 7
Reputação : 1
inscrição : 05/12/2012

avatar

D'Leandro™

Sou Nível 1


dahora mano.

Ver perfil do usuário
Mensagens : 100
CashFM : 264
Reputação : 21
inscrição : 02/07/2012
Idade : 19

avatar

Maxinho

AdminFM

AdminFM

valeu cara


_________________________________________________________________________________________________________

Olá Convidado, Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário http://ajudafm.ativoforum.com
Mensagens : 5
CashFM : 18
Reputação : 1
inscrição : 20/12/2012
Idade : 27

avatar

azure

Sou Nível 1


Não é só o avatar são todas as imagens mas mesmo assim fico fantástico!

Ver perfil do usuário http://code.azureforum.com/
Mensagens : 81
CashFM : 219
Reputação : 16
inscrição : 19/11/2012
Idade : 20
Localização : Logo ali

avatar

iHeload

ModeradorFM

ModeradorFM

Obrigado Azure


_________________________________________________________________________________________________________

Olá Convidado, olhe essas Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário http://sw-design.forumeiros.com
Mensagens : 5
CashFM : 18
Reputação : 1
inscrição : 20/12/2012
Idade : 27

avatar

azure

Sou Nível 1


maxinho me fala uma coisa como eu faço para deixar só nos avatares ao invez de todo o forum!

Ver perfil do usuário http://code.azureforum.com/
Mensagens : 6
CashFM : 17
Reputação : 0
inscrição : 21/12/2012

avatar

ϟ iKиigнт •

Sou Nível 1


Bem Legal .

Ver perfil do usuário
Mensagens : 4
CashFM : 12
Reputação : 0
inscrição : 21/12/2012

avatar

AngelCheats

Sou Nível 1


vamo lá !!

Ver perfil do usuário
Mensagens : 4
CashFM : 12
Reputação : 0
inscrição : 21/12/2012

avatar

AngelCheats

Sou Nível 1


legal !!

Ver perfil do usuário
Mensagens : 100
CashFM : 264
Reputação : 21
inscrição : 02/07/2012
Idade : 19

avatar

Maxinho

AdminFM

AdminFM

azure escreveu:maxinho me fala uma coisa como eu faço para deixar só nos avatares ao invez de todo o forum!

azure vou fazer uns teste, mais acho que se eu mudar a tag eu consigo


_________________________________________________________________________________________________________

Olá Convidado, Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário http://ajudafm.ativoforum.com
Mensagens : 5
CashFM : 18
Reputação : 1
inscrição : 20/12/2012
Idade : 27

avatar

azure

Sou Nível 1


Funcionou ;DDDDDDDDDD
Vou fazer um tutorial rapido aqui

Vai nos templentes > viewtopic_body
Procure o seguinte código:
Código:
{postrow.displayed.POSTER_AVATAR}

Troque o código acima por esse na versao punBB e phpbb2:
Código:
<div class="post_avatar">{postrow.displayed.POSTER_AVATAR}</div><br />


Depois adicione isso no seu CSS:
Código:
.post_avatar
{
-webkit-filter: grayscale(0);
display: inline-block;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.post_avatar:hover {
-webkit-filter: grayscale(1);
}


e para mudar nas outras versoes phpbb 3 e invison basta adicionar o css abaixo:

Código:
.postprofile dl dt a[href*="/u"] img, .blog_comment-avatar img {
-webkit-filter: grayscale(0);
display: inline-block;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.postprofile dl dt a[href*="/u"] img:hover, .blog_comment-avatar img:hover {
-webkit-filter: grayscale(1);
}

Valide
OBS: muda o o fundo do seu PRETTY deixa preto igual o meu ;D

Ver perfil do usuário http://code.azureforum.com/
Mensagens : 81
CashFM : 219
Reputação : 16
inscrição : 19/11/2012
Idade : 20
Localização : Logo ali

avatar

iHeload

ModeradorFM

ModeradorFM

Usando


_________________________________________________________________________________________________________

Olá Convidado, olhe essas Dicas Importantes:
- Respeite as Regras do fórum
- Teste o Editor de Imagens
- Utilize as Ferramentas de usuário e o serviço de litígios.
- Conheça os Tutoriais que vão lhe ajudar em seu fórum
- Não peça suporte por MP ou no Chat-Box
- As mudanças de nome de usuário são feitas clicando Aqui
Ver perfil do usuário http://sw-design.forumeiros.com
Mensagens : 2
CashFM : 6
Reputação : 0
inscrição : 05/02/2013

avatar

RodrigoNunes

Sou Nível 1


Gostei

Ver perfil do usuário
Mensagens : 1
CashFM : 3
Reputação : 0
inscrição : 09/03/2013

avatar

Loke

Sou Nível 1


Daora....

Ver perfil do usuário

Conteúdo patrocinado



Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

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