Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


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]

RMBR

avatar
Administrador

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

[TUTORIAL] Caixa de pesquisa que aumenta de tamanho

Olá Convidado creio que você já viu o efeito da caixa de pesquisa do forum dos foruns, então estou postando aqui, eu mudei uma coisa simples que lá nao tinha, que é o efeito hover no btn de buscar. Vamos começar!

[Você precisa estar registrado e conectado para ver esta imagem.]CRÉDITOS!

Forum dos Forúns: Criação da base do codigo.
HenRyqUé: Edição e postagem do código.
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Caixa de pesquisa que aumenta de tamanho



- Código CSS
Vá até:

Visualização >> Imagens e Cores >> Cores >> Folha de estilo css
E cole o seguinte código na folha:
CLIQUE PARA ABRIR:
Código:
#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:18px;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:300px}#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}img[src="http://i66.servimg.com/u/f66/15/86/37/09/suppor10.png"]{height:auto;width:46px}
#search-box input.button2 {
font-size: 11px !important;
}
#search-box input.button2:hover {
  border-radius:5px;
  -webkit-border-radius:10px;
    background: #9CE89C;
color: #F4F5F4;
border: 1px solid #007300;
box-shadow: 2px 0px 3px grey;
}
#search-box {
    margin-top:-120px;
    margin-right: -8px;
  }
VALIDE!


- Editando o tamanho o posicionamento e a cor do :hover

#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:18px;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:300px}#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}img[src="https://i.servimg.com/u/f66/15/86/37/09/suppor10.png"]{height:auto;width:46px}
#search-box input.button2 {
font-size: 11px !important;
}
#search-box input.button2:hover {
border-radius:5px; /*Bordas suaves*/
-webkit-border-radius:10px; /*Bordas suaves*/
background: #9CE89C; /*Cor do fundo*/
color: #F4F5F4; /*Cor do texto*/
border: 1px solid #007300; /*Cor da borda*/
box-shadow: 2px 0px 3px grey; /*Efeito fumaça atrás do objeto (mais conhecido como neon)*/
}
#search-box {
margin-top:-120px; /*Edite esses números pra mais ou pra menos para determinar a altura do objeto, deixe 0 para deixar normal*/
margin-right: -8px; /*Edite esses números pra mais ou pra menos para determinar a longitude do objeto, deixe 0 para deixar normal*/
}


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

Até a proxima...


  • Funciona em quais versões?
    PHPBB3





HENRYQUÉ & RMBR


[Você precisa estar registrado e conectado para ver esta imagem.] Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] Caixa de pesquisa que aumenta de tamanho

http://rmbr.forumeiros.com

-Naruto

avatar
Administrador
Publicitário
Helper
Bom Tutorial, Aprovado.

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