20 Awesome Різдво Проекти приховані в CodePen

CodePen - це онлайн-майданчик для талановитих розробників інтерфейсу, місце, де ви завжди можете знайти цікаві проекти, щоб розширити свої горизонти, і подивитися, що роблять інші розробники. Кінцеві свята - це чудовий час, щоб здивувати своїх близьких творчими особистими проектами, або висловити подяку вашим клієнтам з деякими прохолодними, найсучаснішими проектами, які допоможуть святковому ураженню.

У цьому пості ми розглянемо 20 дивовижних різдвяних експериментів на CodePen, які можна використовувати для натхнення для створення власних конструкцій.

1. Сімейний Різдвяний пісенник

Це прекрасне додаток Family Song Songbook може відтворювати ваші улюблені різдвяні пісні, розміщені на SoundCloud. Правила стилю написані на мові таблиць стилів LESS, а функціональність музичного плеєра забезпечується спеціальним плагіном jQuery..

Іконки сніжинки та різдвяної ялинки у фоновому режимі надають дизайну урочисту атмосферу, а якщо ви наведете курсор миші на перо, ви також зможете знайти деякі тонкі ефекти CSS.

2. Цифрова ялинка

Проектування на Різдво завжди є вдячним завданням, оскільки його типові візуальні елементи можуть бути побудовані багатьма творчими способами. Це перо є хорошим прикладом для цього. Спочатку можна побачити тільки барвисті трикутники, які, здавалося б, не пов'язані з святами, але коли ви натискаєте кнопку Reveal, вони встановлюються разом у ялинку. Це не тільки унікальне рішення, але й нагадує просту гру.

3. Різдвяна анімація зі снігопадом

Вам не обов'язково використовувати JavaScript, якщо ви хочете створити класну анімацію на Різдво. У цьому пера, як анімація снігопаду, так і фонові зображення створюються виключно в CSS. Варто трохи вивчити код, оскільки він показує неймовірні можливості CSS3. Фонове зображення можна навіть прийняти за реальну SVG-графіку.

4. Санта на спуску!

Санта на бігу! це весела гра JavaScript для свят, використовуючи рамки гри HTML5 для phaser.js. У цій грі не так багато правил: Санта працює нескінченно, або принаймні, поки він не впаде. Це перо дає вам чудову можливість зрозуміти, як написати більш просту гру в JavaScript.

5. Таємний вибір імені Санти

Вибір імені з капелюха був популярним способом у школах і офісах для вибору Secret Santas - ця ручка є лише цифровою версією цієї традиції. Оскільки він використовує лише ванільний JavaScript, можна легко вбудувати його на свій сайт. Просто змініть імена всередині змінної give.

6. Новорічні кулі в чистому CSS

Ці веселі новорічні кулі написані на чистому CSS, використовуючи правила кордону радіусу. Різні частини кульок встановлюються разом, використовуючи точно розраховані відносні положення.

Якщо ви хочете швидко додати атмосферу свята до веб-сторінки, просто вставте деякі з цих куль у відповідні місця кольором, який відповідає загальному дизайну сайту.

7. Рухомі сніжинки

Ви можете зробити ці сніжинки рухатися, навівши над ними на робочому столі, або нахиляючи смартфон. Функціональність забезпечується об'єктно-орієнтованим JavaScript, який розумно використовується розробником для створення користувацького класу Сніжинки.

Самі сніжинки вбудовані в CSS3, а фон використовує градієнти - у цьому пера немає жодних зображень.

8. Holiday Accordion Experiment

Це свято-гармошка просто красиво. Якщо ви наведете курсор на вкладку, то фокусується, розширившись трохи, і якщо ви натиснете на неї, він раптово вискочить і охопить усю сторінку. Цікаво відзначити, що ця ручка використовує масштабовану векторну графіку (SVG), стилізовану під CSS.

SVG є більш потужними, ніж здається на перший погляд, вони можуть бути розумно розташовані та розроблені за тими ж правилами стилів, які ми використовуємо з звичайними елементами HTML.

9. Плоский Чистий CSS Сніговик

Хто сказав, що плоский дизайн повинен бути нудним? Цей чудовий сніговик може легко додати дух Різдва до будь-якого дизайну. Немає зображень, які використовуються для сніговика, це повністю написано на CSS. Варто трохи поглянути на CSS-код і подивитися, як розробник використовує: перед і: після псевдоселекторів для досягнення бажаного результату..

10. Сніжинка CSS3

Ви можете полегшити створення зображень, що містять лише CSS3, за допомогою просунутих інструментів розробки; Цей добре продуманий сніжинка CSS3 є прекрасним прикладом для цього. Розробник використав мову шаблону Jade, що компілюється в HTML, і препроцесор Sass CSS для реалізації цього приголомшливого дизайну сніжинки..

