Paneles deslizables con jQuery

Paneles deslizables en jQuery

Css-Triks es un blog de diseño web referente para muchos de nosotros.

Hace unos días encontré un post que me está sirviendo de mucha ayuda en un nuevo diseño web que tengo entre manos. Me parece genial, es muy ligero y es una solución muy buena para enseñar productos en una web.

Se trata de una galería que va mostrando y ocultando los divs que hemos definido en la página, con un efecto zoom.

Lo podéis descargar gratuitamente en el post original. Espero que os sirva.

CSS Más y más trucos

CSS Trucos

La evolución en el diseño web ha venido de la mano entre otros, pero sobre todo, de las nuevas CSS. Además de conseguir ahora páginas más ligeras, hemos podido añadir efectos especiales que antes sólo eran imaginables con flash. Son varias las tecnologías que ahora nos permiten dar movimiento a capas, movimientos suaves, incluso con efectos de aceleración.

Los menús que antes había que hacer con imágenes de sustitución, ahora se pueden hacer con una única imagen que cambia su posición mediante cambio de coordenadas.

En este post voy a dejar unos cuantos ejemplos sorprendentes de la cantidad de efectos y utilidades que se pueden hacer con CSS.

Acciones para Photoshop GRATIS !!!

Acciones para Photoshop

Este blog de diseño web, está lleno de enlaces con utilidades para Photoshop. Podéis encontrar todo tipo de pinceles, tutoriales o incluso psd para descargar e investigar. Pero faltaba algo, algo que suele ser útil en determinadas ocasiones,  las acciones.

No soy muy amigo de usarlas, pero reconozco que en ocasiones ayudan mucho sobre todo a ahorrarnos tiempo. De todos modos lo que es importante es ir controlando lo que hace la acción para adecuar los parámetros al fin que andamos buscando.

En este post podréis encontrar una primera entrega de  acciones para hacer todo tipo de efectos sobre vuestros diseños,

• Deviantart como no podía ser de otra forma tiene una inmensa galería de acciones para descargar.
• Turning Turnip nos trae unas acciones realmente útiles, entre ellas cabe destacar el efecto “cubo 3D” .
• Efecto Collage es uno de mis favoritos, divide una fotografía original en varias pequeñas, las corta y las deja colocadas como se de cartas de una baraja se tratase.
• Efecto cuaderno de espiral, otra genial acción de planosFX, parecerá que hemos diseñado un cuaderno.
• Foto Vintage, otra acción más de Deviantart.
• Efecto puzzle, creamos un puzzle a partir de nuestra imagen.
• Efecto Comic, bien divertido siempre y cuando vayas controlando la acción paso a paso.

Sexy Curls con jQuery…

Sexy Curls jQuery

Hace muy poco tiempo, en diseño web, era imposible ver efectos que no fuesen producidos y postproducidos con flash. Hoy en día y desde hace un tiempo son numerosos los distintos tipos de efecto que podemos encontrar en cualquier diseño web.

Hoy os dejo un nuevo plugin (al menos para mi), el “Sexy Curl” de jQuery. Sexy porque este efecto “desnuda” la pantalla dejando ver el código html que hay por debajo.

Este efecto fue muy utilizado en photoshop hace años, en los que era muy frecuente ver el efecto curl en numerosas fotos y publicidad.

En el margen superior derecho aparece un efecto de página doblada, al coger con el ratón la esquina y arrastrarla, podemos ver cómo aparece todo el código html que compone la página. No se puede decir que sea un efecto útil, que ayude a la usabiliad, es simplemente una “chulería más” de esta increíble librería Ajax.

Ver el ejemplo

Cambiar el tamaño de fuente en función del párrafo con Javascript

cambiar font-size con javascript

En diseño web cada vez encontramos más diseños en los que se combinan distintos tamaños de fuente. Esta práctica tan utilizada en diseño impreso, ahora y quizás debido a los blogs, se ve reflejada en muchos de los mejores diseños que vemos por la red.
Echando un vistazo a CSSTricks he encontrado un interesantísimo artículo en el que nos cuentan como cambiar el tamaño de la fuente de un párrafo en función de la cantidad de letras que contiene.

Chri Coyier, el autor de esta idea, nos cuenta cómo hacerlo usando javascript y nos deja dos ejemplos, uno usando Mootools y el otro usando jQuery.

A continuación os dejo los dos ejemplos, y os recomiendo que echéis un vistazo al post, porque de los comentarios también podréis aprovechar más de una idea que simplifica el código.

Reflejar imágenes con Mootools

Reflejo automático en tus imágenes

En los últimos tiempos y seguramente gracias a la gente de Apple, hemos podido ver cómo el diseño web se llenaba de reflejos, de imágenes que se reflejan en el suelo dando una sensación de profundidad.

Si vamos a hacer un diseño en el que la imagen va a permanecer, cogemos el photoshop y en pocos pasos le crearemos el efecto deseado, pero si se trata de una página dinámica en la que queremos aplicar ese efecto a la imagen que en esos momentos esté apareciendo, lo más cómodo será usar este script.

Como vamos a ver, el uso es verdaderamente sencillo y las ventajas enormes.