In Tutoriais

Cute Search Box com Efeito Hover

 
Hoje vou mostrar para vocês como criar uma caixa de pesquisa super fofa, que possui um efeito bem legal: ao posicionar o mouse na área em que irá digitar o texto, ela se expande! Assim você pode economizar espaço  :3 Super fácil! Vai ficar assim:


Passe o mouse ou clique para pesquisar algo e veja o efeito
Vamos lá!
1. Acesse a área de edição de HTML do seu modelo e procure por ]]></b:skin>
2. Quando encontrar, cole isso acima dele:
#cute-search {
    margin: 0 auto;
    width: 100px;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  #cute-search br { display: none; }
  #cute-search #search {
    background: -moz-linear-gradient(center bottom , #fc86c5 0%, #fa87ce 50%, #ffe6ff 50%, #fcc2c2 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fc86c5),color-stop(0.5, #fa87ce),color-stop(0.5,  #ffe6ff ),color-stop(25.5, #fcc2c2));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fc86c5', EndColorStr='#ffe6ff ');
    border-radius: 5px;
    padding: 4px;
  }
  #cute-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#f799c7), to(#ffd6ff));
    background: -moz-linear-gradient(-90deg, #ffd6ff, #f799c7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f799c7', EndColorStr='#ffd6ff');
    border: 1px solid #fcc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #fee, 0 1px 0 #FFF;
    height: 32px;
    position: relative;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .form-search input[type='text'] {
    background: none;
    border: none;
    color:#f73b83;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: verdana;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #cute-search:hover input[type='text'] { color:#f73b83; }
  #cute-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #fc86c5, #ffe6ff);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#ffe6ff), to(#fc86c5));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffe6ff', EndColorStr='#fc86c5');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #f73b83;
  }
  .form-search input[type='image'] {
    height: 32px;
    opacity: .5;
    filter:alpha(opacity=50);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }
  .form-search input[type='image']:hover {
    opacity: 1;
    filter:alpha(opacity=100);
  }
Esse código acima é o que vai mudar a aparência da caixinha. Nele você pode mudar os códigos das cores (que sempre começam com um '#' seguido de letras e números, tipo #FFF) para trocar os planos de fundo. Em color:#f73b83; você muda a cor do texto; também pode alterar o tamanho da imagem de busca, que no caso é essa lupa  que mede cerca de 32x32px, se trocar, substitua esses valores pelos de sua imagem. Pode também mudar a opacidade, tamanho e estilo do texto, tamanho máximo (200px) e mínimo (100px) da caixinha... várias coisas, só dar uma olhada no código com atenção, ir testando tudo e vocês vão perceber o que alterar ^-^
3. Visualize seu modelo só para ver se continua tudo normal, mas ainda não vão aparecer mudanças. Para que a caixinha de pesquisa apareça, você deve adicionar o código abaixo no local que desejar e que aceite HTML, como em um gadget HTML/JavaScript por exemplo:
<div id="cute-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="http://1.bp.blogspot.com/--VAxuc8N-VI/UILUWRujWoI/AAAAAAAAGX0/mgVx7qSWsw0/s1600/busca.png" type="image"/>
    <input type="text" name="q" value="search" onfocus="this.value='';" onblur="this.value='search';" onmouseover="this.value='';" onmouseout="this.value='search';" />
    </form>
  </div>
</div>
Pronto! Só isso :) Eu espero que gostem e beijus!!!

Related Articles

5 comentários:

  1. É muito fofinho,adorei,vou usar agora, eu vivia procurando uma caixa de pesquisa, mais todas que eu usava dava errado. bjs
    no-planetaroom

    ResponderExcluir
    Respostas
    1. Que bom que gostou ^^
      Essa deu certo em todos os navegadores que testei (exceto o Internet Explorer).
      Beijus e obrigada...

      Excluir
  2. Vc Pode fazer tutos sobre a nova interface do blog?
    com esses naum percebo mt bem(sou novata ainda),se poder agradecia imenso~

    ResponderExcluir
  3. Olá ^^ Vou procurar postar algumas dicas para a nova interface também :3
    Dei algumas dicas para iniciantes aqui; dá uma olhadinha nos arquivos em uma postagem com o nome de Alguns Tutoriais e Dicas Básicas para seu Blog, e no post Dicas de Sites, Programas e Recursos; em ambos dei dicas que me auxiliaram quando comecei.
    Beijinhus e muito obrigada.

    ResponderExcluir
  4. Adorrei, coloquei no meu e ficou lindo <3

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart