20 Skvělé vánoční projekty skryté v CodePen

CodePen je online hřiště pro talentované přední vývojáře, místo, kde můžete vždy najít skvělé projekty, které rozšíří vaše obzory, a zjistit, co ostatní vývojáři mají. Celoroční prázdniny jsou skvělým časem, jak překvapit své blízké tvůrčími osobními projekty, nebo poděkovat svým zákazníkům s některými chladnými, špičkovými návrhy, které pomohou svému fandění..

V tomto příspěvku se podíváme na 20 úžasných vánočních experimentů na CodePen, můžete použít pro inspiraci k vytvoření vlastních návrhů.

1. Vánoční vánoční zpěvník

Tato krásná rodina Christmas Songbook aplikace můžete přehrávat své oblíbené vánoční písně hostované na SoundCloud. Pravidla stylu jsou napsána v jazyce styly LESS a funkce hudebního přehrávače je poskytována vlastním pluginem jQuery.

Ikony sněhové vločky a vánoční stromeček na pozadí dávají designu slavnostní atmosféru a pokud se nad perem vznášíte, můžete také najít nějaké jemné efekty CSS.

2. Digitální vánoční strom

Projektování na Vánoce je vždy vděčná práce, protože jeho typické vizuální prvky mohou být budovány mnoha tvůrčími způsoby. Toto pero je pro to dobrý příklad. Zpočátku můžete vidět pouze barevné trojúhelníky, zdánlivě nesouvisející s prázdninami, ale když kliknete na tlačítko Odhalit, jsou umístěny do vánočního stromu. Není to jen unikátní řešení, ale také připomínající jednodušší hru.

3. Vánoční animace se sněžením

Nemusíte nutně používat JavaScript, pokud chcete vytvořit skvělou animaci na Vánoce. V tomto peru se vytváří animace sněžení a obrázky na pozadí čistě v CSS. Stojí za to prozkoumat kód trochu, protože ukazuje neuvěřitelné možnosti CSS3. Obrázek pozadí může být dokonce zaměněn za skutečnou grafiku SVG.

4. Santa na útěku!

Santa na útěku! je zábavná JavaScriptová hra pro svátky s využitím herního rámce HTML5 phaser.js. Neexistuje příliš mnoho pravidel v této hře: Santa běží nekonečně, nebo alespoň do té doby, než spadne. Toto pero vám dává vynikající příležitost pochopit, jak psát jednodušší hru v JavaScriptu.

5. Tajný Santa Name Picker

Vybírat jméno z klobouku bylo populární cestou ve školách a kancelářích, aby si vybrali Secret Santas - toto pero je pouze digitální verzí této tradice. Jelikož používá pouze vanilkový JavaScript, můžete jej snadno vložit na své vlastní stránky. Stačí změnit názvy uvnitř proměnné give.

6. Vánoční koule v Pure CSS

Tyto veselé vánoční koule jsou napsány v čistém CSS s využitím hraničních pravidel. Různé části kuliček se nastavují pomocí přesně vypočtených relativních poloh.

Chcete-li na webovou stránku rychle přidat atmosféru svátků, vložte některé z těchto kuliček na příslušná místa v barvě odpovídající celkovému designu stránek..

7. Pohyblivé sněhové vločky

Můžete si tyto sněhové vločky pohybovat vznášením se nad nimi na ploše nebo naklápěním smartphonu. Funkčnost je zajištěna objektově orientovaným JavaScriptem, který vývojář inteligentně používá k vytvoření vlastní třídy Snowflake.

Samotné sněhové vločky jsou zabudovány v CSS3 a pozadí používá přechody - v tomto peru nejsou vůbec žádné obrázky.

8. Experiment na dovolené akordeon

Tento svátek akordeon je prostě krásný. Pokud se přesunete nad kartu, můžete se zaměřit tak, že se trochu rozbalíte, a pokud na ni kliknete, náhle se objeví a pokryje celou stránku. Je zajímavé si všimnout, že toto pero používá škálovatelnou vektorovou grafiku (SVG), která je stylizovaná s CSS.

SVG jsou silnější, než se na první pohled jeví, mohou být inteligentně umístěny a navrženy se stejnými pravidly stylu, jaké používáme s běžnými prvky HTML.

9. Flat Pure CSS Sněhulák

Kdo řekl, že plochý design musí být nudný? Tento krásný sněhulák může snadno přidat vánoční duch do jakéhokoliv designu. Pro sněhuláka nejsou žádné obrázky, je to kompletně napsáno v CSS. Stojí za to se trochu podívat na kód CSS a zjistit, jak vývojář používá: před a po pseudo selektorech k dosažení zamýšleného výsledku.

10. Sněhová vločka CSS3

Vytváření obrazů pouze pomocí CSS3 můžete usnadnit pomocí pokročilých vývojových nástrojů; tento dobře navržený sněhová vločka CSS3 je pro to vynikající příklad. Vývojář využil Jade šablonovací jazyk, který kompiluje do HTML, a Sass CSS preprocesor pro implementaci tohoto ohromujícího designu vloček.

