20 fantastiske julprojekter gemt i CodePen

CodePen er en online legeplads for talentfulde front-end-udviklere, et sted hvor du altid kan finde kølige projekter for at udvide dine horisonter og se, hvilke andre udviklere der er op til. Årsferien er en god tid til at overraske dine kære med kreative personlige projekter eller sige tak til dine kunder med nogle flotte, spidse design, der vil hjælpe ferien jubel.

I dette indlæg vil vi kigge på 20 fantastiske juleksperimenter på CodePen, at du kan bruge til inspiration til at lave dine egne designs.

1. Familie julens sangbog

Denne dejlige Family Christmas Songbook app kan afspille dine yndlingsjulesange på SoundCloud. Stilreglerne er skrevet i LERE stilarks sprog, og musikafspillerens funktionalitet leveres af et brugerdefineret jQuery-plugin.

Snefnuget og juletræets ikoner i baggrunden giver en højtidelig atmosfære til designet, og hvis du svæver over pennen, kan du også finde nogle subtile CSS effekter.

2. Digital juletræ

Design til jul er altid et taknemmeligt job, da dets typiske visuelle elementer kan bygges på mange kreative måder. Denne pen er et godt eksempel på dette. I første omgang kan du kun se farverige trekanter, tilsyneladende uden forbindelse med ferien, men når du klikker på Reveal-knappen, sættes de sammen i et juletræ. Det er ikke kun en unik løsning, men minder også om et enklere spil.

3. Julenergi med snefald

Du behøver ikke nødvendigvis at bruge JavaScript, hvis du vil oprette en cool animation til jul. I denne pen fremstilles både snefaldsanimationen og baggrundsbillederne rent i CSS. Det er værd at undersøge koden lidt, da det viser de utrolige muligheder i CSS3. Baggrundsbillet kan endog forveksles med en ægte SVG-grafik.

4. Julemanden på kørslen!

Santa på kørslen! er et sjovt JavaScript-spil til ferien, der gør brug af phaser.js HTML5-spilrammen. Der er ikke for mange regler i dette spil: Santa løber uendeligt eller i hvert fald indtil han falder ned. Denne penn giver dig en glimrende mulighed for at forstå, hvordan man skriver et enklere spil i JavaScript.

5. Secret Santa Name Picker

At hente et navn ud af en hat har været en populær måde i skoler og kontorer at vælge Secret Santas - denne pen er blot en digital version af denne tradition. Da det kun bruger vanilla JavaScript, kan du nemt integrere det i dit eget websted. Bare skift navnene inden for give variablen.

6. Julegave i ren CSS

Disse muntre julekugler er skrevet i ren CSS, der tager højde for grænseradiusreglerne. De forskellige dele af kuglerne sættes sammen ved at anvende præcist beregnede relative positioner.

Hvis du hurtigt vil føje en ferieatmosfære til en webside, skal du blot indsætte nogle af disse bolde på de relevante steder i en farve, der matcher webstedets overordnede design.

7. Flytbare snefnug

Du kan gøre disse snefnug bevægelige ved at svinge over dem på et skrivebord eller ved at vippe din smartphone. Funktionaliteten leveres af objektorienteret JavaScript, der er brugt af udvikleren til at oprette en brugerdefineret Snowflake-klasse.

Snefnugerne selv er bygget i CSS3, og baggrunden bruger gradienter - der er slet ingen billeder i denne penne.

8. Holiday Accordion Experiment

Denne ferie accordeon er simpelthen smuk. Hvis du svæver over en fane, kommer det til at fokusere ved at udvide en smule, og hvis du klikker på det, kommer det pludselig op og dækker hele siden. Det er interessant at bemærke, at denne pen bruger Scalable Vector Graphics (SVG), der er stylet med CSS.

SVG'er er mere magtfulde end de synes at være ved første øjekast, de kan placeres smart og designet med de samme stilregler, som vi bruger med regelmæssige HTML-elementer.

9. Flad ren CSS Snemand

Hvem sagde, at fladt design skal være kedeligt? Denne dejlige snemand kan nemt tilføje julesand til ethvert design. Der er ingen billeder brugt til sneen, den er helt skrevet i CSS. Det er værd at tage et kig på CSS-koden lidt, og se hvordan udvikleren bruger: før og: efter pseudo-selektorer for at opnå det ønskede resultat.

10. CSS3 snefnug

Du kan lette oprettelsen af ​​CSS3-kun billeder ved hjælp af avancerede front-end udviklingsværktøjer; Denne veldesignede CSS3 snefnug er et glimrende eksempel på dette. Udvikleren benyttede sig af Jade-templerende sprog, der kompilerer til HTML, og Sass CSS preprocessoren til at gennemføre denne fantastiske snefnug design.

11. juleknap

Smarte designs vælger ofte subtile løsninger, ligesom den snedækkede juleknapp i denne pen. Den mørkerøde baggrund er et perfekt valg til jule design; ikke alt skal være grønt.

Farverne, gradienterne, skrifttypen og svæveffekten gør denne knap meget elegant og højtidelig. Du har kun brug for et par af dem til hurtigt at dekorere et websted til kristendommen.

12. Parallax Happy Holiday

Hvis du kan lide parallax scrolling, hvorfor ville du ikke bruge den til dine feriedesigner? Udvikleren af ​​denne penn eksperimenterede effektivt med effekten, og brugte Parallax.js jQuery-plugin på en mindre almindelig måde, den rullende virkning er ikke lodret som normalt, men horisontalt. Julestemningen intensiveres af et imponerende snefald

Hvis jeg skulle vælge en fejl i denne pen, ville det være farvevalg: hvide bogstaver på en delvist hvid baggrund svækker signifikant tilgængeligheden af ​​designet.

13. CSS Julpakningspapir

Du kan oprette et helt unikt julegavepapir ved hjælp af CSS3. Udvikleren af ​​denne pen viser ikke kun en, men seks varianter til dette. De smukke mønstre opnås ved den klare udnyttelse af CSS-gradienter og egenskaben bag blandingstilstand.

Du kan finde endnu flere seje eksempler og en detaljeret forklaring på udviklerens egen hjemmeside.

14. Boks i en boks

Dette fantasifulde design blev inspireret af traditionelle russiske dukker (en dukke inde i en dukke). Hvis du åbner den ydre kasse ved at klikke på den, afslører den en indre kasse, der også er den ydre kasse af en anden inderkasse. Funktionen er skrevet i jQuery, og de nøjagtige pladser af boksene er indstillet ved hjælp af absolutte og relative positioner i CSS-filen.

15. Gaveæske med papirskrælseffekt

Hvis du klarer at fjerne båndet fra denne gave ved at trække det væk, kan du se på superkoolpapirskrælseffekten, der afslører det indre indhold af gaven. Du kan læse hele tutorial på udviklerens hjemmeside, det er et trick, at det absolut er værd at lære. Hvis du bare vil bruge koden, kan du klone den fra GitHub også.

16. Holiday Spirit Animeret lærred

Jul kan være en god tid til at eksperimentere med nye ting, ligesom udvikleren gjorde det i denne pen ved at bruge HTML5 lærred som en animeret baggrund. Lærredet kommer før indholdet (Happy Holidays!) I HTML-filen, og den er indstillet som baggrund ved hjælp af smart CSS-positionering.

Pennen bruger også et baggrunds animation script, der er inkluderet som en separat JavaScript-fil.

17. Gavekort UI

Dette iøjnefaldende gavekort er ikke kun til jul, men kan bruges til enhver tid, når du vil overraske dine brugere med en gave på din hjemmeside. Det er ikke afhængigt af JavaScript, da det er helt skrevet i Sass stilarksprog.

Designet gør brug af CSS3-klipbanens egenskab, der gør det muligt for udviklere at vise kun en bestemt region af et element i stedet for at vise hele området.

18. Pure CSS Merry Christmas Card

Denne uendeligt grinende santa - kun ved hjælp af HTML og CSS3 - kan give dig mulighed for at forstå, hvordan keyframe animationssyntaxen kan bruges i praksis. I CSS3 kan du bruge @keyframes-reglen til at angive reglerne for en animation, og så kan du binde denne specificerede animation til et bestemt element ved hjælp af animationen CSS3-egenskaben.

Du skal tilføje navnet på keyframe som den første værdi af animationsegenskaben, ligesom udvikleren gjorde dette med de brugerdefinerede keyframes kaldet bodyLaugh, beardLaugh, headLaugh og mouthLaugh, der er specielt oprettet til denne pen.

19. Xmas Cracker

Hvis du svæver over denne imponerende Xmas Cracker, afslører den en unik julemeddelelse, der er en fantastisk måde at ønske en god jul på dine besøgende. HTML'en er skrevet i HAML, HTML Abstraction Markup Language, mens stilreglerne tager udnyttelse af kraften i Sass Syntactically Awesome Styesheets sprog.

Resultatet er smart og fantastisk faktisk. Ved at tilføje lidt mere JavaScript kan det endda bruges til at levere brugerdefinerede citater eller meddelelser til brugerne.

20. Blinkende Xmas Lights

Disse blinkende julelys kan hurtigt give en unik atmosfære til enhver hjemmeside. Front-end-koden er skrevet i HAML, der kompilerer til HTML, Sass, der kompilerer til CSS, og jQuery.

Den animerede glødende effekt opnås ved den ovennævnte @keyframes-regel, der leveres af CSS3. Farverne på LED'erne indstilles i jQuery-filen ved at tilføje 50 grader til Hue-værdien af ​​den tidligere ledning ved hjælp af HSL-farveskalaen.