Buscador animado con CSS3 tipo Apple

Hola, en este nuevo tutorial de tutosytips, vamos a ver como hacer un campo de búsqueda para nuestro sitio tomando como referencia el que utiliza Apple en su website. Ellos hacen esto posible gracias a imágenes sprite que cambian de estado, nosotros vamos a utilizar solo CSS y algunas características avanzadas de CSS3, Vamos a lograr esto sin necesidad de utilizar una sola imagen.

Asi, que vamos a comenzar.

EL HTML

En el HTML no tenemos algo del otro mundo, tenemos una etiqueta de formulario <form> y dentro una etiqueta <input> que nos sirve para hacer la caja para introducir la búsqueda. Podemos añadir el atributo placeholder para definir un texto inicial, pero para este ejercicio lo dejamos así.

EL CSS

El Css lo vamos a ver por partes.

El código anterior vemos los estilos de la barra que nos contiene el buscador, tenemos una sombra, alto y padding y también un degradado gracias a css3, esto aunque parece complicado lo podemos hacer gracias a una herramienta que nos genera este tipo de degradados online en css3, se trata de Ultimate CSS Gradient Generator.

Generamos el degradado, copiamos el codigo y listo..

En el código de los estilos para la etiqueta form, le damos un borde y border-radius para darle la forma de ovalo, box shadows para generar la sombra, alto, padding, posición absoluta y lo posicionamos a la derecha.

y por ultimo, damos los estilos al campo de texto, a la etiqueta input, primero redondeamos los bordes y le damos none para que no nos muestre bordes, le damos un color blanco al texto ya que el fondo es el div buscador que es un poco oscuro y esta caja será transparente en su estado norma, en background usamos la opción data: URL que nos permite la inclusión de pequeños elementos de datos en línea como si fueran referenciados hacia una fuente externa, esto lo utilizamos para generar la lupa del buscador de una forma dinámica y de ancho le damos 100px y aplicamos la transición de 0.5 milisegundos que nos hará suave el paso o cambio de tamaño del buscador y lo especificamos para los diferentes navegadores según sus prefijos.
Y en el estado hover de los input que es el pseudo-clase: focus es decir cuando este seleccionado o situado sobre le aplicamos los demás estilos para que nos haga la transición, cambiamos el color de texto, ampliamos la caja a 250px y sombra de texto, y cambiamos la imagen por una lupa de color oscuro ya que tenemos el fondo blanco. Estos cambios se harán transitivamente o suavemente ya que le aplicamos una transición de 0.5s.

Y eso es todo, ya tenemos un buscador con características de css3 parecido al que utiliza Apple en su website, pero nosotros lo hicimos sin utilizar ninguna imagen, solo con un poco de código HTML y CSS.

Nos vemos en otro tutosytips!!.

——–

——–

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

7 Respuestas

  1. jacko dice:

    Muy nueno brother, gracias por el tuto..

  2. CirtDesign dice:

    Que buena web!… te felicito

  3. lo que te digo es que al momento de hacer la busqueda se despliegue con opciones asi como apple y eso se hace con el framewook de jquery y lo conecta con la base de datos, en este caso mi base de datos es de musica, lo que buscaria serian canciones.
    OTRA COSA: algun script para que funcione con el navegador internet explorer 8, 9. espero sus respuestas
    ALGUN script para que funcione


    • — Base de datos: zonahit

      — ——————————————————–


      — Estructura de tabla para la tabla artistas

      CREATE TABLE artistas (
      id int(11) NOT NULL auto_increment,
      genero varchar(75) collate utf8_spanish2_ci NOT NULL default ”,
      artista varchar(75) collate utf8_spanish2_ci NOT NULL default ”,
      Hits int(11) NOT NULL default ‘0’,
      PRIMARY KEY (id),
      KEY artista (artista)
      ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_spanish2_ci AUTO_INCREMENT=1848 ;


      — Volcar la base de datos para la tabla artistas

      INSERT INTO artistas VALUES (2, ‘Trance’, ‘Cascada’, 0);
      INSERT INTO artistas VALUES (3, ‘Trance’, ‘Dufpunk’, 0);
      INSERT INTO artistas VALUES (4, ‘Alternativos’, ‘Ac Dc’, 0);
      INSERT INTO artistas VALUES (5, ‘Alternativos’, ‘Aerosmith’, 1);
      INSERT INTO artistas VALUES (6, ‘Alternativos’, ‘AFI’, 0);
      INSERT INTO artistas VALUES (7, ‘Alternativos’, ‘Airbag’, 0);
      — ——————————————————–


      — Estructura de tabla para la tabla canciones

      CREATE TABLE canciones (
      id int(11) NOT NULL auto_increment,
      genero varchar(250) collate utf8_spanish2_ci NOT NULL default ”,
      artista varchar(250) collate utf8_spanish2_ci NOT NULL default ”,
      cancion varchar(250) collate utf8_spanish2_ci NOT NULL default ”,
      url varchar(250) collate utf8_spanish2_ci NOT NULL default ”,
      Hits int(11) NOT NULL default ‘0’,
      PRIMARY KEY (id)
      ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_spanish2_ci AUTO_INCREMENT=38471 ;


      — Volcar la base de datos para la tabla canciones

      INSERT INTO canciones VALUES (36815, ‘Trance’, ‘Cascada’, ‘Bad Boy’, ‘http://wwww.rjproducciones.net.tc/ns1/50704599923.jan’, 0);
      INSERT INTO canciones VALUES (36816, ‘Alternativos’, ‘Ac Dc’, ‘How Do You Do’, ‘http://wwww.rjproducciones.net.tc/ns1/48067284123.jan’, 0);
      INSERT INTO canciones VALUES (36817, ‘Alternativos’, ‘Aerosmith’, ‘One More Night’, ‘http://wwww.rjproducciones.net.tc/ns1/26225297323.jan’, 0);

  4. muy entendible el foro y el buscador de apple muy bueno.
    amigo Johan muchas gracias por publicarlo.
    si puedes agregar una pequeña base de datos para conectar conel buscador y hacer una busqueda real algo parecido a apple, tengo entendido que se utiliza jquery pero no se como; seria bueno que lo publiques ya que muchos quieren una demostracion…
    SALUDOS

  5. Eliseo dice:

    ese es el de apple no?