20 Авесоме Цхристмас Пројецтс Хидден ин ЦодеПен

ЦодеПен је онлине игралиште за талентоване фронт-енд програмере, мјесто гдје увијек можете пронаћи кул пројекте за проширење видика, и видјети што други програмери раде. Годишњи празници су сјајно вријеме да изненадите своје најмилије креативним личним пројектима, или да се захвалите својим клијентима са неким цоол, врхунским дизајном који ће помоћи празничном расположењу.

У овом посту ћемо погледати 20 авесоме Цхристмас експериментов на ЦодеПен, које можете користити за инспирацију за креирање властитих дизајна.

1. Фамили Цхристмас Сонгбоок

Ова прелепа апликација Фамили Цхристмас Сонгбоок може да репродукује ваше омиљене божићне песме на СоундЦлоуду. Правила стила су написана на језику слога ЛЕСС, а функционалност музичког плејера обезбеђена је прилагођеним ЈКуери додатком.

Иконе сњежне пахуље и божићне јелке у позадини дају свечану атмосферу дизајну, а ако лебдите изнад оловке можете наћи и неке суптилне ЦСС ефекте..

2. Дигитално божићно дрвце

Дизајнирање за Божић је увек захвалан посао, јер се његови типични визуелни елементи могу градити на много креативних начина. Ова оловка је добар пример за то. Прво можете видети само шарене троуглове, наизглед неповезане са празницима, али када кликнете на дугме Откриј, они су заједно постављени у божићно дрвце. То није само јединствено решење, већ подсећа на једноставнију игру.

3. Цхристмас Аниматион витх Сновфалл

Не морате да користите ЈаваСцрипт, ако желите да направите кул анимацију за Божић. У овом перо, и анимација за снег и позадинске слике се креирају искључиво у ЦСС-у. Вриједно је мало размотрити код, јер показује невјеројатне могућности ЦСС3. Позадинска слика се чак може заменити за прави СВГ графику.

4. Санта Он Тхе Рун!

Санта на трчању! је забавна ЈаваСцрипт игра за празнике који користе пхасер.јс оквир за игре ХТМЛ5. Не постоји превише правила у овој игри: Деда Мраз ради бесконачно, или барем док не падне. Ова оловка вам даје одличну прилику да разумете како да напишете једноставнију игру у ЈаваСцрипту.

5. Сецрет Санта Пицкер

Одабир имена из шешира био је популаран начин у школама и уредима да одаберу тајни Сантас - ова оловка је само дигитална верзија ове традиције. Пошто користи само ванилије ЈаваСцрипт, можете га лако уградити у свој сајт. Само промените имена унутар променљиве.

6. Божићне кугле у чистом ЦСС-у

Ове веселе божићне лоптице су написане у чистом ЦСС-у узимајући у обзир правила граничног радијуса. Различити делови куглица се постављају заједно користећи прецизно израчунате релативне положаје.

Ако желите брзо додати празничну атмосферу на веб страницу, само уметните неке од тих лопти на одговарајућа мјеста у боји која одговара укупном дизајну веб-локације.

7. Покретне пахуљице

Ове сњежне пахуљице можете помјерати тако што ћете се кретати изнад њих на радној површини или нагињати паметни телефон. Функционалност је обезбеђена од стране објектно оријентисаног ЈаваСцрипт-а који паметно користи програмер за креирање прилагођене класе Сновфлаке-а.

Сами пахуљице су уграђене у ЦСС3, а позадина користи градијенте - уопште нема слика у овој оловци.

8. Холидаи Аццордион Екперимент

Ова хармоника хармоника је једноставно прелепа. Ако пређете преко таба, фокус ће се проширити, а ако кликнете на њега, изненада ће се појавити и покрити цијелу страницу. Интересантно је напоменути да ова оловка користи Сцалабле Вецтор Грапхицс (СВГ) која је стилизована са ЦСС-ом.

СВГ-ови су моћнији него што се чини на први поглед, могу бити паметно позиционирани и дизајнирани са истим правилима стила која користимо са обичним ХТМЛ елементима.

9. Флат Пуре ЦСС Сновман

Тко је рекао да дизајн мора бити досадан? Овај диван сњеговић може лако додати Божићни дух било којем дизајну. Нема слика које се користе за сњеговића, потпуно је написано у ЦСС-у. Вриједно је мало погледати ЦСС код и видјети како програмер користи: прије и након псеудо селектора како би постигао жељени резултат.

10. ЦСС3 Сновфлаке

Можете олакшати стварање ЦСС3-слика помоћу напредних напредних развојних алата; ова добро дизајнирана снежна пахуљица ЦСС3 је одличан пример за то. Програмер је користио Јаде темплатинг језик који се компајлира у ХТМЛ, а Сасс ЦСС предпроцесор за имплементацију овог задивљујућег дизајна пахуљица.

