20 geweldige kerstprojecten verborgen in CodePen

CodePen is een online speelterrein voor getalenteerde front-end ontwikkelaars, een plek waar je altijd coole projecten kunt vinden om je horizon te verbreden en te zien wat andere ontwikkelaars van plan zijn. Eindejaarsvakanties zijn een goed moment om uw dierbaren te verrassen met creatieve, persoonlijke projecten, of om uw klanten te bedanken met een aantal coole, geavanceerde ontwerpen die de vakantie helpen op te vrolijken.

In deze post zullen we een kijkje nemen 20 geweldige kerstexperimenten met CodePen, die je kunt gebruiken voor inspiratie om je eigen ontwerpen te maken.

1. Family Christmas Songbook

Deze leuke Family Christmas Songbook-app kan je favoriete kerstliederen afspelen die worden gehost op SoundCloud. De stijlregels zijn geschreven in de LESS-stijlbladtaal en de muziekspelerfunctionaliteit wordt geleverd door een aangepaste jQuery-plug-in.

De sneeuwvlok- en kerstboompictogrammen op de achtergrond geven een plechtige sfeer aan het ontwerp en als u de muisaanwijzer over de pen houdt, kunt u ook een aantal subtiele CSS-effecten vinden.

2. Digitale kerstboom

Ontwerpen voor Kerstmis is altijd een dankbare taak, omdat de typische visuele elementen ervan op vele creatieve manieren kunnen worden gebouwd. Deze pen is daar een goed voorbeeld van. In het begin kun je alleen kleurrijke driehoeken zien, die schijnbaar niets met de vakantie te maken hebben, maar als je op de knop Reveal klikt, worden ze samen in een kerstboom geplaatst. Het is niet alleen een unieke oplossing, maar doet ook denken aan een eenvoudiger spel.

3. Kerstanimatie met sneeuwval

U hoeft niet per se JavaScript te gebruiken, als u voor Kerstmis een gave animatie wilt maken. In deze pen worden zowel de sneeuwvalanimatie als de achtergrondafbeeldingen uitsluitend in CSS gemaakt. Het is de moeite waard om de code een beetje te onderzoeken, omdat het de ongelooflijke mogelijkheden van CSS3 laat zien. De achtergrondafbeelding kan zelfs worden aangezien voor een echte SVG-afbeelding.

4. Santa On The Run!

Santa On The Run! is een leuk JavaScript-spel voor de feestdagen met behulp van het phaser.js HTML5-gameframework. Er zijn niet veel regels in deze game: de kerstman loopt oneindig lang, of in elk geval totdat hij valt. Deze pen biedt u een uitstekende mogelijkheid om te begrijpen hoe u een eenvoudiger spel in JavaScript kunt schrijven.

5. Secret Santa Name Picker

Een naam uit een hoed kiezen is een populaire manier in scholen en kantoren om Secret Santas te plukken - deze pen is slechts een digitale versie van deze traditie. Omdat het alleen vanille JavaScript gebruikt, kunt u het eenvoudig in uw eigen site insluiten. Verander gewoon de namen binnen de geef variabele.

6. Kerstballen in Pure CSS

Deze vrolijke kerstballen zijn geschreven in pure CSS, waarbij gebruik wordt gemaakt van de grensradiusregels. De verschillende delen van de ballen worden samengevoegd door gebruik te maken van nauwkeurig berekende relatieve posities.

Als u snel een vakantiesfeer aan een webpagina wilt toevoegen, voegt u enkele van deze ballen toe aan de juiste plaatsen in een kleur die overeenkomt met het algemene ontwerp van de site..

7. Beweegbare sneeuwvlokken

U kunt deze sneeuwvlokken laten bewegen door erover op een bureaublad te zweven of door uw smartphone te kantelen. De functionaliteit wordt geboden door object-georiënteerd JavaScript dat slim door de ontwikkelaar wordt gebruikt om een ​​aangepaste Snowflake-klasse te maken.

De sneeuwvlokken zelf zijn gebouwd in CSS3 en de achtergrond maakt gebruik van verlopen - er zijn helemaal geen afbeeldingen in deze pen.

8. Holiday Accordion Experiment

Deze vakantieaccordeon is gewoon prachtig. Als je de muisaanwijzer over een tabblad beweegt, wordt het scherpgesteld door een beetje uit te vouwen en als je erop klikt, wordt het plotseling weergegeven en bedekt het de hele pagina. Het is interessant om op te merken dat deze pen gebruikmaakt van Scalable Vector Graphics (SVG) die zijn gestileerd met CSS.

SVG's zijn krachtiger dan ze op het eerste gezicht lijken, ze kunnen slim worden gepositioneerd en ontworpen met dezelfde stijlregels die we gebruiken met normale HTML-elementen.

9. Platte Pure CSS Snowman

Wie zei dat plat ontwerp saai moet zijn? Deze mooie sneeuwman kan gemakkelijk kerststemming toevoegen aan elk ontwerp. Er zijn geen afbeeldingen gebruikt voor de sneeuwpop, het is volledig geschreven in CSS. Het is de moeite waard om de CSS-code een beetje te bekijken en te zien hoe de ontwikkelaar de: before en: after pseudo selectors gebruikt om het beoogde resultaat te bereiken.

10. CSS3 Sneeuwvlok

U kunt het maken van CSS3-alleen afbeeldingen vergemakkelijken met behulp van geavanceerde front-end ontwikkeltools; deze goed ontworpen CSS3 sneeuwvlok is daar een uitstekend voorbeeld van. De ontwikkelaar maakte gebruik van de Jade-template-taal die in HTML wordt gecompileerd, en de Sass CSS-preprocessor om dit prachtige sneeuwvlokontwerp te implementeren.

