¡Hemos Diseñado para ti una Felicitación muy Especial con Muchas Sorpresas!

Read this article in English

Ya estamos inmersos en Diciembre, mirando de cerca las navidades y con ellas otro año que se va y otro año en el que solo podemos decir GRACIAS. Gracias por leernos, comentarnos, compartirnos… Por estar cada semana juntos a través de nuestros artículos y proyectos. Sin vosotros, cada uno que pone su granito de arena (o copo de nieve) Silo Creativo no existiría.

Por eso no podemos más que daros mil gracias:

Por leernos aun haciendo frio, o estando en una isla desierta…
Por comentarnos incluso a veces solo para decirnos unas palabras alentadoras…
Por compartirnos y así llegar a lugares inimaginables…
Por utilizar nuestros recursos y enriquecer vuestros proyectos…
Por estar ahí… GRACIAS!

Como ya nos conocéis, sabéis que este mes, normalmente está lleno de novedades y este año no podía ser de otra manera. Ante todo felicitaros la Navidad y para celébralo, hemos diseñado una felicitación muy especial, y con muchas sorpresas.

Para agradecerte que sigas a nuestro lado, hemos preparado dos regalos navideños ¿Te los vas a perder? Solo tienes que subscribirte para descubrirlos!

Navega por la felicitacion navideña y descarga nuestros regalos

Si ya eres uno de nuestros subscritores, seguro que ya estas disfrutando de ellos (Si aun no los has visto, no olvides revisar tu buzón de entrada).

Recuerda que los regalos estarán disponibles hasta el 10 de Enero de 2016. ¡No te quedes sin ellos!

Os deseamos una Feliz Navidad y un gran Año 2016, en el que esperamos poder continuar juntos ! Deseamos que se cumplan todos vuestros sueños y proyectos y que está plagado de grandes ideas.

¿Cómo hemos diseñado esta felicitación?

A todo el mundo le gusta la navidad: regalos, amigos, ilusión, viajes…Es sin duda un buen momento para explorar nuevas cosas y plantearse nuevos retos. Es por ello que nos hemos lanzado a la piscina y hemos diseñado nuestra nueva felicitación navideña que es “ligeramente” diferente a la clásica felicitación impresa Navideña. Veamos cómo está diseñada:

Nada más acceder a la web encontrarás dos elementos bien diferenciados: por una lado un modal o mensaje principal centrado sobre un fondo lleno de ilustraciones. Comencemos por este elemento que contiene la felicitación navideña propiamente dicha. Para centrar este elemento hemos posicionado como absoluto el contenido del mismo y gracias a la propiedad CSS transform lo veremos siempre centrado independientemente de la resolución o dispositivo donde nos encontremos.

Propiedades y animaciones con CSS

Sobre el diseño de este elemento que nos gusta llamar carta, si te fijas bien en los bordes, no te recuerdan a los antiguos sobres de correo aéreo? Exacto, de ahí hemos tomado la inspiración para dar ese toque vintage. Los bordes inferior y superior muestran bloques rojos, azules y transparentes gracias a la propiedad repeating-linear-gradient con un poco más de presencia en la parte inferior que en la superior. Y el resultado es genial. Inspecciona el código si quieres aprender más sobre esta interesante propiedad.

Además de esto, el usuario puede cerrar este modal haciendo clic en el botón cancelar, y así poder ver el diseño completo. Esto hará que se oculte la carta y aparezca un pequeño icono de sobre en la parte superior derecha de la pantalla. Haciendo clic en él se volverá a mostrar la felicitación. Esto se realiza mediante una función de jQuery.

Por otro lado, hemos diseñado algunas divertidas ilustraciones con mucho movimiento usando solamente imágenes y CSS. Si, todo lo que ves es solo CSS gracias a la propiedad animation y a los @keyframes que nos permite mover las imágenes de izquierda a derecha o los fondos desde arriba hasta el punto que le indiquemos. La duración y el “delay” son muy importantes para controlar cuando la animación empieza y cuanto dura.

Formato de las imágenes y diseño responsive

Sobre el formato de las imágenes: generalmente el formato svg es más ligero que el png pero por contra, svg no tiene tanta compatibilidad entre navegadores como png. Por ello decidimos usar el formato png con transparencias para este diseño. Sin embargo será solo esta vez. Estamos convencidos de que el formato svg será el rey muy pronto para las ilustraciones en la web, ya que aportan más flexibilidad y escalabilidad.

Por último, veamos cómo es el comportamiento en responsive. Como puedes ver algunos elementos desaparecen si redimensionamos la ventana del navegador o si estamos visitando la web desde un dispositivo móvil. Por ejemplo, las montañas no se mostrarán en resoluciones inferiores a 800px ni en pantallas en formato vertical ya que si así fuera no dejarían ver al equipo de SiloCreativo paseando en trineo. Por ello, estos elementos, al estar cargados como background-image sólo se mostrarán si esa media query está activa. Así es como funciona mobile first!

Esperamos que este diseño te sirva para aprender algo nuevo! Nosotros lo hemos pasado genial haciéndolo. Feliz Navidad y gracias por leernos este año!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *