Cuenta regresiva con CSS y Javascript

Reloj 3D

Reloj 3D

Vistosa cuenta regresiva que simula los antiguos paneles que podíamos ver en los aeropuertos.

Podéis ver y descargar el código CSS y JS en CodePen.

VER DEMO Y DESCARGAR

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Efectos hover para botones con CSS3

Efectos CSS3 para botones

Efectos CSS3 para botones

El uso de botones realizados con CSS3 es ya una práctica habitual, reducen peso a la página y existen mil maneras de customizarlos para sustituir sin problema a casi cualquier imagen de botón. Hoy os dejo una colección de códigos realizados con CSS3 que además añade todo tipo de acciones a esos botones, aunque podrían aplicarse también a imágenes.

Podréis encontrar: animaciones 2D, transformaciones de bordes, transformaciones y movimientos con sombras, transformaciones tipo burbuja, o el típico curl de página.

CONTINUAR LEYENDO “Efectos hover para botones con CSS3” »

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Animación con HTML5 … SALVAJE !!!!

Animación en HTML5

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 !!!!” »

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Impresionante Portfolio Adaptativo con jQuery

Portfolio adaptativo en jQuery

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

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Configura y descarga tu Preload con CSS, GRATIS !!!

Preload online con CSS

Preload online con CSS

Con CSS Load puedes generar y descargar gratuitamente tu preload. No incluye ninguna imagen todo es puro CSS y además te ofrece la posibilidad de compatibilizar el código con todos los navegadores más importantes de la red.
Tienes dos tipos de preload, uno gráfico y otro con texto. En ambos casos puedes elegir entre varias animaciones, y en el de texto además es editable, es decir, puedes escribir lo que quieras en tu preload.

Todo es configurable, color principal, color de fondo, puedes dejar fondo transparente, elegir fuente de texto, …

CONFIGURAR Y DESCARGAR PRELOAD

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This

Menú Responsive para tu diseño web

El diseño de una web responsive, adapta su tamaño y arquitectura, a la resolución del dispositivo en el que la estamos viendo. Ya hemos visto como en una web de columnas, al reducir la resolución, las columnas se desplazan para colocarse una debajo de la otra, en el orden que hayamos establecido, pero ¿qué pasa con el menú?.

La mejor solución por diseño y sobre todo por usabilidad es la que presentamos hoy aquí. Se trata de convertir el menú horizontal en un menú desplegable, tal y como podéis ver en las imágenes que encontrareis más adelante.

Para una resolución grande, el menú aparece en horizontal, con una opción a continuación de la otra. Cuando bajamos la resolución de tal modo que no cabe en el ancho de la pantalla, convertimos esa única fila en tres, y si seguimos reduciendo la pantalla, lo que va a ocurrir es que las tres filas se van a convertir en un menú desplegable.

Como podréis comprobar cuando os descarguéis el código, el menú está limitado a 600px de ancho. Son 6 opciones de menú y cada una con un ancho de 100px. Es evidente que entonces, para cualquier soporte que tenga una resolución mayor a 600px, no tenemos que tener ningún problema, es decir, si utilizamos cualquier ordenador o una tablet como puede ser el iPad, el menú se verá tal y como fue diseñado, una lista con todos sus elementos en una misma fila.

A continuación, vamos a ver cómo se construye esta web y cómo se distingue en la CSS las distintas resoluciones.

CONTINUAR LEYENDO “Menú Responsive para tu diseño web” »

Comparte este Blog de Diseño Web

Share and Enjoy

Tags

Related Posts

Share This