Tecnología y Coaching para Emprendedores

Crea un Campo de Búsqueda con CSS3

css3

En este artículo vamos a aprender a hacer un campo de búsqueda similar al que tenemos aquí en la barra lateral. El campo de búsqueda es uno de los elementos más importantes para la usabilidad, ya que permite encontrar fácilmente aquello que se anda buscando. En este tutorial veremos como crear un campo de búsqueda a partir de pseudoelementos de CSS3.

El resultado final será este campo  de búsqueda:

 

Código HTML:

   <form id="searchform">
        <input type="text" placeholder="Buscar aqu&iacute;..." required>
        <button type="submit">Buscar</button>
    </form>	

 

Código CSS3:


#searchform {
    width: 280px;
	height:30px;
    padding: 8px;
	margin:50px auto;
    background: #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 2px 0 rgba(255,255,255,.5);
}

#searchform input {
    width: 190px;
	height:20px;
    padding: 5px;
    float: left;
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;
	box-shadow: 0 1px 1px rgba(0,0,0,.4) inset;
}

#searchform input:focus {
    outline: 0;
	height:21px;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

#searchform input:-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

#searchform input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

#searchform input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    

#searchform button {
    position: relative;
    float: right;
    border: 0;
    cursor: pointer;
    height: 30px;
    width: 80px;
    font-size:15px;
    color: #fff;
    background: #438cdb;
    border-radius: 0 3px 3px 0;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   

#searchform button:hover{
    background: #2672e0;
}	

#searchform button:active,
#searchform button:focus{
    background: #2672e0;
}

#searchform button:before { /* flecha */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #438cdb transparent;
    top: 8px;
    left: -5px;
}

#searchform button:hover:before{
    border-right-color: #2672e0;
}

#searchform button:focus:before{
    border-right-color: #2672e0;
}    

El resultado es un campo de búsqueda muy parecido al de CreativaSfera, con pequeñas modificaciones, como son el tamaño de letra, cursivas, etc. Podéis usar el código sin problemas para vuestros diseños, pero mejor sed un poco creativos y darle un toque personal.


Comentarios

  • visual impact

    I have been browsing online more than 3 hours today,
    yet I never found any interesting article like yours.
    It is pretty worth enough for me. Personally, if all site owners and bloggers made good content
    as you did, the web will be much more useful than ever before.

  • Alfonso López

    Buenas Sandra.

    Me podrias indicar que hay que hacer para que la busqueda sea dentro de tu web y no se vaya a google para buscarlo como he encontrado en muchos sitios?.

    Espero tu respuesta.

    Muchas gracias y genial tu web!

    • Sandra

      Hola Alfonso, has de programar un formulario de búsqueda interno con PHP o tecnologías similares o usar un CMS. Un saludo!