SummArg | Cursos y recursos para webmasters

16/12/2011

Campos de búsqueda en HTML y CSS

Buscamos y compilamos los mejores formularios de búsqueda en HTML y CSS, algunos pocos utilizando algún framework Javascript. Algunos utilizan varias imágenes para lograr mantener el aspecto en los navegadores mas viejos y otros utilizan CSS3 para animaciones, bordes e íconos. Esperamos les sea de utilidad.

 

Styling Default WordPress Search Forms

Tutorial con ejemplos muy simples listos para usar en el campo de búsqueda de un theme WordPress. Son códigos que utlizan CSS2 e imágenes, aptos para navegadores antiguos y muy personalizables.

Ir al tutorial

 

Digg, Cnet, MySQL & Bing Styles

Códigos para copiar y pegar que nos permiten obtener cuatro estilos específicos de formulario de búsqueda. Un buen punto de partida para nuestras creaciones.

Ir a sitio

 

Search Form con CSS3 y jQuery

Formulario de búsquedas listo para utilizar en cualquier website, con jQuery y CSS3, compatible con todos los navegadores.

Descargar | Demo

 

Accesible and sexy search box

Un formulario apto para los navegadores mas viejitos del mercado (especialmente IE6), utilizando HTML, CSS e imágenes de fondo.

Descargar

 

Search box con imagen de fondo

Código listo para utilizar con cualquier imagen de fondo que deseemos asignar a nuestro campo de búsqueda. Ideal para diseños muy sofisticados y complejos difíciles de llevar a CSS.

Ir a tutorial

 

Custom Search Bars con imágenes

Tutorial similar al anterior, pero el autor explica mas exhaustivamente los problemas que surgen con IE y el modo de tratarlo.

Ir al tutorial

 

OS X style searchbox

Código apto para todos los navegadores, utiliza HTML, CSS y Javascript. Muy elegante y moderno, fácil de aplicar a cualquier proyecto.

Ir a tutorial

 

Search box con CSS e Imágenes

Tutorial muy simple para lograr un search box cross browser con CSS e imágenes para los fondos. El código está disponible para la descarga.

Ir a tutorial | Demo

 

WebKit HTML5 Search Inputs

Tutorial para entender el funcionamiento de los search input en HTML5 de los navegadores WebKit, incluidas cuestiones de estilo, cantidad de búsquedas anteriores a mostrar, etc.

Ir al artículo

 

Beautiful CSS3 Search

Ir a tutorial | Demo

 

Create a Fancy Search Box using CSS

Ir al tutorial

 

Rocking CSS3 Search box

Ir al tutorial

 

How to create a cool and usable CSS3 search box

Ir al tutorial

 

Autogrow search

Descargar | Demo

 

Designing Search Boxes with HTML5 and CSS3

Varios diseños diferentes.

Ir a tutorial

 

Create a CSS3 Search form

Descargar | Demo

 

Style Your Website’s Search Field with JS/CSS

Descargar | Demo

 

CSS3 Search box inspired in apple.com

Ir al tutorial

 

Grooveshark Search with CSS3

Ir al tutorial

 

Tabbed Search bar using CSS and Javascript

Ir al tutorial

 

 

Dejar un comentario