20 proyectos navideños impresionantes ocultos en CodePen

CodePen es un área de juegos en línea para desarrolladores de front-end con talento, un lugar donde siempre puedes encontrar proyectos geniales para ampliar tus horizontes y ver qué hacen otros desarrolladores. Las vacaciones de fin de año son un buen momento para sorprender a sus seres queridos con proyectos creativos y personales, o para agradecer a sus clientes con algunos diseños modernos e innovadores que ayudarán a animar las fiestas..

En este post vamos a echar un vistazo a 20 impresionantes experimentos navideños en CodePen, que puedes usar como inspiración para crear tus propios diseños.

1. Cancionero navideño familiar

Esta encantadora aplicación Family Christmas Songbook puede reproducir tus canciones de Navidad favoritas alojadas en SoundCloud. Las reglas de estilo están escritas en el lenguaje de la hoja de estilo MENOS, y la funcionalidad del reproductor de música se proporciona mediante un complemento jQuery personalizado.

Los iconos de copos de nieve y árboles de Navidad en el fondo le dan una atmósfera solemne al diseño, y si pasas el cursor sobre el bolígrafo también puedes encontrar algunos efectos CSS sutiles.

2. Árbol de navidad digital

Diseñar para Navidad siempre es un trabajo agradecido, ya que sus elementos visuales típicos se pueden construir de muchas formas creativas. Esta pluma es un buen ejemplo para esto. Al principio solo puedes ver triángulos de colores, aparentemente no relacionados con los días festivos, pero cuando haces clic en el botón Revelar, se agrupan en un árbol de Navidad. No es solo una solución única, sino también una reminiscencia de un juego más simple..

3. Animación navideña con nevadas.

No necesariamente necesitas usar JavaScript, si quieres crear una animación genial para Navidad. En este lápiz, tanto la animación de nevadas como las imágenes de fondo se crean únicamente en CSS. Vale la pena examinar el código un poco, ya que muestra las increíbles capacidades de CSS3. La imagen de fondo puede incluso confundirse con un gráfico SVG real.

4. Santa en la carrera!

Santa en la carrera! es un divertido juego de JavaScript para las vacaciones que utiliza el marco del juego HTML5 phaser.js. No hay demasiadas reglas en este juego: Papá Noel corre infinitamente, o al menos hasta que se caiga. Este bolígrafo te da una excelente oportunidad para entender cómo escribir un juego más simple en JavaScript.

5. Selector secreto de Santa

Elegir un nombre de un sombrero ha sido una forma popular en las escuelas y oficinas para elegir Secret Santas: esta pluma es simplemente una versión digital de esta tradición. Como solo utiliza JavaScript de vainilla, puede incrustarlo fácilmente en su propio sitio. Solo cambia los nombres dentro de la variable give.

6. Bolas de Navidad en CSS puro

Estas alegres bolas navideñas están escritas en CSS puro, aprovechando las reglas del radio del borde. Las diferentes partes de las bolas se unen utilizando posiciones relativas calculadas con precisión.

Si desea agregar rápidamente un ambiente de vacaciones a una página web, simplemente inserte algunas de estas bolas en los lugares apropiados en un color que coincida con el diseño general del sitio.

7. Copos de nieve movibles

Puede hacer que estos copos de nieve se muevan al pasar sobre ellos en un escritorio o inclinando su teléfono inteligente. La funcionalidad es proporcionada por JavaScript orientado a objetos que el desarrollador utiliza inteligentemente para crear una clase de copo de nieve personalizada.

Los propios copos de nieve están construidos en CSS3, y el fondo usa gradientes, no hay imágenes en este bolígrafo..

8. Experimento de acordeón de vacaciones

Este acordeón de vacaciones es simplemente hermoso. Si se desplaza sobre una pestaña, se enfoca al expandirse un poco, y si hace clic en ella, de repente aparece y cubre toda la página. Es interesante notar que esta pluma usa gráficos vectoriales escalables (SVG) que están diseñados con estilo CSS.

Los SVG son más poderosos de lo que parecen a primera vista, pueden posicionarse de manera inteligente y diseñarse con las mismas reglas de estilo que usamos con elementos HTML normales.

9. Flat Pure CSS Snowman

¿Quién dijo que el diseño plano debe ser aburrido? Este encantador muñeco de nieve puede agregar fácilmente el espíritu navideño a cualquier diseño. No hay imágenes utilizadas para el muñeco de nieve, está completamente escrito en CSS. Vale la pena echar un vistazo al código CSS y ver cómo el desarrollador utiliza: antes y después de pseudo selectores para lograr el resultado deseado..

10. CSS3 Snowflake

Puede facilitar la creación de imágenes solo para CSS3 mediante el uso de herramientas avanzadas de desarrollo front-end; Este copo de nieve CSS3 bien diseñado es un excelente ejemplo de esto. El desarrollador hizo uso del lenguaje de plantillas Jade que se compila en HTML y del preprocesador Sass CSS para implementar este impresionante diseño de copo de nieve..

11. botón de navidad

