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. Jaarlijkse vakanties 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 vrolijker maken.

In deze post zullen we een kijkje nemen naar 20 geweldige kerstexperimenten op CodePen, die je kunt gebruiken als inspiratie voor het maken van je eigen ontwerpen.

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 klus, omdat de typische visuele elementen op veel creatieve manieren kunnen worden gebouwd. Deze pen is hier een goed voorbeeld van. In het begin kun je alleen kleurrijke driehoeken zien, die schijnbaar niets met de vakantie te maken hebben, maar wanneer 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 een leuke animatie voor Kerstmis 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, plaatst u enkele van deze ballen op 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 objectgeorië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. Als je hierop klikt, wordt het plotseling weergegeven en bedekt het de hele pagina. Het is interessant om op te merken dat deze pen Scalable Vector Graphics (SVG) gebruikt 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 prachtige sneeuwman kan gemakkelijk kerststemming toevoegen aan elk ontwerp. Er zijn geen afbeeldingen gebruikt voor de sneeuwman, het is volledig geschreven in CSS. Het loont de moeite om de CSS-code een beetje te bekijken en te zien hoe de ontwikkelaar de: before and: 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-sjabloontaal die wordt gecompileerd in HTML, 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 moet tenslotte groen 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 experimenteerde slim met het effect en gebruikte de plug-in Parallax.js jQuery op een minder gebruikelijke manier, het scrolleffect is niet verticaal zoals gebruikelijk, maar horizontaal. De kerstsfeer wordt versterkt door een indrukwekkende sneeuwval

Als ik een tekortkoming 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-kerstverpakkingspapier

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 omdoos 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-papierlade 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 maakt ook gebruik van 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, die alleen HTML en CSS3 gebruikt, 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 opgegeven animatie aan een bepaald element binden door de eigenschap CSS3 van 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, baardLaugh, 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 taal Sass Syntactically Awesome Styesheets.

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 en wordt gecompileerd in HTML, Sass dat compileert naar CSS en jQuery.

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

10 meest invloedrijke videospellen aller tijden

Er is waarschijnlijk geen consensus over wat de top 10 van de ooit uitgebrachte videogames is, maar de meesten van ons hebben een vermoeden gebaseerd op recensiesites en mond-tot-mondreclame. Wat betreft mijn eigen maatstaf voor uitzonderlijk goede games, moeten ze de ontwikkeling van volgende titels enorm hebben beïnvloed of dat ze op het punt van hun release verder zijn gegaan dan de goknormen .

(Technische en ontwerptips)

5 dingen om te doen met uw afgewezen Guest Post Pitch

Heb je ooit een idee van een gastpost op een blog gezet, alleen om een ​​beleefde afwijzing terug te krijgen - of nog erger, helemaal geen antwoord? Het doet pijn, toch? Afwijzing kan je verbitteren ("Maar dit is een geweldig idee! Hoe konden die blogbezitters anders denken?"), Of je met twijfel aan jezelf vullen ("Nou, ik denk dat dit toch een stom idee was.&qu

(Technische en ontwerptips)