Efeito no banner do meu fórum

[Marcelo Rios]

Qual é minha questão:
Olá Amigos, será que consigo colocar um efeito maneiro no banner do meu fórum, estou achando ele um pouco sem graça. Abaços.

Endereço do meu fórum:
http://jiu-jitsu.forumeiros.com

Versão do fórum:
PHPBB3

[.Danni.]

Olá

Quando se refere à efeito, você diz CSS ou alterando o banner em um editor de imagens?

Cordialmente,
The Boss

[Marcelo Rios]

M e refiro a CSS. Grato.

[Marcelo Rios]

Será que consigo?

[Konai]

Olá querido,

Queira checar:

[TUTORIAL] Logo em flash

Caso não fique satisfeito e/ou não goste dos resultados, que tal fazer um movimento que ao passar o mouse ele vai para o lado? Se sim, aqui o código:

Código:

#logo {
    left: 100px;
    top: 5px;
    float: left;
    position: relative;
    background: url(LINK DA IMAGEM);
    width: 930px;
    text-indent: -9999px;
    height: 130px;
    display: block;
    margin: 0 auto;
    margin-bottom: 25px;
      -webkit-transition-duration: 1s;
      -moz-transition-duration: 1s;
      -o-transition-duration: 1s;
      transition-duration: 1s;
 
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      transition-property: transform;
 
      overflow:hidden;
    }


    #logo:hover {
    background: url(LINK DA IMAGEM) 0px 0px;
      -webkit-transform:translate(80px);
      -moz-transform: translate(80px);
      -o-transform:translate(80px);
    }

    #logo:active {
    background: url(LINK DA IMAGEM) 0px 0px;
      -webkit-transform:scale(0.9);
      -moz-transform:scale(0.9);
      -o-transform:scale(0.9);
    }

Este código deve ser adicionado em:

Painel de Controle Visualização Imagens e Cores Cores Aba 'Folha de Estilo CSS'

Observação: Substitua os "LINK DA IMAGEM" pelo link do seu banner/logo.
Observação²: O senhor poderá colocar o banner original no primeiro, um banner mais claro ou escuro e/ou personalizado ao seu gosto no segundo e no terceiro colocar o banner original e/ou outro. As criatividades são diversas, basta fazer ao teu gosto!

Até mais.

[Marcelo Rios]

Colei o código e o banner sumiu,rsrsrs. Tive que desfazer.

[Jpjupa]

Primeiramente, acesse a folha de estilo css.

Vou passar um efeito agradável porém bem simples na linguagem CSS3 e CSS, em todos meus projetos costumo utilizar e faz um bom sucesso.

Código:


#logo {
opacity: 1.0;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}

#logo:hover {
opacity: 0.2;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}


Caso, queira modificar o tempo da transição da opacidade, modifique os valores: 1s - 1 segundo.

Att, Jpjupa!

[Marcelo Rios]

Hummm... gostei, rsrsrs. Obrigado cara e obrigado a todos que tentaram me ajudar.