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

IP :► 5654857

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]

#1
Furia


Membro
Membro
[Você precisa estar registrado e conectado para ver 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 <--

[Você precisa estar registrado e conectado para ver esta imagem.] Acesse </rx>

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

[Você precisa estar registrado e conectado para ver 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

[Você precisa estar registrado e conectado para ver esta imagem.]





By : Furia

[Você precisa estar registrado e conectado para ver esta imagem.]

Ver perfil do usuário

#2
Viny


Administrador

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

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

Ver perfil do usuário http://www.facebook.com/ViniciusSallgerinho

#3
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>





By : Furia

[Você precisa estar registrado e conectado para ver esta imagem.]

Ver perfil do usuário

#4
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