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.