Buscador con transiciones CSS

Las animaciones CSS3 son utilizadas cuando necesitas dar movimiento a un elemento dentro de una página web. Animar un elemento por medio de CSS entrega mayor control a diferencia de las transiciones CSS su principal diferencia es que en una animación puedes controlar estados intermedios basados en inicio, fin o porcentajes de tiempo transcurrido mientras que en una transición solo puedes interactuar con un estado inicial y final.

Un claro ejemplo para diferenciar estas dos propiedades puede ser un enlace o botón, cuando pasas el mouse sobre uno de ellos y cambia de un color a otro existe un tiempo de demora entre la transición inicial y final, lo anterior es una transición. Si este botón o enlace se mueve desde un punto a otro, amplía o reduce su tamaño, aplica una transformación en determinado tiempo entonces hablamos de una animación.

El desarrollo de una barra de navegación responsive estándar con Bootstrap es sencillo. La cosa se complica en dispositivos móviles. De seguro han visto muchos sitios web con este tipo de botón buscar animado, que generalmente ayudan mucho cuando desarrollamos para smartphones. bueno hoy aprenderemos a realizar dicho buscador de una manera muy sencilla, con tan solo html5 y css3, paso a explicarlo a continuación.

Ejemplo 1

La clave para generar este buscador desplegable reside en la interacción entre el label y el input. Cuando hacemos click en el icono que se encuentra en la etiqueta label, el navegador establece el foco en el campo de input enlazado.

Una vez el elemento de input recibe el foco, modifica su ancho y gracias a transiciones CSS3 genera el efecto. Un punto a tener en cuenta es que el campo input cuando esta plegado debe tener al menos un ancho de 1px para que la transición funcione correctamente.

La etiqueta de form se encarga de generar la presentación con border.

<div id="container">
<form role="search" method="get" id="searchform" action="">
  <label for="s">
    <i class="icon-search"></i>
  </label>
  <input type="text" value="" placeholder="Buscar" class="" id="s" />
</form>
</div>

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.css";
 html {
     background: #000;
}
 body {
     font-size: 30px;
}
 #container {
     margin: auto;
     padding: 3em 0 0;
     text-align: center;
}
 #searchform {
     display: inline;
     font-size: 1em;
     border-radius: 8em;
     border: 0.1em solid #dad0be;
     box-shadow: 0 0 0.3em rgba(60,60,60,0.4);
     padding: 0.3em;
     background: white;
}
 #s {
     transition: all 0.2s ease-out;
     width: 1px;
     border-radius: 0;
     box-shadow: none;
     outline: none;
     padding: 0;
     margin: 0;
     border: 0;
     background-color: transparent;
     opacity: 0;
}
 #s:focus {
     width: 8em;
     opacity: 1;
}
 label {
     padding-left: 1px;
     display: inline-block;
     margin-top: 0.3em;
     color: #dad0be;
     text-shadow: 0 0 0.1em rgba(60,60,60,0.3);
     position: relative;
     left: 0.1em;
}
 

Ver resultado

Ejemplo 2

Demo 1: Input desplegable

.demo, .demo-2 {
    position:relative;
    height:100px;
    width:500px;
}
.demo .form-search, .demo-2 .form-search {
    position:absolute;
    right:0px;
    top:0px;
}
.demo .form-search input[type=text],
.demo-2 .form-search input[type=text] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
    border: solid 1px #ccc;
    padding: 9px 18px;
    width: 200px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.demo-2 .form-search input[type=text] {
    width:60px;
    position:absolute;
    right:0px;
    z-index:1000;
    padding:8px 12px;
    cursor:pointer;
}
.demo-2 .form-search div.input-group {
    width:60px;
}
.demo .form-search input[type=text]:focus {
    width: 350px;
    background-color: #fff;
}
.demo-2 .form-search input[type=text]:focus {
    position:absolute;
    right:60px;
    width:250px;
}
.demo .form-search button.btn,
.demo-2 .form-search button.btn {
    padding:16px 12px;
    border-top-right-radius:4px;
    border-bottom-right-radius: 4px;
    cursor:not-allowed;
}
.demo-2 .form-search button.btn {
  padding:15px 12px;
}

<div class="demo">
  <form class="form-search">
    <div class="input-group">
      <input class="form-control form-text" maxlength="128" placeholder="Buscar" size="15" type="text" />
      <span class="input-group-btn"><button class="btn btn-primary"><i class="fa fa-search fa-lg">&nbsp;</i></button></span>
    </div>
  </form>
</div>

Demo 2: Input desplegable que oculta el botón. Cuando el espacio es muy reducido en la barra de navegación (Ej: Smartphones)

/* Lo primero es posicionar el formulario para asegurarnos que el efecto se produce de derecha a izquierda */
.navbar-form {
    position:absolute;
    right:0px;
    top:0px;
}

/* Definimos las transiciones */
.navbar-form .form-control[type=text] {
    background: transparent;
    display:inline-block;
    transition: all .5s;
}
/* Al situar el puntero en el campo de búsqueda este cambia su color de fondo a blanco, el color de la letra, el borde y la sombra */
.navbar-form .form-control[type=text]:focus {
    background-color: #fff;
    border-color: #729fcf;
    color:#333;
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* Para pantallas grandes hacemos que el formulario se despliegue con amplitud ya que disponemos de espacio en la barra de navegación, la busqueda se ejecuta con intro o pinchando en el icono de la lupa */
@media (min-width:1200px) {
    .navbar-form input.form-control[type=text] { width: 160px; }
    .navbar-form input.form-control[type=text]:focus { width: 350px; }
}

/* Para pantallas menores reducimos el campo de busqueda y hacemos que se despliegue cuando hacemos focus sobre el icono de la lupa. La busqueda se ejecuta con intro o pinchando de nuevo en el icono de la lupa */
@media (max-width: 1200px) {
    .navbar-form .form-control[type=text] {
        width:40px;
        position:absolute;
        right:0px;
        z-index:1000;
        padding:8px 12px;
        cursor:pointer;
    }
    .navbar-form,
    .navbar-form div.input-group {
        width:40px;
        height:40px;
    }
    .navbar-form .form-control[type=text]:focus {
        position:absolute;
        right:40px;
        width:250px;
    }
}

/* Para pantallas de smartphones ajustamos el ancho del campo de busqueda */
@media (max-width: 375px) {
    .navbar-form .form-control[type=text]:focus {
        width:150px;
    }
}

Ver resultado

Ejemplo 3

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.

@import "https://tutorialesenlinea.futbolgratis.org/engine/classes/min/index.php?charset=utf-8&f=/templates/Tutorialesenlinea-es/estilo/fontawesome.min.css";

.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}
.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;
}
.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;  
}
.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}
.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;
}

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

Ver resultados