11. Kerstknoop

Slimme ontwerpen kiezen vaak voor subtiele oplossingen, net als de besneeuwde Christmas Button in deze pen. De donkerrode achtergrond is een perfecte keuze voor een kerstontwerp; niet alles hoeft toch groen te zijn.

De kleuren, de hellingen, het letterbeeld en het zweefeffect maken deze knop zeer elegant en plechtig. Je hebt er maar een paar nodig om snel een site voor kerst te versieren.

12. Parallax Happy Holiday

Als je van parallax scrollen houdt, waarom zou je het dan niet gebruiken voor je vakantieontwerpen? De ontwikkelaar van deze pen heeft slim met het effect geëxperimenteerd en de Parallax.js jQuery-plug-in op een minder gebruikelijke manier gebruikt, het scrolleffect is niet verticaal zoals gebruikelijk, maar horizontaal. De kerstsfeer wordt geïntensiveerd door een indrukwekkende sneeuwval

Als ik een foutje van deze pen zou moeten kiezen, zou dit de kleurkeuze zijn: witte letters op een gedeeltelijk witte achtergrond verzwakken de toegankelijkheid van het ontwerp aanzienlijk.

13. CSS-kerstverpakking

U kunt een volledig uniek Kerstwikkelpapier maken met behulp van CSS3. De ontwikkelaar van deze pen toont niet alleen één, maar zes varianten hiervoor. De prachtige patronen worden bereikt door slim gebruik te maken van CSS-gradiënten en de eigenschap background-blend-mode.

U kunt nog meer leuke voorbeelden en een gedetailleerde uitleg vinden op de eigen website van de ontwikkelaar.

14. Box in een doos

Dit fantasierijke ontwerp is geïnspireerd op traditionele Russische poppen (een pop in een pop). Als u de buitenste doos opent door erop te klikken, wordt een binnenste doos zichtbaar die ook de buitenste doos van een andere binnendoos is. De functionaliteit is geschreven in jQuery en de exacte plaatsen van de vakken worden ingesteld met behulp van absolute en relatieve positieregels in het CSS-bestand.

15. Geschenkverpakking met papierafpeleffect

Als het je lukt om het lint van dit cadeau te verwijderen door het weg te slepen, kun je een kijkje nemen naar het papiereffect van de supercool-papiersoort dat de inhoud van het cadeau onthult. Je kunt de volledige tutorial op de website van de ontwikkelaar lezen, het is een kunstje dat het zeker de moeite waard is om te leren. Als je de code gewoon wilt gebruiken, kun je deze ook vanuit GitHub klonen.

16. Holiday Spirit geanimeerd canvas

Kerstmis kan een geweldige tijd zijn om te experimenteren met nieuwe dingen, net zoals de ontwikkelaar het in deze pen deed door HTML5-canvas te gebruiken als een geanimeerde achtergrond. Het canvas komt voor de inhoud (Happy Holidays!) In het HTML-bestand, en het is ingesteld als achtergrond met behulp van slimme CSS-positionering.

De pen gebruikt ook een achtergrondanimatiescript dat als een afzonderlijk JavaScript-bestand is opgenomen.

17. Geschenkkaart UI

Deze opvallende cadeaubon is niet alleen voor Kerstmis, maar kan op elk moment worden gebruikt wanneer u uw gebruikers wilt verrassen met een geschenk op uw website. Het is niet afhankelijk van JavaScript, omdat het volledig is geschreven in de Sass-stylesheet-taal.

Het ontwerp maakt gebruik van de CSS3-eigenschap van het clippad, waarmee ontwikkelaars alleen een specifiek gebied van een element kunnen weergeven, in plaats van het hele gebied ervan te tonen.

18. Pure CSS Merry Christmas Card

Deze oneindig lachende Kerstman - alleen HTML en CSS3 gebruiken - kan je de kans geven om te begrijpen hoe de syntaxis van de keyframe-animatie in de praktijk kan worden gebruikt. In CSS3 kunt u de regel @keyframes gebruiken om de regels van een animatie op te geven en vervolgens kunt u deze gespecificeerde animatie aan een bepaald element binden door de eigenschap CSS3 van de animatie te gebruiken.

U moet de naam van het hoofdframe toevoegen als de eerste waarde van de eigenschap animation, net zoals de ontwikkelaar dit deed met de aangepaste hoofdframes met de naam bodyLaugh, beardLaugh, headLaugh en mouthLaugh die speciaal voor deze pen zijn gemaakt.

19. Xmas Cracker

Als je zweeft over deze indrukwekkende Xmas Cracker, onthult het een unieke kerstboodschap die een geweldige manier is om een ​​vrolijk kerstfeest te wensen aan je bezoekers. De HTML is geschreven in HAML, de HTML Abstraction Markup Language, terwijl de stijlregels gebruik maken van de kracht van de Sass Syntactically Awesome Styesheets-taal.

Het resultaat is inderdaad slim en geweldig. Door een beetje meer JavaScript toe te voegen kan het zelfs worden gebruikt om aangepaste offertes of berichten aan de gebruikers te leveren.

20. Knipperende kerstverlichting

Deze knipperende kerstverlichting kan snel een unieke sfeer aan elke website geven. De front-endcode is geschreven in HAML die compileert in HTML, Sass dat compileert in CSS en jQuery.

Het geanimeerde gloeieffect wordt bereikt door de eerder genoemde regel @keyframes van CSS3. De kleuren van de leds worden ingesteld in het jQuery-bestand door 50 graden toe te voegen aan de tintwaarde van de vorige led met behulp van de HSL-kleurenschaal.