11. Цхристмас Буттон

Паметни дизајни често се одлучују за суптилна решења, баш као и снежни божићни дугме у овом перо. Тамно црвена позадина је савршен избор за божићни дизајн; не мора све бити зелено.

Боје, градијенти, типографија и ефекат лебдења чине ово дугме веома елегантним и озбиљним. Потребно вам је само неколико њих да брзо украсите сајт за Божић.

12. Параллак Хаппи Холидаи

Ако волите скроловање паралаксе, зашто га не бисте користили за ваше благдане? Програмер ове оловке паметно је експериментисао са ефектом и користио је плугин Параллак.јс јКуери на мање уобичајеном начину, ефекат померања није вертикалан као и обично, већ хоризонтални. Божићну атмосферу појачава импресиван снег

Ако бих морао да изаберем било који недостатак ове оловке, то би био избор боја: бела слова на делимично белој позадини значајно слабе доступност дизајна.

13. ЦСС божићни омотни папир

Уз ЦСС3 можете креирати потпуно јединствен божићни омотни папир. Програмер ове оловке показује не само једну, већ шест варијанти за ово. Прелепи обрасци постижу се паметном употребом ЦСС градијента и својства бацкгроунд-бленд-моде.

Можете пронаћи још занимљиве примјере и детаљно објашњење на веб страници развојног програмера.

14. Кутија унутар кутије

Овај маштовити дизајн инспирисан је традиционалним руским луткама (лутка у лутки). Ако отворите спољашњу кутију кликом на њу, она открива унутрашњу кутију која је уједно и вањска кутија друге унутрашње кутије. Функционалност је написана у јКуери, а тачна места кутија се подешавају уз помоћ апсолутних и релативних правила положаја у ЦСС датотеци.

15. Поклон кутија са ефектом папира

Ако успете да уклоните траку са овог поклона тако што ћете је одвући, можете да погледате ефекат љуштења папира који открива унутрашњи садржај поклона. Можете прочитати цијели водич на веб-локацији програмера, то је трик који свакако вриједи научити. Ако само желите да користите код, можете га клонирати и из ГитХуб-а.

16. Холидаи Спирит Аниматед Цанвас

Божић може бити одличан тренутак за експериментисање са новим стварима, баш као што је то урадио девелопер у овој оловци користећи ХТМЛ5 платно као анимирану позадину. Платно долази пред садржај (Хаппи Холидаис!) У ХТМЛ датотеци, а постављен је као позадина уз помоћ паметног ЦСС позиционирања.

Оловка такође користи позадинску анимацију која је укључена као засебна ЈаваСцрипт датотека.

17. Поклон картица

Ова атрактивна поклон картица није само за Божић, већ се може користити у било које вријеме када желите да своје кориснике изненадите поклоном на Вашој веб страници. Не ослања се на ЈаваСцрипт јер је у потпуности написан на Сасс стилском језику.

Дизајн користи ЦСС3 својство цлип-патх који дозвољава програмерима да прикажу само одређени регион елемента, уместо да приказују његову целу област.

18. Пуре ЦСС Мерри Цхристмас Цард

Овај бескрајно смејући Деда Мраз - користећи само ХТМЛ и ЦСС3 - може вам дати прилику да разумете како се синтакса анимације кључног оквира може користити у пракси. У ЦСС3 можете користити правило @кеифрамес да бисте специфицирали правила анимације, а затим можете повезати наведену анимацију са одређеним елементом помоћу својства анимације ЦСС3.

Морате да додате име кључног кадра као прву вредност својства анимације, баш као што је програмер то урадио са прилагођеним кључним оквирима који се зову бодиЛаугх, беардЛаугх, хеадЛаугх и моутхЛаугх посебно креирани за ову оловку.

19. Ксмас Црацкер

Ако лебдите изнад овог импресивног Ксмас Црацкер-а, он открива јединствену Божићну поруку која је невероватан начин да се Вашим посетиоцима пожели честит Божић. ХТМЛ је писан у ХАМЛ-у, ХТМЛ Маркуп Лангуаге за апстракцију, док правила стила узимају у обзир моћ Сасс Синтацтицалли Авесоме Стиесхеетс језика.

Резултат је заиста паметан и страшан. Додавањем мало више ЈаваСцрипт-а може се чак користити за испоруку прилагођених цитата или порука корисницима.

20. Трепери Божићна светла

Ова бљескајућа божићна светла могу брзо дати јединствену атмосферу сваком сајту. Фронт-енд код је написан у ХАМЛ-у који се компилира у ХТМЛ, Сасс који компилира у ЦСС, и јКуери.

Анимирани ефекат ужареном постиже се горе наведеним правилом @кеифрамес којег даје ЦСС3. Боје ледова се подешавају у јКуери датотеци додавањем 50 степени у Хуе вредност претходног вођеног помоћу ХСЛ скале боја.