20 increíbles proyectos de Navidad escondidos en CodePen

CodePen es un campo de juegos en línea para desarrolladores talentosos de front-end, un lugar donde siempre puedes encontrar proyectos geniales para ampliar tus horizontes y ver lo que otros desarrolladores están haciendo. Las vacaciones de fin de año son un buen momento para sorprender a sus seres queridos con proyectos personales creativos, o para agradecer a sus clientes con diseños geniales y vanguardistas que ayudarán a la alegría navideña.

En este post daremos un vistazo a 20 increíbles experimentos navideños en CodePen, que puedes usar como inspiración para crear tus propios diseños.

1. Family Christmas Songbook

Esta encantadora aplicación Family Christmas Songbook puede reproducir sus canciones favoritas de Navidad alojadas en SoundCloud. Las reglas de estilo están escritas en el lenguaje de hojas de estilo LESS, y la funcionalidad del reproductor de música es proporcionada por un plugin jQuery personalizado.

Los iconos del copo de nieve y el árbol de Navidad en el fondo le dan una atmósfera solemne al diseño, y si pasa el cursor sobre el lápiz también puede encontrar algunos efectos sutiles de CSS.

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 maneras creativas. Este bolígrafo es un buen ejemplo para esto. 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 combinan en un árbol de Navidad. No solo es una solución única, sino que también recuerda a un juego más simple.

3. 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 nevadas como las imágenes de fondo se crean exclusivamente en CSS. Vale la pena examinar el código un poco, ya que muestra las capacidades increíbles de CSS3. La imagen de fondo incluso se puede confundir con un gráfico SVG real.

4. Santa en la carrera!

Santa en la carrera! es un divertido juego de JavaScript para las fiestas que hace uso del framework de juegos phaser.js HTML5. No hay muchas reglas en este juego: Santa corre infinitamente, o al menos hasta que se cae. Este lápiz te brinda una excelente oportunidad para entender cómo escribir un juego más simple en JavaScript.

5. Recolector de nombres secreto de Santa

Escoger un nombre de un sombrero ha sido una forma popular en las escuelas y oficinas para elegir Secret Santas: este bolígrafo es simplemente una versión digital de esta tradición. Como usa solo JavaScript simple, puede incrustarlo fácilmente en su propio sitio. Simplemente cambie 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 de radio de borde. Las diferentes partes de las bolas se configuran 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 usa inteligentemente para crear una clase personalizada de Copo de Nieve.

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

8. Experimento de acordeón navideño

Este acordeón de vacaciones es simplemente hermoso. Si pasa el cursor sobre una pestaña, se enfoca expandiendo un poco, y si hace clic en ella, aparece de repente y cubre toda la página. Es interesante observar que este bolígrafo usa gráficos vectoriales escalables (SVG) diseñados con CSS.

Los SVG son más poderosos de lo que parecen a primera vista, se pueden posicionar y diseñar inteligentemente con las mismas reglas de estilo que usamos con los elementos HTML comunes.

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 espíritu navideño a cualquier diseño. No hay imágenes usadas para el muñeco de nieve, está completamente escrito en CSS. Vale la pena echar un vistazo al código CSS un poco, y ver cómo el desarrollador usa los pseudo selectores: before y: after para lograr el resultado deseado.

10. Copo de nieve CSS3

Puede facilitar la creación de imágenes de solo CSS3 utilizando herramientas avanzadas de desarrollo de aplicaciones para el usuario; este copo de nieve CSS3 bien diseñado es un excelente ejemplo de esto. El desarrollador utilizó el lenguaje de plantillas Jade que compila en HTML, y el preprocesador Sass CSS para implementar este impresionante diseño de copos de nieve.

11. Botón de Navidad

Los diseños inteligentes a menudo optan por soluciones sutiles, al igual que el Nevado Botón de Navidad en este bolígrafo. El fondo rojo oscuro es una opción perfecta para un diseño navideño; no todo debe 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 unos pocos para decorar rápidamente un sitio para Navidad.

12. Parallax Happy Holiday

Si te gusta el desplazamiento paralaje, ¿por qué no lo usarías para tus diseños de vacaciones? El desarrollador de este lápiz experimentó inteligentemente con el efecto, y usó el plugin jQuery de Parallax.js 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 pintar algún defecto de esta pluma, sería la opción de color: las letras blancas sobre un fondo parcialmente blanco debilitan significativamente el acceso al 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 bolígrafo muestra no solo una, sino seis variantes para esto. Los hermosos patrones se logran mediante la utilización inteligente de gradientes CSS y la propiedad background-blend-mode.

Puede encontrar incluso más ejemplos geniales y una explicación detallada en el sitio web del desarrollador.

14. 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 la caja exterior haciendo clic en ella, se muestra una caja interna que también es la caja exterior de otra caja interior. La funcionalidad está escrita en jQuery, y los lugares exactos de los cuadros se establecen con la ayuda de reglas de posición absolutas y relativas en el archivo CSS.

15. Caja de regalo con efecto Paper Peel

Si logras quitar la cinta de este regalo arrastrándola, puedes echar un vistazo al efecto de pelar papel supercool que revela el contenido interno del regalo. Puede leer el tutorial completo en el sitio web del desarrollador, es un truco que definitivamente vale la pena aprender. Si solo quieres usar el código, puedes clonarlo desde GitHub también.

16. Lienzo Animado Holiday Spirit

La Navidad puede ser un buen momento para experimentar con cosas nuevas, al igual que el desarrollador lo hizo en este bolígrafo utilizando el lienzo HTML5 como fondo animado. El lienzo viene antes del contenido (¡Feliz día de fiesta!) En el archivo HTML, y se establece como fondo con la ayuda de un posicionamiento inteligente de CSS.

El lápiz también usa una secuencia de comandos de animación de fondo incluida como un archivo JavaScript separado.

17. IU de tarjeta de regalo

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

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

18. Pure CSS Merry Christmas Card

Este Papá Noel infinitamente risueño, que usa solo HTML y CSS3, puede darle la oportunidad de comprender cómo la sintaxis de la animación de fotogramas clave se puede usar 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 utilizando la propiedad de animación CSS3.

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

19. Xmas Cracker

Si pasas el cursor sobre esta impresionante galleta de Navidad, se revela un mensaje navideño único que es una manera increíble de desearles una feliz Navidad a tus visitantes. El HTML está escrito en HAML, el Lenguaje de marcado de abstracción de HTML, mientras que las reglas de estilo aprovechan el poder del lenguaje Sass Syntactically Awesome Styesheets.

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

20. Luces de Navidad intermitentes

Estas luces navideñas parpadeantes pueden dar rápidamente un ambiente único a cualquier sitio web. El código del front-end está escrito en HAML que compila en HTML, Sass que se compila en CSS y jQuery.

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

Administrar el contenido que ves en el modo de vista previa de WordPress [Consejo de WordPress]

Si usted es un usuario regular de WordPress que publica publicaciones regularmente, el modo Vista previa no necesita presentación. Lo usamos a menudo para obtener una vista previa de nuestras publicaciones mientras escribimos, o para hacer una verificación final antes de presionar el botón publicar. ¿

(Consejos de tecnología y diseño)

Bloquee el acceso a otros sitios web (mientras está trabajando) con SiteCop

Utilice el método de Todobook para restringir el tiempo de navegación en un determinado sitio web "improductivo" y aplíquelo a cualquier otro sitio web que desee. Ese es el concepto detrás de SiteCop, una extensión de "administración de productividad" hecha para los navegadores Chrome .Detec

(Consejos de tecnología y diseño)