Ola Visitante Bem Vindo a First Cheats
Porfavor Conecte ao nosso Forum Pelo Google Chrome.
Cadastre-se Para Ver Total Conteúdo.
Ola Visitante Bem Vindo a First Cheats
Porfavor Conecte ao nosso Forum Pelo Google Chrome.
Cadastre-se Para Ver Total Conteúdo.

Effeito Avatar . ( Necessario Painel de Controle )  Raidcall-icon IP :► 5654857

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

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

#1
Furia

Furia
Membro
Membro
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Adicionar efeito ao passar o mouse por cima da avatar

Este tutorial é bem simples, quando você adicionar o código (que se encontra a baixo) em sua página CSS, ao passar o mouse por cima do avatar ele irá ter um efeito e ficará na "diagonal".

OBS: Efeito só funcionará em navegadores "mais modernos"

--> Tutoriais, dicas e astúcias <--

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Acesse </rx>

<vr> Painel de controles >> Visualização >> Cores >> Folha de estilo CSS >> Aplique o código de sua versão: </vr>

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] <rx> Codigos Para As Devidas Versoes :</rx>

<v> PhpBB2</v>

Código:
 .poster-profile img{
      margin-left: 3px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
.poster-profile img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

<V> PhpBB3: </v>

Código:
 div.postprofile dl dt img{
      margin-left: 3px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
div.postprofile dl dt img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}


<v> PunBB </v>

Código:
div.user-basic-info img{
    margin: 3px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
div.user-basic-info img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

<v> Invision </v>

Código:
dl.postdetails dt img{
      margin-bottom: 10px;
    border: 5px solid #eee;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
 
dl.postdetails dt img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

Pronto, após escolher código de sua versão, valide

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

#2
Viny

avatar
Administrador

Administrador
Direto do <rx>fumeiros</rx> ajuda para <rx>Style</rx> kk - Gostei .

<rx>Parabéns</rx> bem organizado e centralizado . Wink

https://www.facebook.com/ViniciusSallgerinho

#3
Furia

Furia
Membro
Membro
~Fσσx escreveu:Direto do <rx>fumeiros</rx> ajuda para <rx>Style</rx> kk - Gostei .

<rx>Parabéns</rx> bem organizado e centralizado . Wink

<v> Obrigado Pela Colaboraçao ^^ </v>

#4
Conteúdo patrocinado


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


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