20 Страхотни коледни проекти, скрити в CodePen

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

В този пост ще погледнем 20 страхотни коледни експерименти с CodePen, които можете да използвате за вдъхновение, за да създадете свои собствени проекти.

1. Семейна Коледна песенна книга

Това прекрасно приложение за песен на семейство Коледна песен може да играе любимите си коледни песни, хоствани на SoundCloud. Правилата за стила са написани на езика за стилове LESS, а функционалността на музикалния плейър се осигурява от персонализиран плъгин jQuery..

Иконите на снежинката и коледната елха във фонов режим дават тържествена атмосфера на дизайна, а ако задържите курсора върху писалката, можете да намерите и някои фини ефекти от CSS..

2. Цифрова коледна елха

Проектирането за Коледа винаги е благодарна работа, тъй като нейните типични визуални елементи могат да бъдат изградени по много креативни начини. Тази писалка е добър пример за това. Първоначално можете да видите само цветни триъгълници, привидно несвързани с празниците, но когато кликнете върху бутона „Разкрий“, те се събират заедно в коледно дърво. Това е не само уникално решение, но и напомнящо за по-проста игра.

3. Коледна анимация със снеговалеж

Не е задължително да използвате JavaScript, ако искате да създадете страхотна анимация за Коледа. В тази писалка, както анимацията на снега, така и фоновите изображения се създават изцяло в CSS. Струва си да разгледаме кода малко, тъй като той показва невероятните възможности на CSS3. Фоновото изображение може дори да бъде сбъркано с реална SVG графика.

4. Дядо Коледа на бягането!

Дядо Коледа! е забавна игра на JavaScript за празниците, използвайки рамката за игра на phaser.js в HTML5. В тази игра няма много правила: Дядо Коледа работи безкрайно или поне докато не падне. Тази писалка ви дава отлична възможност да разберете как да напишете по-проста игра в JavaScript.

5. Secret Santa Picker

Изборът на име от шапката е популярен начин в училищата и офисите да се избират Secret Santas - тази писалка е просто дигитална версия на тази традиция. Тъй като използва само ванилия JavaScript, можете лесно да го вградите в собствения си сайт. Просто променете имената вътре в дадената променлива.

6. Коледни топки в чист CSS

Тези весели коледни топки са написани в чист CSS, използвайки правилата за радиус на границата. Различните части на топките се поставят заедно, като се използват точно изчислени относителни позиции.

Ако искате бързо да добавите празнична атмосфера към уеб страница, просто вмъкнете някои от тези топки в подходящите места с цвят, който съответства на цялостния дизайн на сайта.

7. Подвижни снежинки

Можете да накарате тези снежинки да се движат, като се придвижвате над тях на работния плот или като накланяте смартфона си. Функционалността е осигурена от обектно-ориентиран JavaScript, който е умело използван от разработчика за създаване на потребителски клас Снежинка.

Самите снежинки са вградени в CSS3, а фонът използва градиенти - изобщо няма изображения в тази писалка.

8. Holiday Accordion Experiment

Този празничен акордеон е просто красив. Ако задържите курсора на мишката върху даден раздел, той се фокусира, като се разшири малко и ако кликнете върху него, той изведнъж се появи и покрива цялата страница. Интересно е да се отбележи, че тази писалка използва Scalable Vector Graphics (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 градиенти и свойството фон-бленд-режим.

Можете да намерите още по-интересни примери и подробно обяснение на уебсайта на разработчика.

14. Клетка в кутия

Този въображаем дизайн е вдъхновен от традиционните руски кукли (кукла в кукла). Ако отворите външната кутия, като щракнете върху нея, ще се покаже вътрешна кутия, която е и външната кутия на друга вътрешна кутия. Функционалността е написана в jQuery, а точните места на кутиите се задават с помощта на абсолютни и относителни правила за позицията в CSS файла.

15. Кутия за подаръци с ефект на хартиен пилинг

Ако успеете да премахнете лентата от този подарък, като я издърпате, можете да погледнете ефекта на супергладния хартиен пилинг, който разкрива вътрешното съдържание на подаръка. Можете да прочетете пълния урок на уебсайта на разработчика, това е трик, който определено си струва да се научите. Ако просто искате да използвате кода, можете да го клонирате и от GitHub.

16. Анимираното платно на Holiday Spirit

Коледа може да бъде чудесно време за експериментиране с нови неща, точно както разработчикът е направил в тази писалка, използвайки HTML5 платно като анимиран фон. Платното е преди съдържанието (Happy Holidays!) В HTML файла и е зададено като фон с помощта на интелигентно CSS позициониране..

Перото също използва сценарий за фонова анимация, включен като отделен JavaScript файл.

17. Потребителски интерфейс за подаръчна карта

Тази привлекателна подаръчна карта не е само за Коледа, но може да се използва по всяко време, когато искате да изненадате потребителите си с подарък на уебсайта си. Той не разчита на 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 език.

Резултатът е наистина умен и страхотен. С добавянето на малко повече JavaScript може дори да се използва за доставяне на потребителски цитати или съобщения до потребителите.

20. Мигащи коледни светлини

Тези мигащи коледни светлини могат бързо да дадат уникална атмосфера на всеки уебсайт. Предният код е написан в HAML, който се компилира в HTML, Sass, който се компилира в CSS, и jQuery.

Анимираният светещ ефект се постига чрез споменатото по-горе правило @keyframes, предоставено от CSS3. Цветовете на светодиодите се задават в jQuery файла чрез добавяне на 50 градуса към Hue стойността на предишния светодиод, като се използва цветовата скала на HSL..