11. Vánoční tlačítko

Inteligentní návrhy se často rozhodnou pro jemná řešení, stejně jako zasněžené vánoční tlačítko v tomto peru. Tmavě červené pozadí je ideální volbou pro vánoční design; ne všechno musí být po tom všem zelené.

Barvy, přechody, písmo a efekt přechodu činí toto tlačítko velmi elegantním a slavnostním. Potřebujete jen několik z nich, abyste rychle ozdobili místo pro Vánoce.

12. Parallax Happy Holiday

Pokud se vám líbí paralaxa rolování, proč byste ji použít pro své dovolené vzory? Vývojář tohoto pera inteligentně experimentoval s efektem, a používal Parallax.js jQuery plugin méně obyčejným způsobem, rolování efekt není svislý jako obvykle, ale vodorovný. Vánoční atmosféru umocňuje působivé sněžení

Kdybych si musel vyzvednout jakoukoliv chybu tohoto pera, byla by to volba barvy: bílá písmena na částečně bílém pozadí významně oslabují přístupnost designu.

13. CSS vánoční balicí papír

Pomocí CSS3 můžete vytvořit zcela unikátní vánoční balicí papír. Vývojář tohoto pera pro to ukazuje nejen jednu, ale šest variant. Překrásných vzorů je dosaženo inteligentním využitím CSS přechodů a vlastností pozadí-blend-mode.

Ještě více skvělých příkladů a podrobnější vysvětlení naleznete na vlastní webové stránce vývojáře.

14. Box v rámečku

Tento nápaditý design byl inspirován tradičními ruskými panenkami (panenka uvnitř panenky). Pokud otevřete vnější krabici kliknutím na ni, odhalí vnitřní krabici, která je také vnější krabicí jiné vnitřní krabice. Funkce je zapsána v jQuery a přesná místa polí jsou nastavena pomocí pravidel absolutní a relativní polohy v souboru CSS.

15. Dárková krabička s efektem odlupování papíru

Pokud se vám podaří odstranit stuhu z tohoto dárku přetažením, můžete se podívat na efekt superkolové papírové slupky, který odhaluje vnitřní obsah dárku. Můžete si přečíst celý návod na webu vývojáře, je to trik, který stojí za to se učit. Pokud chcete kód použít, můžete jej také klonovat z GitHubu.

16. Animované plátno na dovolené

Vánoce mohou být skvělým časem pro experimentování s novými věcmi, stejně jako to dělal vývojář v tomto peru pomocí plátna HTML5 jako animovaného pozadí. Plátno předchází obsahu (Veselé svátky!) V souboru HTML a je nastaveno jako pozadí pomocí inteligentního umístění CSS.

Pero také používá skript animace pozadí, který je součástí samostatného souboru JavaScript.

17. UI dárkové karty

Tato poutavá dárková karta není jen na Vánoce, ale může být použita kdykoliv, když chcete překvapit své uživatele dárkem na svých webových stránkách. Nezávisí na JavaScriptu, protože je zcela napsán v jazyce stylů Sass.

Návrh využívá vlastnost CSS3 clip-path, která umožňuje vývojářům zobrazit pouze určitou oblast prvku, místo aby zobrazovala celou oblast..

18. Pure CSS Veselé vánoční přání

Tento nekonečně se smíchající Santa - pomocí pouze HTML a CSS3 - vám může poskytnout příležitost pochopit, jak lze v praxi použít syntaxi klíčových animací klíčových snímků. V CSS3 můžete použít pravidlo @keyframes ke specifikaci pravidel animace a poté můžete tuto specifickou animaci svázat s určitým prvkem pomocí vlastnosti CSS3 animace.

Musíte přidat název klíčového snímku jako první hodnotu vlastnosti animace, stejně jako to udělal vývojář s vlastními klíčovými snímky nazvanými bodyLaugh, beardLaugh, headLaugh a mouthLaugh speciálně vytvořené pro toto pero..

19. Vánoční Cracker

Pokud se vznášíte nad touto impozantní vánoční Cracker, odhalí unikátní vánoční poselství, které je úžasný způsob, jak přeji veselé Vánoce svým návštěvníkům. HTML je napsáno v HAML, HTML Abstraction Markup Language, zatímco pravidla stylu berou sílu jazyka jazyka Sass Syntactically Awesome Styesheets.

Výsledek je opravdu chytrý a úžasný. Přidáním trochu více JavaScript to může být dokonce použit k dodání vlastní citace nebo zprávy uživatelům.

20. Blikající vánoční světla

Tyto blikající vánoční světla mohou rychle dát jedinečnou atmosféru na všechny webové stránky. Kód front-end je napsán v HAML, který se zkompilovává do HTML, Sassu, který se zkompilovává do CSS, a jQuery.

Animovaný zářivý efekt je dosažen výše uvedeným pravidlem @keyframes poskytovaným CSS3. Barvy led jsou nastaveny v souboru jQuery přidáním 50 stupňů k hodnotě odstínu předchozího ledu pomocí barevné škály HSL.