Buscando con efectos

Esto de tener que usar jQuery para todo, a mi no me convence. Será la nueva moda pero me gusta llevar la contra y buscar alternativas porque las librerías de scripts son cómodas pero, ya se sabe que el sedentarismo no es bueno así que siempre es mejor encontrar variantes o por lo menos, intentarlo.

En este caso se trata de Autogrow search, una forma de crear una etiqueta INPUT que es la que se utiliza en los buscadores para ingresar el texto y que tiene la característica de ampliarse y modificar otros detalles gráficos cuando se activa.

Evidentemente, la animación sin librerías externas es limitada pero, algo es algo y de este modo, no requerimos agregar scripts de ninguna clase ya que todo se hace con CSS.

El HTML es el que va donde se nos ocurra mostrarlo y sería algo así:

<div id="wrap-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="URL_IMAGEN" type="image"/>
    <input type="text" name="q" value="buscar" onfocus="this.value='';" onblur="this.value='buscar';" onmouseover="this.value='';" onmouseout="this.value='buscar';" />
    </form>
  </div>
</div>

En un DIV al que identificamos como wrap-search, colocamos otro llamado search; esta duplicación es la que nos permite crear un diseño gráfico diferente ya que hay dos rectángulos que ocupan el mismo espacio y a los que podemos aplicar propiedades distintas.

El contenido es una etiqueta FORM cuyo atributo action nos permite ver los resultados dentro del mismo sitio y el atributo target los abrirá en una nueva pestaña.

En una etiqueta INPUT de tipo IMAGE, colocamos una imagen que será la que funcionará como botón. Al hacer click en ella, se ejecutará el formulario.

En otra etiqueta INPUT de tipo TEXT, es donde se escribe el texto a buscar.

El CSS es la clave de todo y usa la propiedad transition para generar la animación que, por supuesto, no será visible en Internet Explorer así como algunas de las otras propiedades pero, de todas maneras, será totalmente funcional.

<style>
  #wrap-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;
  }
  #wrap-search br { display: none; }
  #wrap-search #search {
    background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5,  #CACACA),color-stop(25.5, #D3D3D3));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');
    border-radius: 5px;
    padding: 4px;
  }
  #wrap-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));
    background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');
    border: 1px solid #747474;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #575555, 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:#6E7074;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #wrap-search:hover input[type='text'] { color:#597C84; }
  #wrap-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #25464D;
  }
  .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);
  }
</style>