Buscador elástico con jQuery y CSS

Seguramente más de uno se habrá fijado en el buscador de Apple. Nada más pinchar sobre él se hace más ancho para dar mayor cabida al texto de búsqueda, pocas cosas hay que haga Apple que luego no marquen tendencia en el diseño web y en todo tipo de diseños.
Hoy os dejo un buscador que hace lo mismo, se expande y además incorpora la famosa “x” que también podemos ver  en los buscadores de iPhone o iPad.

Me ha parecido muy interesante, visualmente me parece extraordinario, pero luego además la CSS es muy completa, usa degradados e incorpora también la integración de fuentes externas a las de sistema.
Os dejo aquí la dirección para poder ver la demo y descargaros los archivos.

• DEMO & DESCARGA

 MÁS EJEMPLOS JQUERY EN BOXTUFFS.COM

Una vez que entréis en Boxtuffs, os aconsejo que echéis un vistazo a todos el material que os ofrece, hay cosas realmente útiles y vistosas.

Share and Enjoy

Efectos jQuery para textos

Este es un efecto que venimos viendo en los nuevos diseños web.

En el artículo “Tendencias Diseño Web para 2012. SCROLL PARALLAX“, podéis ver varios ejemplos con imágenes y textos, que toman vida al hacer scroll sobre la página.

Hoy os dejo el código para realizar efectos con textos, podéis descargar el ejemplo y ver cómo se realizan los distintos efectos de zoom, rotate, fade, … Luego queda la imaginación y aplicar esto en vuestros diseños, el resultado es por lo menos “vistoso y sorprendente”, espero que os sirva.

• Toda la información y descarga en “Scrollorama” de John Polacek

Share and Enjoy

Tutorial de jQuery Mobile II. Transición de páginas

Ya hemos visto en Web App con jQuery Mobile. Tutorial I, cómo maquetar una página en HTML, y cómo hacer los enlaces para pasar de una página a otra, pues bien, ahora vamos a ver unos “efectos especiales” para hacer la Web Appmás atractiva.

jQuery Mobile incluye un conjunto de seis efectos de transición entre páginas, basados en CSS y que pueden aplicarse a cualquier vínculo de la página o formulario. Estos efectos los podréis ver en vuestro ordenador si navegáis con Chrome, espero y deseo que en un futuro cercano, podamos utilizar estos efectos también en diseño web tradicional.

También hay que resaltar, que alguna de las transiciones no se ve correctamente con algunas versiones antiguas de Android. En cualquier caso, es obvio que tanto los navegadores de Smartphone como los tradicionales, tendrán que acabar “tragándose” esta tecnología tarde o temprano.

CONTINUAR LEYENDO “Web App con jQuery Mobile. Transiciones de página. Tutorial II” »

Share and Enjoy

Creación de Patterns con CSS3

Hoy traemos a este Blog de Diseño Web, un ejemplo de cómo hacer un pattern con CSS3, más que un ejemplo, un par de utilidades que nos vendrán muy bien a la hora de diseñar nuestro background de fondo. Como siempre, ojo con las versiones de navegador, especialmente al Explorer.

En http://leaverou.me/css3patterns/ podemos encontrar varios ejemplos de patterns hechos con CSS. Lo mejor de todo es que estos ejemplos son editables, por lo que podréis customizarlos.

El segundo ejemplo, lo he encontrado en http://patternizer.com Una web en la que podrás diseñar tu propio pattern mediante un interface gráfico, para más tarde copiar el código CSS generado

Share and Enjoy

Efectos a imágenes con jQuery y CSS3

Diseño Web con jQuery y CSS3,…  Una vez más, vamos a poder comprobar cómo cada día son más las facilidades que nos aportan estas dos herramientas a la hora de diseñar para web.

En este caso vais a poder ver cómo con CSS3 y jQuery, es posible aplicar toda clase de estilos a una imagen. Bordes, brillos, sombras, contornos, reflejos,…

Una gran variedad de efectos que además de facilitarnos el tiempo de trabajo, nos ayuda a controlar el peso de nuestra web.

Podéis ver todos estos efectos y el modo de aplicarlos en http://webdesignerwall.com

Share and Enjoy