Follow Us @soratemplates

sábado, 20 de outubro de 2012

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!!!

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