Experimentos de CSS con un Formulario de Búsqueda y su Botón

() translation by (you can also view the original English article)

En este tutorial, me gustaría explorar cómo puedes embellecer un sencillo formulario de búsqueda. No estaremos haciendo nada loco, por el contrario exploraremos cuatro tomas diferentes sobre cómo engalanar una entrada de búsqueda con la ayuda de las transiciones de CSS.

Ya Tienes un Caja de Búsqueda Básica

En tu archivo HTML necesitarás crear un formulario de búsqueda para comenzar. Si miras el código a continuación, notarás cuatro cosas diferentes: un div .box un div .container-1 un div .icon y la entrada de búsqueda en sí misma.

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

Todos los cuatro ejemplos tendrán una caja de búsqueda - naturalmente - así como un bien parecido ícono. Cada uno de los cuatro ejemplos serán alojados en un contenedor de manera que puedas manipular la entrada de búsqueda independientemente. Por último, la caja div es responsable por mantener el contenedor centrado.

Añadiendo Font Awesome

Font Awesome es una librería de iconos. Puedes aprender más sobre el proyecto en el propio sitio web de Font Awesome

1	<i class="fa fa-search"></i>

El fragmento de código anterior es un ejemplo de como puedes incluir el icono dentro de tu marcado. Sin embargo, en orden de que se muestre el icono también necesitarás incluir un link a la librería de Font Awesome, demostrada en el fragmento a continuación. Incluye este enlace dentro del head de tu documento.

1	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Estilo Básico

Ahora vamos a agregar algunos estilos en una hoja de estilos separada (la cual también necesitarás enlazar desde dentro del head del documento).

body{
  background: #343d46;
}

.box{
  margin: 100px auto;
  width: 300px;
  height: 50px;
}

En el fragmento de CSS anterior estamos agregando algunos estilos básicos a la página. El estilo de las cajas de búsqueda serán de color marino de manera que el fondo no debe ser totalmente blanco. La clase box también esta siendo centrada en la página para los propósitos de este tutorial.

Embelleciendo la Caja de Búsqueda

Este tutorial es sobre aprender cómo embellecer la caja de búsqueda. En este primer ejemplo explicaré que está pasando con más detalle; quiero asegurarme de que sabes exactamente lo que está pasando. En el resto de los tres ejemplos, simplemente te mostraré cómo puedes lograr las diferentes transiciones.

#1. Fondo Desvanecido

El primer ejemplo que vamos a abordar es para cambiar el fondo onhover del campo de búsqueda. También añadiremos una transición de manera que el cambio no sea discorde.

El HTML

Ya has visto el HTML con el marcado básico. Este fragmento será similar para todos los ejemplos.

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

El CSS

Para comenzar a darle estilo, necesitamos definir el estilo CSS de la caja de búsqueda en si misma. Agreguemos las diferentes reglas de CSS una por una así sabrás exactamente qué está pasando.

.container-1{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

Primero, queremos darle estilo a la clase container. La propiedad más importante es posiblemente position:relative Está configurada específicamente de manera que el icono pueda ser puesto arriba de la entrada como lo verás en breve.

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #63717f;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Input

Luego queremos darle estilos al input actual. Todo lo anterior es puramente estético ya que el radio del borde o el color de fondo no afecta el funcionamiento del input. Ten en cuenta la propiedad left padding. Está ahí para hacerle cuarto al icono pues no está literalmente arriba del texto dentro del input.

A continuación tenemos cuatro reglas diferentes que le darán color al texto del placeholder, el cual en nuestro ejemplo es Search Las reglas desafortunadamente necesitan ser separadas para cada prefijo de proveedores y no pueden ser consolidadas en atajos de reglas escritas. ¡Esto es un poco molesto y lo verás repetidamenet en cada ejemplo!

.container-1 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-1 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-1 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Icono

Por último, le daremos estilos al icono. Lo más importante es que estamos estableciendo su posición para que sea ubicado arriba de la entrada al configurar su posición como position:absolute Las márgenes ayudan a posicionar el icono y en adición a configurar su posición de arriba en 50%

.container-1 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

Agregando Efectos al Hover

El siguiente conjunto de reglas que tenemos que crear es lo que le sucede a la caja de búsqueda cuando se hace hover sobre ella. En este ejemplo sólo queremos cambiarle el color de fondo. En orden de evitar el destello amarillo o azul alrededor del input (que es agregado por los navegadores algunas veces) configuramos outline:none.

1	.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
2	outline:none;
3	background: #ffffff;
4	}

