20 Úžasné vianočné projekty skryté v CodePen

CodePen je on-line ihrisko pre talentovaných vývojárov front-end, miesto, kde môžete vždy nájsť skvelé projekty na rozšírenie vašich obzory a zistiť, čo robia ďalší vývojári. Koniec-koniec dovolenku je skvelý čas na prekvapenie svojich blízkych s kreatívnymi osobnými projektmi, alebo povedať vďaka svojim zákazníkom s niektorými cool, špičkové návrhy, ktoré pomôžu dovolenku fandiť.

V tomto príspevku sa budeme zaoberať 20 úžasných vianočných experimentov na CodePen, ktoré môžete použiť ako inšpiráciu na vytvorenie vlastných návrhov.

1. Rodinná vianočná pesničková kniha

Táto krásna aplikácia Family Song Songbook môže hrať vaše obľúbené vianočné piesne, ktoré sú hosťované na SoundCloud. Pravidlá štýlu sú napísané v jazyku LESS stylesheet a funkcia hudobného prehrávača poskytuje vlastný doplnok jQuery.

Snehové vločky a ikony vianočných stromčekov v pozadí poskytujú slávnostnú atmosféru dizajnu a ak sa vznášate nad perom, môžete nájsť aj jemné efekty CSS.

2. Digitálny vianočný stromček

Navrhovanie na Vianoce je vždy vďačná práca, pretože jeho typické vizuálne prvky môžu byť postavené mnohými tvorivými spôsobmi. Toto pero je dobrým príkladom pre toto. Spočiatku môžete vidieť iba farebné trojuholníky, zdá sa, že nesúvisia so sviatkami, ale keď kliknete na tlačidlo Odkryť, sú spojené do vianočného stromčeka. Nie je to jedinečné riešenie, ale pripomína aj jednoduchšiu hru.

3. Vianočná animácia so snežením

Nemusíte nevyhnutne používať JavaScript, ak chcete vytvoriť vianočnú animáciu. V tomto pere je animácia snehu a obrázky na pozadí vytvorené čisto v CSS. Stojí za to skúsiť kód trochu, pretože ukazuje neuveriteľné možnosti CSS3. Obraz na pozadí sa môže dokonca mýliť so skutočnou grafikou SVG.

4. Santa na beh!

Santa na beh! je zábavná hra JavaScript pre sviatky, ktoré využívajú rámec hry HTML5 pre phaser.js. Nie je príliš veľa pravidiel v tejto hre: Santa beží nekonečne, alebo aspoň kým nepadne. Toto pero vám dáva vynikajúcu príležitosť pochopiť, ako napísať jednoduchšiu hru do jazyka JavaScript.

5. Tajná Santa Santa Picker

Vyberanie mena z klobúka bolo populárnym spôsobom v školách a kanceláriách na výber Secret Santas - toto pero je len digitálna verzia tejto tradície. Keďže používa len latentný JavaScript, môžete ho jednoducho vložiť do svojich vlastných stránok. Stačí meniť mená v rámci premennej dať.

6. Vianočné gule v čistej CSS

Tieto veselé vianočné gule sú napísané čistým CSS, pričom využívajú pravidlá hraničného polomeru. Rôzne časti guľôčok sú nastavené pomocou presne vypočítaných relatívnych polôh.

Ak chcete rýchlo pridať atmosféru dovolenky na webovú stránku, stačí vložiť niektoré z týchto loptičiek na príslušné miesta v farbe, ktorá zodpovedá celkovému dizajnu lokality.

7. Pohyblivé snehové vločky

Tieto snehové vločky sa môžu pohybovať pohybom nad nimi na pracovnej ploche alebo naklonením vášho smartphonu. Táto funkcia je poskytovaná objektovo orientovaným jazykom JavaScript, ktorý vývojár inteligentne používa na vytvorenie vlastnej triedy Snowflake.

Samotné snehové vločky sú postavené v CSS3 a pozadie používa gradienty - v tomto pere nikdy nie sú žiadne obrázky.

8. Experiment s prázdninovým akordom

Táto prázdninová akordeón je jednoducho krásna. Ak prejdete kurzorom nad určitú kartu, dôjde k zaostreniu trochu rozšírením a kliknutím na ňu sa náhle objaví a pokryje celú stránku. Je zaujímavé poznamenať, že toto pero používa škálovateľné vektorové grafiky (SVG), ktoré sú v štýle CSS.

SVG sú silnejšie, ako sa zdá na prvý pohľad, môžu byť elegantne umiestnené a navrhnuté s rovnakými pravidlami štýlu, ktoré používame s bežnými prvkami HTML.

9. Plochý čistý CSS Snowman

Kto povedal, že plochý dizajn musí byť nudný? Tento krásny snehuliak môže ľahko pridať vianočný duch na akýkoľvek dizajn. Na snehuliaka nie sú žiadne obrázky, je to úplne napísané v CSS. Stojí za to pozrieť sa na kód CSS trochu a uvidíte, ako vývojár používa: pred a: po pseudo-selektoroch na dosiahnutie zamýšľaného výsledku.

10. CSS3 Snowflake

Môžete uľahčiť vytváranie obrázkov iba pre CSS3 pomocou pokročilých vývojových nástrojov pre vývojárov; táto dobre navrhnutá snehová vločka CSS3 je vynikajúcim príkladom toho. Vývojár využil Jade templating jazyk, ktorý kompiluje do HTML, a prepracovača SSS CSS implementovať tento úžasný dizajn snehovej vločky.

11. Vianočné tlačidlo

Inteligentné vzory sa často rozhodujú pre jemné riešenia, rovnako ako zasnežené vianočné tlačidlo v tomto pere. Tmavo červené pozadie je ideálnou voľbou pre vianočný dizajn. nie všetko musí byť konečne zelená.

Farby, gradienty, písmo a efekt vznášania robia toto tlačidlo veľmi elegantné a slávnostné. Potrebujete len niekoľko z nich, aby ste rýchlo zdobili miesto na Vianoce.

12. Parallax Happy Holiday

Ak sa vám páči parallax rolovanie, prečo by ste ju nepoužili pre vaše návrhy dovolenky? Vývojár tohto pera inteligentne experimentoval s efektom a používal plugin Parlamax.js jQuery menej obvyklým spôsobom, rolovací efekt nie je vertikálny ako obvykle, ale horizontálny. Vianočnú atmosféru zintenzívňuje pôsobivý sneh

Keby som musel vyberať nejakú chybu tohto pera, bolo by to voľba farby: biele písmená na čiastočnom bielom pozadí výrazne oslabujú prístupnosť dizajnu.

13. Vianočný baliaci papier CSS

Vďaka CSS3 môžete vytvoriť úplne unikátny vianočný baliaci papier. Vývojár tohto pera ukazuje nielen jednu, ale šesť variantov. Krásne vzory sú dosiahnuté inteligentným využívaním gradientov CSS a vlastností režimu pozadia blend.

Môžete nájsť ešte skvelé príklady a podrobné vysvetlenie na webovej stránke vývojára.

14. Kolónka v rámčeku

Tento nápaditý dizajn bol inšpirovaný tradičnými ruskými bábikami (bábika vnútri bábiky). Ak otvoríte vonkajšiu škatuľku kliknutím na nej, odhalí vnútornú škatuľu, ktorá je tiež vonkajším boxom inej vnútornej krabice. Funkcia je napísaná v jQuery a presné miesta polí sú nastavené pomocou absolútnych a relatívnych polohových pravidiel v súbore CSS.

15. Darčeková krabička s efektom odlupovania papiera

Ak sa vám podarí odstrániť stuhu z tohto darčeka tým, že ho pretiahnete, môžete sa pozrieť na efekt sublimačnej papierovej šupky, ktorý odhaľuje vnútorný obsah darčeka. Môžete si prečítať úplný výukový program na webovej stránke vývojára, je to trik, ktorý určite stojí za to sa učiť. Ak chcete kód použiť, môžete ho tiež klonovať z GitHubu.

16. Holiday Animated Canvas

Vianoce môžu byť skvelým časom na experimentovanie s novými vecami, rovnako ako to urobil vývojár v tomto pere pomocou HTML5 plátna ako animovaného pozadia. Plátno prichádza pred obsahom (Happy Holidays!) V súbore HTML a je nastavené ako pozadie pomocou inteligentného umiestnenia CSS.

Pero tiež používa skript animácie na pozadí, ktorý je súčasťou samostatného súboru JavaScript.

17. UI darčekovej karty

Táto atraktívna darčeková karta nie je len na Vianoce, ale môže byť použitá kedykoľvek, keď chcete prekvapiť svojich používateľov s darčekom na vašich webových stránkach. Nespolieha sa na JavaScript, pretože je úplne napísaný v jazyku šablón štýlov Sass.

Návrh používa vlastnosť CSS3 v klipovej dráhe, ktorá umožňuje vývojárom zobrazovať iba určitú oblasť prvku namiesto zobrazenia celej oblasti.

18. Pure CSS Merry Christmas Card

Táto nekonečne smiavaca Santa - používajúca iba HTML a CSS3 - vám dá príležitosť pochopiť, ako sa v praxi môže používať syntax animácie kľúčových snímok. V systéme CSS3 môžete použiť pravidlo @keyframes na určenie pravidiel animácie a potom môžete túto špecifikovanú animáciu viazať na určitý prvok pomocou vlastností animácie CSS3.

Musíte pridať názov kľúčového snímku ako prvú hodnotu vlastností animácie, rovnako ako to urobil vývojár s vlastnými kľúčovými snímkami nazývanými bodyLaugh, beardLaugh, headLaugh a mouthLaugh špeciálne vytvorené pre toto pero.

19. Xmas Cracker

Ak sa vznášate nad týmto pôsobivým Xmas Crackerom, odhalí jedinečnú vianočnú správu, ktorá je úžasným spôsobom, ako si prilákať Veselé Vianoce návštevníkom. HTML je napísaný v jazyku HAML, HTML Abstraction Markup Language, zatiaľ čo pravidlá štýlu využívajú silu jazyka Sass Syntaktically Awesome Stash Sheets.

Výsledok je naozaj inteligentný a úžasný. Pridaním trochu iného jazyka JavaScript sa môže dokonca použiť na dodanie vlastných úvodzoviek alebo správ užívateľom.

20. Blikajúce Xmas svetlá

Tieto blikajúce vianočné osvetlenie môže rýchlo poskytnúť jedinečnú atmosféru každej webovej stránke. Predný kód je napísaný v HAML, ktorý sa kompiluje do HTML, Sass, ktorý sa kompiluje do CSS a jQuery.

Animovaný efekt žiariaceho efektu je dosiahnutý vyššie uvedeným pravidlom @ keyframes, ktoré poskytuje CSS3. Farby LED sú nastavené v súbore jQuery pridaním 50 stupňov k hodnote Hue predchádzajúceho indikátora pomocou HSL farebnej stupnice.