Scrollbar con jQuery y CSS

En diseño web cada vez se ve menos el scroll. De todos modos, hay veces en los que es necesario y si además podemos meter una barra diseñada por nosotros y ocultarla, mejor que mejor.

Este código nos permite ocultar la barra de desplazamiento, apareciendo cuando nos situamos encima de la zona de acción. Un ejemplo que podemos ver en la actividad en tiempo real de Facebook. Este ejemplo está realizado con  jQuery y CSS.

CONTINUAR LEYENDO “Scrollbar con jScrollplane. jQuery” »

Share and Enjoy

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

Checkbox y Radio Buttons con jQuery y CSS

No me canso de decir que jQuery ha sido la revolución del Diseño Web.

Aquí, una prueba más. Se acabaron los feos y aburridos Checkbox y Radio buttons, damos la bienvenida a la imaginación aplicada al diseño web. Con un poco de CSS y jQuery, maratz.com nos enseña a hacer estos vistosos diseños que podéis ver en la imagen del post.

Podéis ver el funcionamiento y descargaros todo el código necesario. Obviamente ya es cosa de cada uno el personalizar las CSS para llevar esta técnica a nuestros diseños web.

• VER CÓMO FUNCIONA Y DESCARGAR CÓDIGO EN WWW.MARATZ.COM

Share and Enjoy

TopScroll con CSS y jQuery

Los blogs supusieron un cambio radical en el diseño web. Las páginas pasaban a ser mucho más largas de lo que hasta ahora habían sido.

La navegación vertical se hace interminable en numerosos blogs, en la mayoría de las ocasiones no perjudica al usuario, ya que navegamos viendo pasar los encabezados de los post por curiosidad o en nuestra trayectoria para llegar hasta un contenido que sea de nuestro agrado.

Siempre es preferible usar la rueda del ratón para hacer scroll a través de los post o productos de una tienda, que tener que ir paginando y cargando nuevas páginas. Incluso ahora, tenemos la posibilidad de ir cargando contenidos de manera controlada para hacer la página menos pesada en origen, dando así mayor rapidez de navegación al usuario.

CONTINUAR LEYENDO “Scroll to top con jQuery” »

Share and Enjoy

Generador de texto curvo en CSS y HTML5

Gracias al HTML5 el diseño web está viendo cómo paso a paso van cayendo todas las barreras que hasta ahora nos limitaban como diseñadores.

Gracias a CSSWarp ahora podemos diseñar un texto como si estuviésemos trabajando con Ilustrator. Con CSSWarp podemos rotar, inclinar, curvar el texto de tal modo que nos permite hacer cualquier diseño con él y luego obtenerlo como código HTML. Además también nos permite seleccionar cualquier tipo de fuente de Google Web Fonts, lo que lo convierte ahora mismo en la herramienta más potente para generar texto en CSS y HTML.

El uso no podría ser más simple, una pantalla gráfica nos ayuda a generar el diseño y una vez finalizado no tenemos más que pulsar sobre el botón “Generar HTML”, sencillamente GENIAL !!!

• IR A CSSWARP

Share and Enjoy