Como ves en el fragmento anterior, hemos agregado dos estados adicionales - focus y active. De esta manera el efecto no desaparece cuando dejas de pasar el mouse por encima del input. Lo más importante, es que el efecto también sea prominente cuando el input esté en uso.

Creando la Transición

En orden de hacer que suceda la transición necesitamos agregar unas pocas líneas de código. Regresa de vuelta a la regla donde definimos el estilo del input - .container-1 input#search. Antes de los corchetes de cierre agrega el siguiente fragmento:

  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;

Estamos definiendo el atajo de la propiedad de transición, pero podríaamos a cambio definir esos tres parámetros individualmente. Primero que todo, estamos diciendo que la transición debería afectar sólo la propiedad background. Luego, estamos diciendo que la transición debería tomarse un poco más de medio segundo. Por último definimos el efecto de la transición para que sea ligero. El efecto para suavizar ease, no es el único efecto que podría trabajar aquí, también podríamos usar linear o ease-in, por ejemplo. Simplemente podría parecer un poco diferente. Mejor pruébalos por ti mismo para ver si te gustan.

El estilo del input debería ahora verse como el siguiente código.

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  
    -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}

¿Cómo trabajan las Transiciones de CSS?

Si no sabes nada acerca de las transiciones en CSS, déjame darte un breve resumen. Primero, en orden de que la transición funcione, la propiedad necesita ser definida en un estado por defecto y no en hover, active o focus.

Las transiciones de CSS permiten que gradualmente un efecto cambie y puedes definir parámetros específicos para controlarlo, tales como cuál propiedad será afectadam la duración de la transición y la clase de transición. Puedes tener un set de múltiples transiciones para un elemento. Pero, lo más importante, deberías siempre incluir prefijos de proveedores con el fin de acomodarlo a los varios navegadores, ya que el soporte para esta propiedad aún no es universal.

Para más información échale un vistazo a: Transiciones y Transformación en CSS3 desde Ceros

#2. Expandir el Input en Hover

En este ejemplo la búsqueda comenzará sólo como el icono de lupa. Cuando pases el ratón sobre el icono, la caja de búsqueda se expandirá hasta el punto en que puedas escribir tu consulta. La mayor parte del código en este ejemplo será muy similar al ejemplo previo.

El HTML

<div class="box">
  <div class="container-2">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

El CSS

.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

El estilo del input en esta transición es diferente El input es significativamente más pequeño de manera que el icono puede aparecer detrás de un cuadrado. Todas las propiedades restantes, como el fondo o el color de la fuente, son las mismas ya que no queremos cambiar el estilo de la búsqueda completamente.

.container-2 input#search{
  width: 50px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 35px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;

  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}

Como también puedes ver, he redefinido la propiedad de la transición para afectar sólo el ancho. He mantenido el tiempo igual porque es lo suficientemente rápido como para no enojar a los usuarios, pero lo suficientemente largo para crear unn buen efecto.

Abajo está el código para recolorear el texto del placeholder.

.container-2 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-2 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Una vez más tenemos el estilo CSS del icono. Debería ser el mismo como en el ejemplo anterior.

.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

Añadiendo los efectos del hover.

Lo último que necesitamos hacer es definir cómo se verá la búsqueda cuando se hace hover sobre ella. En el siguiente fragmento la primera regla asegura que el formulario no tenga el brillo autogenerado por el navegador en el borde y que cuando estés usando la entrada - cuando escribas en ella - la caja de búsqueda permanezca expandida. La regla de la mitad tan sólo expande la entrada a un ancho completo en estado hover.

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 300px;
}

.container-2:hover input#search{
width: 300px;
}

.container-2:hover .icon{
  color: #93a2ad;
}

Lo último que succede en el código anterior es que en hover el icono cambia de color. Es sólo un pequeño detalle para mostrarle rápidamente al usuario que la caja de búsqueda está activa y trabajando, más que ser un input ocioso. El cambio no es implementado por una traducción.

#3. Incrementando el Tamaño del icono en Hover

De todos los cuatro ejemplos, este es el más sutil, tanto en términos de código como de efecto visual. En este caso el icono de búsqueda saltará ligeramente e incrementará su tamaño.

El HTML

Una vez más el marcado en HTML del icono y la caja de búsqueda es lo mismo como en el ejemplo anterior. La excepción, claro, es el div .container-3.

<div class="box">
  <div class="container-3">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

El CSS

El CSS de este ejemplo no es nada especial. Para la mayoría de las partes comienza muy similar a los primeros ejemplo donde el estado por defecto no es muy diferente del todo. El siguiente es el código para el contenedor y el input. Ten en cuenta que no hay una transición en el input esta vez.