11. Кнопка «Різдво»

Смарт-дизайн часто вибирає тонкі рішення, як і снігова різдвяна кнопка в цьому пера. Темно-червоний фон є ідеальним вибором для різдвяного дизайну; зрештою не все повинно бути зеленим.

Кольори, градієнти, шрифт і ефект «наведення» роблять цю кнопку дуже елегантною і урочистою. Вам потрібно лише кілька з них, щоб швидко прикрасити сайт для Різдвяного свята.

12. Зі святом паралакса

Якщо вам подобається прокручування паралакса, то чому б ви не використали його для своїх святкових дизайнів? Розробник цього пера вдало експериментував з ефектом і використовував плагін Parallax.js jQuery в менш поширеному вигляді, ефект перегортання не є звичайним вертикальним, а горизонтальним. Різдвяну атмосферу посилює вражаючий снігопад

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

13. Різдвяна обгортковий папір CSS

Ви можете створити абсолютно унікальний різдвяний пакувальний папір за допомогою CSS3. Розробник цього пера показує для цього не тільки один, а шість варіантів. Гарні візерунки досягаються за рахунок розумного використання CSS-градієнтів і властивості background-blend-mode.

Можна знайти ще більш цікаві приклади та докладні пояснення на власному веб-сайті розробника.

14. Коробка в коробці

Цей творчий дизайн натхненний традиційними російськими ляльками (лялькою всередині ляльки). Якщо ви відкриєте зовнішню коробку, натиснувши на неї, вона виявить внутрішню коробку, яка також є зовнішньою коробкою іншої внутрішньої коробки. Функціональність написана в jQuery, а точні місця коробок встановлюються за допомогою абсолютних і відносних правил розташування у файлі CSS.

15. Подарункова коробка з ефектом паперового пілінгу

Якщо вам вдасться зняти стрічку з цього подарунка, перетягнувши її, ви можете подивитися на ефект суперчистого паперу, який відкриває внутрішній вміст подарунка. Ви можете прочитати повний навчальний посібник на сайті розробника, це хитрість, яку варто вивчити. Якщо ви просто хочете скористатися кодом, ви можете клонувати його з GitHub.

16. Анімоване полотно Святкового Духу

Різдво може бути прекрасним часом для експериментів з новими речами, так само, як розробник зробив це в цьому пера, використовуючи полотно HTML5 як анімований фон. Полотно поставляється перед вмістом (Happy Holidays!) У файлі HTML, і він встановлюється як фон за допомогою смарт-CSS-позиціонування.

Ручка також використовує сценарій фонової анімації, включений як окремий файл JavaScript.

17. Подарункова карта UI

Ця приваблива подарункова карта не тільки на Різдво, але може бути використана в будь-який час, коли ви хочете здивувати своїх користувачів подарунком на вашому сайті. Він не спирається на JavaScript, оскільки він повністю написаний на мові стилів Sass.

Дизайн використовує властивість кліпу CSS3, що дозволяє розробникам відображати лише певний регіон елемента, замість того, щоб показувати його всю область.

18. Чистий CSS Весела різдвяна листівка

Цей нескінченно сміючий Санта - використовуючи тільки HTML і CSS3 - може дати вам можливість зрозуміти, як синтаксис анімації ключових кадрів можна використовувати на практиці. У CSS3 можна використовувати правило @keyframes, щоб задати правила анімації, а потім ви можете прив'язати вказану анімацію до певного елемента за допомогою властивості анімації CSS3.

Вам потрібно додати ім'я ключового кадру як перше значення властивості анімації, так само, як розробник зробив це зі спеціальними ключовими кадрами, які називаються bodyLaugh, beardLaugh, headLaugh, і mouthLaugh, спеціально створені для цього пера.

19. Xmas Cracker

Якщо ви наведіть курсор на цей вражаючий Xmas Cracker, він відкриє унікальне Різдвяне повідомлення, яке є дивовижним способом побажати Вашим відвідувачам щасливого Різдва. HTML написано в HAML, мові розмітки HTML абстракції, а правила стилю використовують силу мови Sass Syntactically Awesome Styesheets..

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

20. Проблискові Різдвяні вогні

Ці миготливі Різдвяні вогні можуть швидко дати унікальну атмосферу будь-якому сайту. Передній код написаний в HAML, який компілюється в HTML, Sass, що компілюється в CSS, і jQuery.

Анімований ефект світиться досягається за допомогою вищезазначеного правила @keyframes, наданого CSS3. Кольори світлодіодів задаються у файлі jQuery шляхом додавання 50 градусів до значення Hue попереднього світлодіода з використанням кольорової шкали HSL.