20 impressionantes projetos de Natal escondidos em CodePen

O CodePen é um playground on-line para desenvolvedores de front-end talentosos, um lugar onde você sempre pode encontrar projetos interessantes para ampliar seus horizontes e ver o que outros desenvolvedores estão fazendo. As férias de fim de ano são um ótimo momento para surpreender seus entes queridos com projetos pessoais criativos, ou para agradecer a seus clientes com alguns designs interessantes e de vanguarda que ajudarão no clima de festa..

Neste post vamos dar uma olhada 20 incríveis experiências de natal na CodePen, que você pode usar como inspiração para criar seus próprios designs.

1. Músicas para o Natal da Família

Este adorável aplicativo Family Song Songbook pode tocar suas músicas favoritas de Natal hospedadas no SoundCloud. As regras de estilo são escritas na linguagem de folha de estilo LESS, e a funcionalidade do music player é fornecida por um plugin jQuery personalizado..

Os ícones do floco de neve e da árvore de Natal no fundo dão uma atmosfera solene ao design, e se você passar o mouse sobre a caneta você também pode encontrar alguns efeitos CSS sutis.

2. Árvore de Natal Digital

Projetar para o Natal é sempre um trabalho de agradecimento, pois seus elementos visuais típicos podem ser construídos de muitas maneiras criativas. Esta caneta é um bom exemplo para isso. No início, você só pode ver triângulos coloridos, aparentemente não relacionados aos feriados, mas quando você clica no botão Revelar, eles são colocados juntos em uma árvore de Natal. Não é apenas uma solução única, mas também uma reminiscência de um jogo mais simples.

3. Animação de Natal com neve

Você não precisa necessariamente usar JavaScript, se você quiser criar uma animação legal para o Natal. Nesta caneta, tanto a animação de neve quanto as imagens de fundo são criadas exclusivamente em CSS. Vale a pena examinar o código um pouco, pois mostra as incríveis capacidades do CSS3. A imagem de fundo pode ser confundida com um gráfico SVG real.

4. Santa na corrida!

Santa na corrida! é um divertido jogo de JavaScript para as festas de fim de ano que utiliza o framework de jogos HTML5 phaser.js. Não há muitas regras neste jogo: o Papai Noel corre infinitamente, ou pelo menos até ele cair. Esta caneta oferece uma excelente oportunidade para entender como escrever um jogo mais simples em JavaScript.

5. Seletor de Nome do Papai Noel Secreto

Escolher um nome de um chapéu tem sido uma maneira popular em escolas e escritórios de escolher Secret Santas - essa caneta é meramente uma versão digital dessa tradição. Como ele usa apenas JavaScript vanilla, você pode facilmente incorporá-lo em seu próprio site. Apenas mude os nomes dentro da variável give.

6. Bolas de Natal em CSS Puro

Estas bolas de Natal alegres são escritas em CSS puro, aproveitando as regras de raio de fronteira. As diferentes partes das bolas são colocadas juntas utilizando posições relativas calculadas com precisão.

Se você deseja adicionar rapidamente uma atmosfera de feriado a uma página da Web, basta inserir algumas dessas bolas nos locais apropriados em uma cor que corresponda ao design geral do site..

7. Flocos de Neve Móveis

Você pode fazer com que esses flocos de neve se movam pairando sobre eles em uma área de trabalho ou inclinando seu smartphone. A funcionalidade é fornecida pelo JavaScript orientado a objeto que é usado de forma inteligente pelo desenvolvedor para criar uma classe personalizada do Snowflake..

Os flocos de neve em si são construídos em CSS3, e o fundo usa gradientes - não há imagens nesta caneta.

8. Experiência de Acordeão de Férias

Este acordeão de férias é simplesmente lindo. Se você passar o mouse sobre uma guia, ela se concentrará expandindo um pouco e, se você clicar nela, ela aparecerá de repente e cobrirá a página inteira. É interessante notar que esta caneta usa gráficos vetoriais escaláveis ​​(SVG) que são estilizados com CSS.

Os SVGs são mais poderosos do que parecem à primeira vista, eles podem ser posicionados e projetados com as mesmas regras de estilo que usamos com elementos HTML comuns.

9. Boneco de neve liso puro do CSS

Quem disse que o design plano precisa ser chato? Este lindo boneco de neve pode facilmente adicionar espírito de Natal a qualquer desenho. Não há imagens usadas para o boneco de neve, é completamente escrito em CSS. Vale a pena dar uma olhada no código CSS um pouco e ver como o desenvolvedor usa o: before e: after pseudo selectors para atingir o resultado pretendido.

10. Floco de Neve CSS3

Você pode facilitar a criação de imagens apenas do CSS3 usando ferramentas avançadas de desenvolvimento front-end; este floco de neve CSS3 bem projetado é um excelente exemplo para isso. O desenvolvedor fez uso da linguagem de templates Jade, que é compilada em HTML, e do pré-processador CSS Sass, para implementar este design deslumbrante de floco de neve..

11. Botão de Natal

Os designs inteligentes frequentemente optam por soluções sutis, exatamente como o botão de Natal com neve nesta caneta. O fundo vermelho escuro é a escolha perfeita para um design de Natal; nem tudo precisa ser verde depois de tudo.

As cores, os gradientes, o tipo de letra e o efeito de foco tornam este botão muito elegante e solene. Você precisa apenas de alguns deles para decorar rapidamente um site para o Natal..

12. Feriado Feliz Parallax

Se você gosta de rolagem paralaxe, por que você não a usaria para seus designs de férias? O desenvolvedor dessa caneta experimentou o efeito de forma inteligente e usou o plug-in jQuery do Parallax.js de maneira menos comum, o efeito de rolagem não é vertical como de costume, mas horizontal. A atmosfera de Natal é intensificada por uma queda de neve impressionante

Se eu tivesse que escolher qualquer falha desta caneta, seria a escolha da cor: letras brancas em um fundo parcialmente branco enfraquecem significativamente a acessibilidade do design.

13. Papel de Embrulho de Natal CSS

Você pode criar um papel de embrulho de Natal completamente original com a ajuda do CSS3. O desenvolvedor desta caneta mostra não apenas uma, mas seis variantes para isso. Os padrões bonitos são alcançados pela utilização inteligente de gradientes CSS e a propriedade de modo de mesclagem de plano de fundo.

Você pode encontrar exemplos ainda mais legais e uma explicação detalhada no próprio site do desenvolvedor.

14. Caixa Dentro de uma Caixa

Este design imaginativo foi inspirado em bonecas russas tradicionais (uma boneca dentro de uma boneca). Se você abrir a caixa externa clicando nela, ela revelará uma caixa interna que também é a caixa externa de outra caixa interna. A funcionalidade é escrita em jQuery, e os locais exatos das caixas são definidos com a ajuda de regras de posição absoluta e relativa no arquivo CSS.

15. Caixa de presente com efeito de casca de papel

Se você conseguir remover a fita desse presente arrastando-a para fora, poderá dar uma olhada no efeito supercool de casca de papel que revela o conteúdo interno do presente. Você pode ler o tutorial completo no site do desenvolvedor, é um truque que definitivamente vale a pena aprender. Se você quiser apenas usar o código, você também pode cloná-lo no GitHub.

16. Lona Animada de Holiday Spirit

O Natal pode ser um ótimo momento para experimentar coisas novas, assim como o desenvolvedor fez com essa caneta usando a tela HTML5 como fundo animado. A tela vem antes do conteúdo (Happy Holidays!) No arquivo HTML e é definida como um plano de fundo com a ajuda do posicionamento inteligente do CSS.

A caneta também usa um script de animação de plano de fundo incluído como um arquivo JavaScript separado.

17. IU do cartão de presente

Este cartão de presente atraente não é apenas para o Natal, mas pode ser usado a qualquer momento quando você quiser surpreender seus usuários com um presente em seu site. Não depende de JavaScript, pois é totalmente escrito na linguagem de folha de estilo Sass.

O design faz uso da propriedade CSS3 do caminho de clipe, que permite aos desenvolvedores exibir apenas uma região específica de um elemento, em vez de mostrar toda a sua área..

18. Cartão de Natal com CSS puro

Este Papai Noel infinitamente rindo - usando apenas HTML e CSS3 - pode dar a você a oportunidade de entender como a sintaxe da animação de quadros-chave pode ser usada na prática. Em CSS3, você pode usar a regra @keyframes para especificar as regras de uma animação e, em seguida, vincular essa animação especificada a um determinado elemento usando a propriedade CSS3 de animação.

Você precisa adicionar o nome do quadro-chave como o primeiro valor da propriedade de animação, assim como o desenvolvedor fez isso com os quadros-chave personalizados chamados bodyLaugh, beardLaugh, headLaugh e mouthLaugh criados especificamente para essa caneta..

19. Bolacha de Natal

Se você passar por cima deste impressionante Xmas Cracker, ele revela uma mensagem única de Natal que é uma maneira incrível de desejar um Feliz Natal aos seus visitantes. O HTML é escrito em HAML, a Linguagem de Marcação de Abstração de HTML, enquanto as regras de estilo aproveitam o poder do idioma Sass Syntactically Awesome Styesheets.

O resultado é inteligente e incrível mesmo. Ao adicionar um pouco mais de JavaScript, ele pode ser usado até mesmo para fornecer cotações ou mensagens personalizadas aos usuários.

20. Luzes de Natal piscando

Estas luzes de Natal piscando podem rapidamente dar uma atmosfera única para qualquer site. O código front-end é escrito em HAML que compila em HTML, Sass que compila em CSS e jQuery.

O efeito de animação animado é alcançado pela regra @keyframes acima mencionada fornecida pelo CSS3. As cores dos leds são definidas no arquivo jQuery adicionando 50 graus ao valor Hue do led anterior usando a escala de cores HSL..