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.
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.
1. Cancionero Familiar Navideño
Esta bonita aplicación puede reproducir tus canciones favoritas de Navidad alojadas en SoundCloud. Las reglas de estilo se han escrito en el lenguaje de hoja de estilo LESS, y la función para reproducir música está proporcionada por un plugin de jQuery personalizado.
Los iconos de los copos de nieve y los árboles de Navidad del fondo otorgan una atmósfera solemne al diseño, y si pasas el ratón por encima de algunos elementos, también puedes encontrar efectos sutiles de CSS.
2. Árbol de Navidad Digital
Diseñar algo navideño siempre es un trabajo agradecido, ya que sus típicos elementos visuales pueden construirse de muchas maneras creativas. Este codepen es un buen ejemplo de esto. Al principio sólo se pueden ver triángulos coloridos, aparentemente sin relación con la navidad, pero al hacer clic en el botón Reveal, revelará un majestuoso árbol de Navidad. No es sólo una solución singular, sino que también recuerda a un videojuego.
3. Animación navideña con copos de nieve
No necesitas utilizar JavaScript necesariamente, si deseas crear una animación divertida para Navidad. En este Codepen, tanto la animación de la nieve como las imágenes de fondo se generan únicamente con CSS. Vale la pena examinar el código un poco, ya que demuestra las increíbles capacidades de CSS3. La imagen de fondo puede ser confundida incluso con un gráfico SVG real.
4. Santa on the run!
Santa on the run! es un divertido juego de JavaScript para las fiestas, que hace uso del framework phaser.js para juegos de HTML5. No hay demasiadas reglas en este juego: Santa corre infinitamente, o al menos hasta que se cae. Este Codepen te brinda una excelente oportunidad para entender cómo desarrollar un juego simple en JavaScript.
5. Secret Santa
Elegir un nombre del sombrero ha sido una forma popular en escuelas y oficinas de recoger los secretos de Santa. Este Codepen es más que una versión digital de esta tradición. Como utiliza vanilla JavaScript, puedes fácilmente incrustarlo en tu propia web. Sólo tienes que cambiar los nombres dentro de la variables dadas.
6. Bolas de navidad en CSS puro
Estas alegres bolas de Navidad están implementadas en puro CSS teniendo en cuenta las reglas del border-radius. Las diferentes partes de las bolas se fijan mediante la utilización de posiciones relativas calculadas con precisión.
Si deseas agregar rápidamente un ambiente de vacaciones a tu página web, sólo tiene que insertar algunas de estas bolas en los lugares apropiados con un color que coincida con el diseño general de la web.
7. Felicitación nevada
Puedes hacer que estos copos de nieve se muevan con el cursor del ratón si lo ejecutamos en nuestro escritorio, o por la inclinación de tu smartphone. Esta funcionalidad está proporcionada por JavaScript orientado a objetos que ha sido utilizado con inteligencia por el desarrollador para crear una clase personalizada para los copos de nieve.
Los copos de nieve mismos están implementados en CSS3, y para el fondo utiliza gradients. No hay ni una imagen en este Codepen.
8. Experimento de acordeón navideño
Este acordeón navideño es realmente bonito. Si pasas el ratón por encima de las pestañas, veras que el ancho se amplía y se ve mucho mejor el icono que representa cada pestaña. Si hacemos clic en ella, de repente suena un sonida y ocupará toda la página. Es interesante saber que este Codepen utiliza Scalable Vector Graphics (SVG) a los cuales se les ha dado estilo con CSS.
Los SVGs son más poderosos de lo que puede parecer a simple vista. Pueden ser colocados inteligentemenet y diseñados con las mismas reglas de estilo que utilizamos en los elementos HTML regulares.
9. Hombre de nieve en flat design
¿Quién dijo que un flat design tiene que ser aburrido? Este precioso muñeco de nieve puede agregar fácilmente el espíritu navideño en cualquier diseño. No se utilizan imágenes para crear el muñeco de nieve, que está completamente desarrollado en CSS. Vale la pena echar un vistazo al código CSS un poco, y ver cómo utiliza los pseudoselectores :before y :after para lograr el resultado deseado.
10. Copo de nieve en CSS3
Puedes facilitar la creación de imágenes en CSS3 mediante el uso de herramientas de desarrollo de aplicaciones para usuario avanzados. Este copo de CSS3 es un excelente ejemplo de esto.