CodePen es un patio de recreo en línea para desarrolladores front-end talentosos, un lugar donde siempre puede encontrar proyectos geniales para ampliar sus horizontes y ver qué están haciendo otros desarrolladores. Las vacaciones de fin de año son un buen momento para sorprender a sus seres queridos con proyectos personales creativos, o para dar las gracias a sus clientes con algunos diseños geniales y vanguardistas que ayudarán a alegrar las fiestas.
En este post vamos a echar un vistazo a 20 asombrosos experimentos navideños en CodePenque puedes usar como inspiración para crear tus propios diseños.
30 impresionantes animaciones SVG para tu inspiración
CodePen es un patio de recreo en línea para desarrolladores front-end talentosos, un lugar donde siempre puede encontrar proyectos geniales para ampliar sus horizontes y ver qué Leer más
¡Feliz árbol de Navidad!
Este «¡Feliz árbol de Navidad!» está construido con la biblioteca del motor de animación SVG y JavaScript, Greensock, con algunos de los complementos. La biblioteca dibuja el árbol alrededor con un poco de brillo, lo que hace que la animación sea más viva.
Si está buscando agregar el ambiente navideño en su sitio web, consulte el código. ¡No hay Navidad sin un árbol de Navidad!
Puro CSS Luces navideñas
Después de crear un árbol de Navidad, vea cómo puede crear luces navideñas. Está hecho solo de una lista sin ordenar, mientras que los estilos están escritos con SCSS. Creo que es perfecto para la decoración de un sitio web.
Es sorprendente cómo podemos crear una animación convincente hoy en día simplemente usando CSS.
Un bucle navideño en svg
Este es un buen ejemplo que demuestra el poder de SVG. No solo puede crear una animación simple, sino que también puede crear una animación tan compleja como esta; creando un bucle de transformación de 3 objetos diferentes sin problemas.
Esta animación está construida con un solo divuna pequeña biblioteca de CSS y JavaScript llamada Lottie.
Vea el bucle navideño Pen A en svg de kittons (@airnan) en CodePen.
Deseos de Navidad
Este “bolígrafo” compone algunos SVG para crear el paisaje, el zorro y el pájaro. Está usando una biblioteca llamada ParticelJS para crear la nevada. Lo que lo hace genial es que a medida que mueves el cursor alrededor de la nieve, la nieve se alejará del cursor mientras lo mueves.
Una escena del país de las maravillas del invierno
Este árbol de navidad, la nieve y la nevada se crean solo con HTML y CSS. La animación está hecha de CSS y es bastante sencilla. Creo que es un gran ejemplo para aquellos que recién están aprendiendo animación CSS y ven de lo que es capaz.
Árbol de Navidad animado CSS (elemento único)
¿Crees que este árbol de Navidad y la animación con un solo div elemento y CSS?
HTML y CSS3 son realmente tan poderosos cuando conoces el truco como este «Pen» que te da un ejemplo de cómo crear un árbol de Navidad y animarlo. El truco aquí es componer capas de sombras, animaciones y transiciones. Es un gran ejemplo para subir de nivel tu habilidad CSS.
Cancionero de Navidad en familia
Esta encantadora aplicación Family Christmas Songbook puede reproducir tus canciones navideñas favoritas alojadas en SoundCloud. Las reglas de estilo están escritas en el lenguaje de hoja de estilo LESS, y la funcionalidad del reproductor de música la proporciona un complemento jQuery personalizado.
Los íconos del copo de nieve y el árbol de Navidad en el fondo le dan una atmósfera solemne al diseño, y si pasas el mouse sobre el lápiz, también puedes encontrar algunos efectos sutiles de CSS.
Á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 maneras creativas. Este bolígrafo es un buen ejemplo de ello. Al principio, solo puede ver triángulos coloridos, aparentemente sin relación con las vacaciones, pero cuando hace clic en el botón Revelar, se juntan en un árbol de Navidad. No solo es una solución única, sino que también recuerda a un juego más simple.
Animación navideña con nevadas
No necesariamente necesita usar JavaScript, si desea crear una animación genial para Navidad. En este bolígrafo, tanto la animación de las nevadas como las imágenes de fondo se crean únicamente en CSS. Vale la pena examinar un poco el código, ya que muestra las increíbles capacidades de CSS3. La imagen de fondo puede incluso confundirse con un gráfico SVG real.
Leer más: 30 geniales animaciones CSS que tienes que ver
Papá Noel en la carrera!
Papá Noel en la carrera! es un divertido juego de JavaScript para las fiestas 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 cae. Este bolígrafo le brinda una excelente oportunidad para comprender cómo escribir un juego más simple en JavaScript.
Selector de nombre secreto de Papá Noel
Sacar un nombre de un sombrero ha sido una forma popular en las escuelas y oficinas de elegir Secret Santas; este bolígrafo es simplemente una versión digital de esta tradición. Como solo usa JavaScript estándar, puede integrarlo fácilmente en su propio sitio. Simplemente cambie los nombres dentro del dar variable.
Bolas de Navidad en Puro CSS
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 colocan juntas utilizando posiciones relativas calculadas con precisión.
Si desea agregar rápidamente un ambiente festivo 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.
Copos de nieve móviles
Puede hacer que estos copos de nieve se muevan pasando el cursor sobre ellos en un escritorio o inclinando su teléfono inteligente. La funcionalidad es proporcionada por JavaScript orientado a objetos que el desarrollador utiliza de manera inteligente para crear una clase Snowflake personalizada.
Los copos de nieve en sí están construidos en CSS3 y el fondo usa degradados: no hay imágenes en este bolígrafo.
Experimento de acordeón de vacaciones
Este acordeón festivo es simplemente hermoso. Si pasa el cursor sobre una pestaña, se enfoca al expandirse un poco, y si hace clic en ella, aparece repentinamente y cubre toda la página. Es interesante notar que este lápiz utiliza gráficos vectoriales escalables (SVG) que están diseñados con CSS.
Los SVG son más poderosos de lo que parecen a primera vista, se pueden colocar y diseñar de manera inteligente con las mismas reglas de estilo que usamos con los elementos HTML regulares.
Muñeco de nieve CSS puro plano
¿Quién dijo que el diseño plano tiene que ser aburrido? Este encantador muñeco de nieve puede agregar fácilmente espíritu navideño a cualquier diseño. No se utilizan imágenes para el muñeco de nieve, está completamente escrito en CSS. Vale la pena echarle un vistazo al código CSS y ver cómo el desarrollador usa los pseudoselectores :before y :after para lograr el resultado deseado.
Copo de nieve CSS3
Puede facilitar la creación de imágenes solo 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 el preprocesador Sass CSS para implementar este impresionante diseño de copo de nieve.
Botón de Navidad
Los diseños inteligentes suelen optar por soluciones sutiles, como el botón navideño nevado de este bolígrafo. El fondo rojo oscuro es una elección perfecta para un diseño navideño; 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 necesita algunos de ellos para rápidamente decorar un sitio para Navidad.
Paralaje felices fiestas
Si te gusta el desplazamiento de paralaje, ¿por qué no lo usarías para tus diseños de vacaciones? El desarrollador de este bolígrafo experimentó inteligentemente con el efecto y usó 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 intensifica con una impresionante nevada
Si tuviera que señalar algún defecto de este bolígrafo, sería la elección del color: las letras blancas sobre un fondo parcialmente blanco debilitan significativamente la accesibilidad del diseño.
Papel de regalo de Navidad CSS
Puede crear un papel de regalo de Navidad completamente único con la ayuda de CSS3. El desarrollador de esta pluma muestra no solo una, sino seis variantes para esto. Los hermosos patrones 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.
Caja dentro de una caja
Este diseño imaginativo se inspiró en las muñecas rusas tradicionales (una muñeca dentro de una muñeca). Si abre el cuadro exterior haciendo clic en él, revela 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 los cuadros se establecen con la ayuda de reglas de posición absoluta y relativa en el archivo CSS.
Caja de regalo con efecto de cáscara de papel
Si logras quitar la cinta de este regalo arrastrándola, puedes echarle un vistazo al efecto supercool de pelado de papel 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 usar el código, también puede clonarlo desde GitHub.
Lienzo animado espíritu navideño
La Navidad puede ser un buen momento para experimentar con cosas nuevas, tal como lo hizo el desarrollador en este bolígrafo usando lienzo HTML5 como fondo animado. El lienzo aparece antes que el contenido (¡Felices fiestas!) en el archivo HTML y se establece como fondo con la ayuda del posicionamiento CSS inteligente.
El lápiz también utiliza un script de animación de fondo incluido como un archivo JavaScript independiente.
Interfaz de usuario de la tarjeta de regalo
Esta llamativa tarjeta de regalo no es solo para Navidad, sino que puede usarse 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 hojas de estilo Sass.
El diseño utiliza la propiedad clip-path CSS3 que permite a los desarrolladores mostrar solo una región específica de un elemento, en lugar de mostrar toda su área.
Tarjeta de Feliz Navidad con CSS puro
Este Papá Noel que se ríe infinitamente, usando solo HTML y CSS3, puede brindarle la oportunidad de comprender cómo se puede usar la sintaxis de 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 animation CSS3.
Debe agregar el nombre del fotograma clave como el primer valor de la propiedad de animación, tal como lo hizo el desarrollador con los fotogramas clave personalizados llamados bodyLaugh, beardLaugh, headLaugh y mouthLaugh creados específicamente para este bolígrafo.
galleta de navidad
Si pasa el cursor sobre este impresionante Xmas Cracker, revela un mensaje navideño único que es una forma increíble de desear una Feliz Navidad a sus 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 realmente inteligente y asombroso. Al agregar un poco más de JavaScript, incluso se puede usar para entregar citas o mensajes personalizados a los usuarios.