20 Codepens experimentales y navideños - Parte 2

CodePen es la zona donde los desarrolladores de aplicaciones con talento suelen jugar, un lugar donde siempre se pueden encontrar proyectos interesantes para inspirarte y ver lo que otros desarrolladores están haciendo para coger puntos en tendencias. La navidad es un buen momento para sorprender a tus seres queridos con proyectos personales creativos, o para dar las gracias a tus clientes con diseños de vanguardia frescos que ayuden a despertar la alegría en estas fiestas. Hace pocas horas publicamos la primera parte, ahora puedes disfrutar de la segunda.

En este artículos vamos a echar un vistazo a 20 experimentos impresionantes navideños en CodePen, en los que puedes encontrar inspiración para crear tus propios diseños.

Botón Navideño

Lo diseños inteligentes con frecuencia optan por soluciones sutiles, al igual que el botón navideño de este Codepen. El fondo rojo oscuro es una opción perfecta para un diseño de Navidad. No todo tiene que ser de color verde después de todo...

Los colores, los gradientes, el tipo de letra y el efecto hover hacen que este botón sea muy elegante y solemne. Solo necesitas unos pocos de ellos para decorar de forma rápida un sitio web para Navidad.

Feliz Navidad Parallax

Si te gusta el scroll parallax, ¿por qué no utilizarlo tambien en tus diseños para las vacaciones? El desarrollador de este inteligente Codepen experimentó con el efecto, y para ello se utiliza el plugin Parallax.js de jQuery de una manera poco común. El efecto de desplazamiento no es vertical, como de costumbre, sino horizontal. El ambiente navideño se intensifica por la impresionante nevada

Si tuviera que elegir un defecto de este Codepen, sería la elección del color: los símbolos blancos sobre el fondo blanco, debilita significativamente la accesibilidad del diseño.

Papel de regalo navideño

Puedes crear un papel de regalo único con envoltorio navideño con la ayuda de CSS3. El desarrollador de este Codepen no solo muestra uno, sino seis variantes del mismo. Los impresionantes patrones se logran mediante la utilización inteligente de los gradientes de CSS y la propiedad background-blend-mode.

Regalo dentro de regalo dentro de...

Este creativo diseño se inspiró en las muñecas rusas tradicionales (una muñeca dentro de una muñeca). Si abres la caja exterior haciendo clic en élla, aparece una caja interior que es también, a su vez, la caja exterior de otra caja interior. Esta funcionalidad está implementada en jQuery, y los lugares exactos de las cajas se fijan con la ayuda de las reglas de posición absoluta y relativa en el archivo CSS.

Caja de regalo

Si te las arreglas para quitar la cinta de este regalo arrastrándola fuera, podrás echar un vistazo al efecto de la cáscara de papel supercool que revela el contenido del interior del regalo. Puedes leer el tutorial completo en el sitio web del desarrollador, ya que es un truco que, definitivamente, vale la pena aprender. Si lo que deseas es utilizar el código, puedes clonarlo desde GitHub también.

Happy Holidays en canvas animado

La Navidad puede ser un buen momento para experimentar con cosas nuevas, al igual que hizo este desarrollador en este Codepen utilizando HTML5 Canvas como un fondo animado. El canvas está antes que el contenido (Happy Holidays!) en el archivo HTML, y se configura como un fondo con la ayuda del posicionamiento CSS.

El Codepen también utiliza un script de animación de fondos, incluido como un archivo JavaScript independiente.

Tarjeta de regalo UI

Esta tarjeta de regalo llamativa no es sólo para Navidad, se puede utilizar en cualquier momento cuando quieras sorprender a tus usuarios con un regalo en tu sitio web. No se basa en JavaScript, ya que está completamente escrito en el lenguaje de estilo Sass.

El diseño hace uso de la propiedad CSS3 clip-path que permite a los desarrolladores mostrar sólo un área específica de un elemento, en lugar de mostrarlo entero.

Tarjeta de felicitación de Navidad en puro CSS

Este Santa risueño - utilizando sólo HTML y CSS3 - te puede dar la oportunidad de entender cómo la sintaxis de animación por fotogramas clave puede utilizarse en la práctica. En CSS3 puedes utilizar las reglas de keyframes  para crear una animación, y entonces podrás enlazar esta animación a un elemento concreto mediante el uso de la propiedad animation de CSS3.

Necesitas agregar el nombre del fotograma clave como el primer valor de la propiedad animation, al igual que el desarrollador hizo con los fotogramas clave personalizados llamados bodyLaugh, beardLaugh, headLaugh y mouthLaugh, creados específicamente para esta Codepen.

Xmas Cracker

Si pasas el ratón por encima de este impresionante Xmas Cracker, revelará un mensaje navideño único, el cual es una estupenda manera de desear Feliz Navidad a tus visitantes. El HTML está escrito en HAML, mientras que las reglas de estilo están potenciadas por Sass.

Luces de Navidad

Estas luces de Navidad destellantes pueden dar rápidamente un ambiente único a cualquier sitio web. El código front-end está escrito en HAML que compila en HTML; y Sass que compila en CSS y jQuery.

El efecto brillante animado se logra mediante la reglas de keyframes proporcionadas por CSS3. Los colores de los leds se encuentran en el archivo de jQuery, añadiendo 50 grados al valor Hue del anterior led utilizando la escala de color HSL.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP