20 удивительных рождественских проектов, спрятанных в CodePen

CodePen это онлайн-площадка для талантливых разработчиков, место, где вы всегда можете найти интересные проекты, чтобы расширить свой кругозор, и посмотреть, чем занимаются другие разработчики. Праздники в конце года – это прекрасное время, чтобы удивить своих близких творческими личными проектами или поблагодарить своих клиентов с помощью крутых, ультрасовременных дизайнов, которые помогут поддержать праздник.

В этом посте мы познакомимся с 20 удивительными рождественскими экспериментами на CodePen, которые вы можете использовать для вдохновения при создании собственных дизайнов.

Подробнее: 30 потрясающих SVG-анимаций для вашего вдохновения

1. Семейный Рождественский Песенник
   Это прекрасное приложение Family Christmas Songbook может воспроизводить ваши любимые рождественские песни, размещенные на SoundCloud, Правила стиля написаны в МЕНЬШЕ язык таблиц стилей и функциональность музыкального проигрывателя обеспечивается пользовательским плагином jQuery.

Значки снежинки и новогодней елки на заднем плане создают торжественную атмосферу в дизайне, и если вы наводите курсор на ручку, вы также можете найти некоторые тонкие CSS-эффекты.

Увидеть перо Рождественский Песенник Николас Петерсен (@nicholaspetersen) на CodePen,
2. Цифровая новогодняя елка
Дизайн для Рождества – это всегда благодарная работа, поскольку его типичные визуальные элементы могут быть построены многими творческими способами. Эта ручка является хорошим примером для этого. Сначала вы можете видеть только красочные треугольники, которые, по-видимому, не связаны с праздниками, но когда вы нажимаете кнопку «Показать», они объединяются в рождественскую елку. Это не только уникальное решение, но и напоминает более простую игру.

Увидеть перо Цифровая новогодняя елка Прашант Сани (@Prashantsani) на CodePen,
3. Рождественская анимация со снегопадом
Вам не обязательно использовать JavaScript, если вы хотите создать классную анимацию на Рождество. В этой ручке анимация снегопада и фоновые изображения создаются исключительно в CSS. Стоит немного изучить код, так как он показывает невероятные возможности CSS3. Фоновое изображение можно даже принять за настоящую графику SVG.

Увидеть перо Рождественская анимация 2014 Текс Смит (@texxs) на CodePen,

Подробнее: 30 крутых анимаций CSS, которые вы должны увидеть

1. Санта на бегу!
   Санта на бегу! веселая игра JavaScript для праздников, использующая phaser.js HTML5 игровые рамки. В этой игре не так уж много правил: Санта бежит бесконечно, или, по крайней мере, пока он не упадет. Эта ручка дает вам отличную возможность понять, как написать более простую игру на JavaScript.

Увидеть перо Санта на бегу! Нейт Уайли (@natewiley) на CodePen,
5. Секретный сборщик имен Санта
Выделение имени из шапки было популярным способом в школах и офисах выбирать Secret Santas – эта ручка – просто цифровая версия этой традиции. Поскольку он использует только ванильный JavaScript, вы можете легко встроить его в свой собственный сайт. Просто измените имена внутри переменной give.

Увидеть перо Секретный санта Тобиас Харисон-Денби (@quagliero) на CodePen,
6. Рождественские шары в чистом CSS
Эти веселые новогодние шары написаны на чистом CSS с использованием правил границ радиуса. Различные части шариков устанавливаются вместе с использованием точно рассчитанных относительных положений.

Если вы хотите быстро добавить атмосферу праздника на веб-страницу, просто вставьте некоторые из этих шаров в соответствующие места в цвете, который соответствует общему дизайну сайта.

Увидеть перо Это сезон для мячей Хосе Моралес-Мендизабал (@moralejf) на CodePen,
7. Подвижные снежинки
Вы можете заставить эти снежинки двигаться, наведя их на рабочий стол или наклонив свой смартфон. Функциональность обеспечивается объектно-ориентированным JavaScript, который разумно используется разработчиком для создания собственного класса Snowflake.

Сами снежинки построены в CSS3, а фон использует градиенты – в этой ручке вообще нет изображений.

Увидеть перо Счастливого Рождества! Пол Нив (@neave) на CodePen,
8. Праздничный Аккордеонный Эксперимент
Этот праздничный аккордеон просто прекрасен. Если вы наводите курсор на вкладку, она фокусируется, немного расширяясь, и если вы нажимаете на нее, она внезапно всплывает и покрывает всю страницу. Интересно отметить, что это перо использует масштабируемую векторную графику (SVG), стилизованную под CSS.

SVG более мощные, чем кажется на первый взгляд, их можно грамотно позиционировать и разрабатывать по тем же правилам стиля, которые мы используем с обычными элементами HTML.

Увидеть перо Праздничный Эксперимент Дмитрий Левченко (@levchenkod) на CodePen,
9. Flat Pure CSS Snowman
Кто сказал, что плоский дизайн должен быть скучным? Этот милый снеговик может легко добавить дух Рождества в любой дизайн. Там нет изображений, используемых для снеговика, он полностью написан на CSS. Стоит немного взглянуть на код CSS и посмотреть, как разработчик использует псевдоселекторы: before и: after для достижения желаемого результата.

Увидеть перо Плоский CSS Pure Snowman Али Халилифар (@alikhalilifar) на CodePen,
10. CSS3 Снежинка
Вы можете облегчить создание изображений только для CSS3, используя передовые инструменты для разработки интерфейса; эта хорошо разработанная снежинка CSS3 является отличным примером для этого. Разработчик воспользовался нефрит язык шаблонов, который компилируется в HTML, и пререкаться CSS препроцессор для реализации этого потрясающего дизайна снежинки.

Увидеть перо CSS3 Снежинка Стив Щецина (@steveszc) на CodePen,
11. Рождественская кнопка
Умные дизайны часто выбирают тонкие решения, как снежная рождественская кнопка в этой ручке. Темно-красный фон – идеальный выбор для рождественского дизайна; не все должно быть зеленым в конце концов.

Цвета, градиенты, гарнитура и эффект наведения делают эту кнопку очень элегантной и торжественной. Вам нужно всего несколько из них, чтобы быстро украсить сайт на Рождество.

Увидеть перо tcjou от vijender (@VIRU) на CodePen,
12. Параллакс С праздником
Если вам нравится параллакс-скроллинг, почему бы вам не использовать его для оформления праздников? Разработчик этого пера умело экспериментировал с эффектом и использовал Parallax.js Плагин jQuery менее распространен, эффект прокрутки не вертикальный, как обычно, а горизонтальный. Рождественская атмосфера усиливается впечатляющим снегопадом

Если бы мне пришлось выбирать какой-либо недостаток этого пера, это был бы выбор цвета: белые буквы на частично белом фоне значительно ослабляют доступность дизайна.

Увидеть перо Параллакс С праздником по aai210 (@ aai210) на CodePen,
13. CSS Рождественская упаковочная бумага
Вы можете создать совершенно уникальную рождественскую упаковочную бумагу с помощью CSS3. Разработчик этой ручки показывает не только один, но и шесть вариантов для этого. Красивые шаблоны достигаются благодаря умному использованию CSS-градиентов и фон-смесь-режим имущество.

Вы можете найти еще более интересные примеры и подробные объяснения разработчиков. собственный сайт,

Увидеть перо jEbraK Беннет Фили (@bennettfeely) на CodePen,
14. Коробка внутри коробки
Этот образный дизайн был вдохновлен традиционными Русские куклы (кукла внутри куклы). Если вы откроете внешнюю коробку, щелкнув по ней, откроется внутренняя коробка, которая также является внешней коробкой другой внутренней коробки. Функциональность написана на jQuery, а точные места блоков задаются с помощью правил абсолютного и относительного положения в файле CSS.

Увидеть перо Праздничное приветствие Эрикантон (@EricAnton) на CodePen,
15. Подарочная коробка с эффектом бумажной кожуры
Если вам удастся удалить ленту из этого подарка, перетаскивая ее, вы можете взглянуть на эффект отслаивания бумаги, который раскрывает внутреннее содержимое подарка. Вы можете прочитать полный учебник на сайт разработчикаэто уловка, которую определенно стоит изучить. Если вы просто хотите использовать код, вы можете клонировать его из GitHub также.

Увидеть перо Подарочная коробка от LegoMushroom (@ sol0mka) на CodePen,
16. Праздничный Анимированный Холст
Рождество может быть прекрасным временем для экспериментов с новыми вещами, так же, как разработчик сделал это в этой ручке, используя HTML5 canvas в качестве анимированного фона. Canvas предшествует содержанию (счастливых праздников!) В HTML-файле и устанавливается в качестве фона с помощью умного позиционирования CSS.

Ручка также использует сценарий фоновой анимации включен в виде отдельного файла JavaScript.

Увидеть перо Праздник Духа .. Тиффани Рэйсайд (@tmrDevelops) на CodePen,
17. Пользовательский интерфейс подарочной карты
Эта привлекательная подарочная карта предназначена не только для Рождества, но и может быть использована в любое время, когда вы хотите удивить своих пользователей подарком на вашем сайте. Он не опирается на JavaScript, так как полностью написан на пререкаться язык таблиц стилей.

Дизайн использует клип путь Свойство CSS3, которое позволяет разработчикам отображать только определенную область элемента вместо отображения всей его области.

Увидеть перо Пользовательский интерфейс подарочной карты Дэвид Хуршид (@davidkpiano) на CodePen,
18. Чистая CSS Веселая Рождественская открытка
Этот бесконечно смеющийся Санта, использующий только HTML и CSS3, может дать вам возможность понять, как Синтаксис анимации ключевых кадров могут быть использованы на практике. В CSS3 вы можете использовать @keyframes Правило для указания правил анимации, а затем вы можете привязать указанную анимацию к определенному элементу, используя анимация CSS3 свойство.

Вам необходимо добавить имя ключевого кадра в качестве первого значения свойства animation, так же, как разработчик сделал это с пользовательскими ключевыми кадрами с именами bodyLaugh, beardLaugh, headLaugh и mouthLaugh, специально созданными для этого пера.

Увидеть перо Чистый CSS с Рождеством 🙂 Алиреза Шейхолмолуки (@ Alireza29675) на CodePen,
19. Xmas Cracker
Если вы наводите курсор на этот впечатляющий Xmas Cracker, он показывает уникальное рождественское послание, которое представляет собой удивительный способ пожелать счастливого Рождества вашим посетителям. HTML написан на HAMLязык разметки абстракции HTML, в то время как правила стиля используют силу пререкаться Синтаксически удивительный язык Styesheets.

Результат умный и действительно потрясающий. Добавив немного больше JavaScript, он может даже использоваться для доставки пользовательских цитат или сообщений пользователям.

Увидеть перо Xmas Cracker CSS3 Майк Самуэйс (@msamways) на CodePen,
20. Мигающие рождественские огни
Эти мигающие рождественские огни могут быстро придать уникальную атмосферу любому веб-сайту. Код переднего конца написан на HAML который компилируется в HTML, пререкаться который компилируется в CSS и jQuery.

Оживленный эффект свечения достигается с помощью вышеупомянутых @keyframes Правило предоставлено CSS3. Цвета светодиодов устанавливаются в файле jQuery путем добавления 50 градусов к значению оттенка предыдущего светодиода, используя HSL цветовая гамма.

Увидеть перо Рождественские огни Волшебником Белого Волка (@WhiteWolfWizard) на CodePen,