Efeito suave na caixa de busca

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

Resolvido Efeito suave na caixa de busca

Mensagem por Master™ em 01/04/12, 07:26 pm

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

Master™
Usuário destaque

Masculino
Inscrito dia : 17/04/2009
Mensagens : 711
Pontos Ativos : 1130

Ver perfil do usuário http://vdesign.forumeiros.com

Resolvido Re: Efeito suave na caixa de busca

Mensagem por iPrompt em 01/04/12, 07:28 pm

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}
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Efeito suave na caixa de busca

Mensagem por Master™ em 01/04/12, 07:31 pm

Olá!
Não funcionou.

Master™
Usuário destaque

Masculino
Inscrito dia : 17/04/2009
Mensagens : 711
Pontos Ativos : 1130

Ver perfil do usuário http://vdesign.forumeiros.com

Resolvido Re: Efeito suave na caixa de busca

Mensagem por MateusV. em 01/04/12, 07:32 pm

Olá,

Aceda a:
Painel de controleVisualização Imagens e CoresCoresAba 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
avatar

MateusV.
Principal contribuidor
Principal contribuidor

Inscrito dia : 30/10/2011
Mensagens : 7017
Pontos Ativos : 9289

Ver perfil do usuário http://mateusv.site11.com/gerador2.html

Resolvido Re: Efeito suave na caixa de busca

Mensagem por Master™ em 01/04/12, 07:37 pm

Muito obrigado, consegui o efeito!

Master™
Usuário destaque

Masculino
Inscrito dia : 17/04/2009
Mensagens : 711
Pontos Ativos : 1130

Ver perfil do usuário http://vdesign.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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