Los diseños inteligentes a menudo optan por soluciones sutiles, como el botón de Navidad cubierto de nieve en este bolígrafo. El fondo rojo oscuro es una opción perfecta para un diseño de Navidad; No todo tiene que ser verde, después de todo..

Los colores, los degradados, el tipo de letra y el efecto de desplazamiento hacen que este botón sea muy elegante y solemne. Solo necesitas unos pocos para decorar rápidamente un sitio para Navidad..

12. Parallax Happy Holiday

Si le gusta el desplazamiento de paralaje, ¿por qué no lo usaría para los diseños de sus vacaciones? El desarrollador de este lápiz experimentó de forma inteligente con el efecto y utilizó el complemento Parallax.js jQuery de una manera menos común, el efecto de desplazamiento no es vertical como de costumbre, sino horizontal. El ambiente navideño se ve intensificado por una nevada impresionante.

Si tuviera que elegir algún defecto de esta pluma, sería la elección del color: las letras blancas sobre un fondo parcialmente blanco debilitan significativamente la accesibilidad del diseño.

13. Papel de regalo de Navidad CSS

Puede crear un papel de regalo de Navidad completamente único con la ayuda de CSS3. El desarrollador de este lápiz muestra no solo una, sino seis variantes para esto. Los hermosos diseños se logran mediante la utilización inteligente de los gradientes de CSS y la propiedad de modo de combinación de fondo.

Puede encontrar ejemplos aún más interesantes y una explicación detallada en el sitio web del desarrollador..

14. Caja dentro de una caja

Este diseño imaginativo está inspirado en las muñecas rusas tradicionales (una muñeca dentro de una muñeca). Si abre el cuadro exterior haciendo clic en él, se muestra un cuadro interior que también es el cuadro exterior de otro cuadro interior. La funcionalidad está escrita en jQuery, y los lugares exactos de las cajas se configuran con la ayuda de reglas de posición absoluta y relativa en el archivo CSS..

15. Caja de regalo con efecto de papel pelado.

Si logras quitar la cinta de este regalo arrastrándola, puedes echarle un vistazo al efecto de pelado de papel de Supercool que revela el contenido interno del regalo. Puedes leer el tutorial completo en el sitio web del desarrollador, es un truco que definitivamente vale la pena aprender. Si solo desea utilizar el código, también puede clonarlo desde GitHub..

16. Lienzo animado Holiday Spirit

La Navidad puede ser un buen momento para experimentar con nuevas cosas, tal como lo hizo el desarrollador con este lápiz utilizando el lienzo HTML5 como fondo animado. El lienzo aparece antes del contenido (¡Felices fiestas!) En el archivo HTML, y se establece como fondo con la ayuda del posicionamiento inteligente de CSS.

El lápiz también utiliza un script de animación de fondo incluido como un archivo JavaScript separado.

17. Tarjeta de regalo UI

Esta atractiva tarjeta de regalo no es solo para Navidad, sino que puede usarse en cualquier momento cuando quiera sorprender a sus usuarios con un regalo en su sitio web. No se basa en JavaScript, ya que está completamente escrito en el lenguaje de hojas de estilo Sass..

El diseño hace uso de la propiedad CSS3 de la ruta de clip que permite a los desarrolladores mostrar solo una región específica de un elemento, en lugar de mostrar toda su área.

18. Pure CSS Merry Christmas Card

Este Papá Noel que se ríe infinitamente, usando solo HTML y CSS3, puede darle la oportunidad de entender cómo se puede usar la sintaxis de la animación de fotogramas clave en la práctica. En CSS3 puede usar la regla @keyframes para especificar las reglas de una animación, y luego puede vincular esta animación específica a un elemento determinado usando la propiedad CSS3 de la animación.

Debe agregar el nombre del fotograma clave como el primer valor de la propiedad de animación, al igual que el desarrollador lo hizo con los fotogramas clave personalizados denominados bodyLaugh, beardLaugh, headLaugh y mouthLaugh creados específicamente para esta pluma..

19. galleta de navidad

Si te pasas por encima de esta impresionante galleta de Navidad, se revela un mensaje de Navidad único que es una forma increíble de desear una Feliz Navidad a tus visitantes. El HTML está escrito en HAML, el lenguaje de marcado de abstracción HTML, mientras que las reglas de estilo aprovechan el poder del lenguaje Sass Syntactically Awesome Styesheets.

El resultado es inteligente y sorprendente de hecho. Al agregar un poco más de JavaScript, incluso se puede usar para enviar citas o mensajes personalizados a los usuarios.

20. luces de Navidad parpadeantes

Estas luces de Navidad parpadeantes pueden dar rápidamente un ambiente único a cualquier sitio web. El código de usuario está escrito en HAML que se compila en HTML, Sass que se compila en CSS y jQuery.

El efecto brillante animado se logra mediante la regla @keyframes mencionada anteriormente proporcionada por CSS3. Los colores de los leds se establecen en el archivo jQuery agregando 50 grados al valor de Tono del led anterior utilizando la escala de colores HSL.