¿Cómo hacer una galería de fotos igual que la de Google?

Posted by Omar Benyakhlef on abr 2, 2013 in jQuery | 2 comments

Galería de imágenes Google

Todos vosotros habréis visto la galería de imágenes de Google, al pinchar sobre cualquiera de los thumbnails, este se despliega con un efecto acordeón, insertando un espacio de información entre las demás miniaturas de la página.

En este post de diseño web, vais a poder acceder a toda la información para implementar una galería exactamente igual a la de Google en vuestro sitio web.

CONTINUAR LEYENDO “¿Cómo hacer una galería de fotos igual que la de Google?” »

Share and Enjoy

Animación con HTML5 … SALVAJE !!!!

Posted by Omar Benyakhlef on feb 6, 2013 in CSS, HTML, HTML5 | 3 comments

Animación en HTML5

Conocía la potencia del HTML5 para desarrollar movimiento en diseño web, pero no era consciente de la “salvaje” cantidad de posibilidades que nos ofrece. Unas posibilidades que serían seguramente más, si no fuese por la absurda incompetencia de navegadores como Explorer e incluso Firefox.

En esta impresionante web de la que hablamos hoy, además de mostrarnos cómo realizar animaciones con HTML5, podremos ver una serie de ejemplos web que seguro que os sorprenden.

Los ejemplos que vais a ver están desarrollados con CSS3, SVG, Canvas y WebGL

CONTINUAR LEYENDO “Animación con HTML5 … SALVAJE !!!!” »

Share and Enjoy

Espectacular menú 3D desplegable con CSS y jQuery !!!

Posted by Omar Benyakhlef on ene 29, 2013 in jQuery | 2 comments

Menú desplegable efecto 3D

Espectacular, mucho, ¿dónde colocarlo? eso ya es otra cosa…

El caso es que si quieres incorporar a tu diseño web un menú con efecto “persiana 3D”, este es el código que necesitas.
Tanto el efecto de desplegar como el de plegar, simulan gravedad. Además, podemos colocarlo de frente o simulando profundidad, creando así aún más sensación de elemento 3D. La fluidez del movimiento es muy buena y eso le hace más real.
Estoy seguro de que más de uno lo va a tener en cuenta para su próximo diseño web, y sobre todo que a nadie dejará indiferente

CONTINUAR LEYENDO “Espectacular menú 3D desplegable con CSS y jQuery !!!” »

Share and Enjoy

Impresionante Portfolio Adaptativo con jQuery

Posted by Omar Benyakhlef on dic 17, 2012 in CSS, jQuery | 0 comments

Portfolio adaptativo en jQuery

Se trata de un plugin de jQuery muy vistoso, intuitivo y lo más importante, “adaptativo“.
Las imágenes se amontonan por categorías, y al hacer clic sobre cada una de estas categorías, las imágenes que la forman se exparcen por la pantalla.

La distribución de las fotografías, se puede hacer utilizando diferentes transiciones CSS.  En el caso de que el navegador no soporte estas trancisiones, jQuery se encargará de hacer un repliegue sencillo.
Para poder agrupar las imágenes en su correspondiente categoría, utilizamos la etiqueta lidata-pile:

<lidata-pile="Group 1">

La distribución de imágenes es adaptativa, se reparten horizontalmente teniendo en cuenta el ancho de pantalla.

VER DEMO Y DESCARGAR CÓDIGO

Share and Enjoy

Manual de CSS3 GRATIS !!!

Posted by Omar Benyakhlef on oct 29, 2012 in CSS, Trucos CSS, Tutoriales | 1 comment

Sabido es que hoy en día en diseño web todo avanza muy deprisa, hay que estar siempre formándose y afortunadamente existen numerosos sitios a los que recurrir.

Hoy os dejo un manual de CSS3 en PDF. Se trata de una adaptación de Antonio Navajas @ajnavajas sobre el curso de Cristalab.

CONTINUAR LEYENDO “Manual de CSS3 GRATIS !!!” »

Share and Enjoy