Efeito suave na caixa de busca

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Efeito suave na caixa de busca

Mensagem por Master™ 01.04.12 23:26

Qual é minha questão:
Olá!
Eu estive a ver o efeito que tem no FdF onde a caixa de busca se expande e se contrai de maneira suave, quando clicamos dentro e fora dela.

Tentei reproduzir este efeito em meu fórum, mais não consegui (no Firefox). Veja o código que estou usando:


#search #keywords {
width: 150px;
-moz-transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
}

Eu consigo esse efeito com perfeição se eu acessar qualquer um com o motor webkit (Google Chrome, por exemplo), mas no Firefox não consigo o mesmo.

Como faço para que funcione no Firefox?

Medidas que eu tomei para corrigir o problema:
Já tentei várias formas e não obtive sucesso

Links e imagens do meu problema:


Endereço do meu fórum:
http://superligado.forumeiros.com

Versão do meu fórum:
PHPBB3
avatar

Master™
Membro

Membro desde : 18/04/2009
Mensagens : 711
Pontos : 1130

http://vdesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito suave na caixa de busca

Mensagem por Roevs 01.04.12 23:28

Utiliza este código

Código:
#search-box{margin-bottom:5px}search-box input.button2{-webkit-border-radius:2px;-webkit-user-select:none;background-color:#f5f5f5;background-image:-o-linear-gradient(top,whiteSmoke,#F1F1F1);border:1px solid rgba(0,0,0,0.1);border-radius:2px;color:#666;cursor:pointer;font-size:11px;font-weight:700;height:29px;line-height:27px;margin:11px 6px;min-width:54px;padding:0 8px;text-align:center}#search-box input{-moz-box-sizing:content-box;background:#fff;border:1px solid #D9D9D9;border-width:1px;color:#000;height:23px}#search #keywords:focus{width:290px}#search #keywords{-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;width:150px}
Roevs

Roevs
Membro Entusiasta
Membro Entusiasta

Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343

https://www.sololevelingrpg.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito suave na caixa de busca

Mensagem por Master™ 01.04.12 23:31

Olá!
Não funcionou.
avatar

Master™
Membro

Membro desde : 18/04/2009
Mensagens : 711
Pontos : 1130

http://vdesign.forumeiros.com

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Efeito suave na caixa de busca

Mensagem por MateusV. 01.04.12 23:32

Olá,

Aceda a:
Painel de controleEfeito suave na caixa de busca 2479035592Visualização Efeito suave na caixa de busca 2479035592Imagens e CoresEfeito suave na caixa de busca 2479035592CoresEfeito suave na caixa de busca 2479035592Aba Folha CSS.
Cole o codigo e salve.
Código:
#search #keywords {
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
width: 150px;
}
#search-box #keywords {
background-color: white;
width: 95px;
}
#search-box input {
-moz-box-sizing: content-box;
background: white;
border: 1px solid #D9D9D9;
border-width: 1px;
color: black;
height: 23px;
border-image: initial;
}
Cordialmente. Piscada
MateusV.

MateusV.
Membro Entusiasta
Membro Entusiasta

Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284

http://mateusv.site11.com/gerador2.html

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito suave na caixa de busca

Mensagem por Master™ 01.04.12 23:37

Muito obrigado, consegui o efeito!
avatar

Master™
Membro

Membro desde : 18/04/2009
Mensagens : 711
Pontos : 1130

http://vdesign.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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