.container-3{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-3 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}

Una vez más tenemos las reglas del placeholder.

.container-3 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-3 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-3 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-3 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Ahora, para su aspecto, el icono para este ejemplo también es el mismo. Es del mismo color, la misma posición y sucesivamente. Sin embargo, le he agregado una transición. Estas transiciones le apuntan a todas las propiedades, lo cual es un acercamiento más corto más que detallarlas individualmente.

.container-3 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;

   -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

Añadiendo los Efectos del Hover.

.container-3 input#search:focus, .container-3 input#search:active{
    outline:none; 
}

.container-3:hover .icon{
  margin-top: 16px;
  color: #93a2ad;

  -webkit-transform:scale(1.5); /* Safari and Chrome */
  -moz-transform:scale(1.5); /* Firefox */
  -ms-transform:scale(1.5); /* IE 9 */
  -o-transform:scale(1.5); /* Opera */
   transform:scale(1.5);
  }

Hay un par de cosas sucediendo en el código anterior. Primero que todo estamos cambiando el color del icono en el hover y moviéndolo a ser un poco más altoasí que está centrado verticalmente cuando es más grande. En segundo término, estamos añadiendo una transformación al elemento icono en el hover así que será de hecho 1.5 veces su tamaño original. Ya que la transición definida anteriormente fue configurada para impactar en todas las propiedades, aparece como si el icono creciera en tamaño en hover,

De nuevo, echa un vistazo a las Transiciones y Transformaciones en CSS3 desde Cero para aprender más sobre la propiedad de transformación.

#4. Botón en Hover.

Diferente a los últimos tres ejemplos, este en particular será más complejo. En hover, un botón se deslizará hacia arriba del input para dejarte continuar - como el Enviar o Ir El botón tendrá el icono de buscar dentro de él.

El HTML

<div class="box">
  <div class="container-4">
    <input type="search" id="search" placeholder="Search..." />
    <button class="icon"><i class="fa fa-search"></i></button>
  </div>
</div>

Aquí el HTML es un poco diferente. El input aún está allí, claro, pero el icono ahora está dentro del elemento botón el cual viene después del input. Es importante que el botón esté después del input ya que tiene relación con cómo el efecto hover será creado en el CSS.

El CSS

¡El CSS en este ejemplo es diferente así que presta atención! Abajo está el fragmente para darle estilo al contenedor. Primero, el position:relative se ha perdido; ya no es más importante ya que el icono no confía en él para ser ubicado encima del input. Sin embargo hemos hecho el overflow:hidden. Esto previene el botón de mostrarse cuando no está en hover. Técnicamente el botón que aparece se presenta a la derecha del input, pero gracias a overflow:hidden no se muestra cuando cae más allá del ancho del contenedor - el contenedor y el input tienen el mismo ancho.

.container-4{
  overflow: hidden;
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
}

Abajo el input no tiene la transición porque el elemento no está siendo afectado esta vez.

.container-4 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #fff;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

El siguiente es el fragmento para darle un nuevo color a los placeholders.

.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-4 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Abajo está el código para darle estilo al botón que aparece en hover. El truco para hacer que se deslice hacia adentro desde el lado, es ubicarlo detrás del input, y hacerlo invisible amenos de que esté en hover. El botón es el elemento que cambia - se mueve - por lo tanto es el único donde la transición está definida. Para hacer las cosas más simples, he definido la transición para impactar todas las propiedades.

.container-4 button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border: none;
  background: #232833;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

Añadiendo los Efectos del Hover

Para aparecer gradualmente el botón, necesita ser movido encima del input. Esto se hace através de un margen negativo. Previamente hemos establecido la opacidad del botón en 0 así que tenemos que resetearlo a 1 para que el botón pueda ser visible también.

La última regla sólo cambia el fondo del botón si haces hover sobre el botón. Está bien dejarle saber al usuario que el botón está activo y que puede hacerle clic para enviar la búsqueda; no hay sentido en tener un botón que parezca inactivo.

.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
    outline: none;
    opacity: 1;
    margin-left: -50px;
  }

  .container-4:hover button.icon:hover{
    background: white;
  }

Conclusión

¡Bien, esto nos trae al final de nuestros experimentos con CSS! Tomamos un formulario de búsquedas básico y utilizamos un pequeña selección de efectos para cambiar su comportamiento. ¿Cómo más sugieres cambiar el formulario de búsqueda como estos? ¿A qué otros aspectos aplicarías transiciones o transformaciones de CSS? ¡Déjanos saberlo en los comentarios!