Basado en un diseño hecho en photoshop aplicare  estilos a un sencillo formulario de búsqueda  utilizando css3.

Crearemos el código html, como se daran cuenta no se necesitan muchas lineas para este formulario

<form id="form">
<input id="busca" type="text" />
<input id="submit" type="submit" value="BUSCAR" /></form>

A continuación pasaremos a darle los estilos al elemento que tiene como id “form”, usando css3 le daremos  un degradado de fondo y sombras.

#form{
 background:#fff; /* Navegadores que no soportan css3 */
 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E8E8E8));
 background:-moz-linear-gradient(100% 100% 90deg, #E8E8E8, #FFFFFF);

/* Sombras */
 -webkit-box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, .3);
 -moz-box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, .3);
 box-shadow: inset 0px -2px 2px rgba(255, 255, 255, 1), 0px 2px 4px rgba(0, 0, 0, .3);

 padding: 12px;
 margin: 10% auto;
 width: 480px;
 height: 55px;
}

ahora procederemos a darle estilos al input text que tiene el id “busca” le pondremos borde redondeado.

#busca{
 /* Borde redondenado */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;

  /* Sombras */
  -webkit-box-shadow: 1px 1px 1px #FFF;
  -moz-box-shadow: 1px 1px 1px #FFF;
  box-shadow: 1px 1px 1px #FFF;

  padding:6px;
  width:345px;
  height:32px;
  border:1px solid #D9D9D9;
}

Ahora estilizaremos el input ”submit”

#submit{
 background:#86ACB5; /* Navegadores que no soportan css3 */
  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#77A5AE), to(#629099));
  background:-moz-linear-gradient(100% 100% 90deg, #629099, #77A5AE);

  /* Borde redondenado */
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;

  /* Sombras */
  -webkit-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, .4), 0px 1px 2px rgba(0, 0, 0, .3);
  -moz-box-shadow: inset 0px -1px 1px rgba(255, 255, 255, .4), 0px 1px 2px rgba(0, 0, 0, .3);
  box-shadow: inset 0px -1px 1px rgba(255, 255, 255, .4), 0px 1px 2px rgba(0, 0, 0, .3);

  float:right;
  width:100px;
  height:32px;

  color:#FFFFFF;
  text-shadow:0px 1px 3px #656565;

  cursor:pointer;
  border:0;/* Quitamos el borde que le da la sensación de relieve a este input*/
}

y ya se puede visualizar el formulario con los estilos, pero ocurre que el ancho de #form y el #busca se ven afectados por el padding que le asignamos  a cada uno.

para solucionar esto solo agregaremos la propiedad box-sizing a estos elementos

#form, #busca{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

El año pasado ya habia hecho un formulario parecido, pueden verlo aquí, pero en ese tiempo use mucho código para un formulario tan simple. Con el tiempo y la practica he ido mejorando en cuanto a la estrucutra html se trate.

Espero que este post les haya gustado, hasta la prox.