20 fantastiske juleprosjekter skjult i CodePen
CodePen er en online lekeplass for talentfulle front-end-utviklere, et sted hvor du alltid kan finne kule prosjekter for å utvide horisonter, og se hvilke andre utviklere som er opptatt av. Årsferien er en flott tid å overraske dine kjære med kreative personlige prosjekter, eller å si takk til kundene dine med noen kule, banebrytende design som vil hjelpe ferien jubel.
I dette innlegget tar vi en titt på 20 fantastiske juleksperimenter på CodePen, som du kan bruke til inspirasjon for å lage dine egne design.
1. Familie julens sangbok
Denne vakre Family Christmas Songbook-appen kan spille dine favorittjulesanger som er vert på SoundCloud. Stilreglene er skrevet i LEX-stilarket, og funksjonen for musikkspiller er gitt av et tilpasset jQuery-plugin.
Snøfnugg og juletre ikoner i bakgrunnen gir en høytidelig atmosfære til designen, og hvis du svinger over pennen, kan du også finne noen subtile CSS effekter.
2. Digital juletre
Design for jul er alltid en takknemlig jobb, da de typiske visuelle elementene kan bygges på mange kreative måter. Denne pennen er et godt eksempel på dette. Først kan du bare se fargerike trekanter, tilsynelatende uten forbindelse med ferien, men når du klikker på Reveal-knappen, settes de sammen til et juletre. Det er ikke bare en unik løsning, men minner også om et enklere spill.
3. Juleanimasjon med snøfall
Du trenger ikke nødvendigvis å bruke JavaScript, hvis du vil lage en kul animasjon til jul. I denne pennen skapes både snøfallsanimasjonen og bakgrunnsbildene rent i CSS. Det er verdt å undersøke koden litt, da den viser de utrolige egenskapene til CSS3. Bakgrunnsbildet kan til og med forveksles med en ekte SVG-grafikk.
4. Santa på kjøre!
Santa på kjøre! er et morsomt JavaScript-spill for ferien som bruker rammen for phaser.js HTML5. Det er ikke så mange regler i dette spillet: Santa løper uendelig, eller i det minste til han faller ned. Denne pennen gir deg en utmerket mulighet til å forstå hvordan du skriver et enklere spill i JavaScript.
5. Secret Santa Name Picker
Å peke et navn ut av en lue har vært en populær måte i skolene og kontorer for å velge Secret Santas - denne pennen er bare en digital versjon av denne tradisjonen. Som det bare bruker vanilla JavaScript, kan du enkelt legge det inn i ditt eget nettsted. Bare endre navnene i gi-variabelen.
6. Julballer i ren CSS
Disse muntre julekulene er skrevet i ren CSS og tar innflytelse av grensestrålereglene. De forskjellige delene av ballene settes sammen ved å utnytte nøyaktig beregnede relativstillinger.
Hvis du raskt vil legge til en ferie atmosfære på en nettside, bare sett inn noen av disse ballene til de riktige stedene i en farge som samsvarer med den generelle utformingen av nettstedet.
7. Flyttbare snøflak
Du kan få disse snøfnuggene til å bevege seg ved å svinge over dem på et skrivebord eller ved å vippe smarttelefonen. Funksjonaliteten er gitt av objektorientert JavaScript som er smart brukt av utvikleren til å lage en tilpasset Snowflake-klasse.
Snøflakene selv er bygd i CSS3, og bakgrunnen bruker gradienter - det er ingen bilder i denne pennen i det hele tatt.
8. Holiday Accordion Experiment
Denne ferien harmoni er ganske enkelt vakker. Hvis du svinger over en fane, kommer det til å fokusere ved å utvide litt, og hvis du klikker på det, kommer det plutselig opp og dekker hele siden. Det er interessant å merke seg at denne pennen bruker Scalable Vector Graphics (SVG) som er utformet med CSS.
SVGer er kraftigere enn de ser ut til å være ved første øyekast, de kan være smart plassert og designet med de samme stilreglene vi bruker med vanlige HTML-elementer.
9. Flat Pure CSS Snowman
Hvem sa flat design trenger å være kjedelig? Denne nydelige snømannen kan lett legge til julesand til ethvert design. Det er ingen bilder som brukes til snømannen, det er helt skrevet i CSS. Det er verdt å ta en titt på CSS-koden litt, og se hvordan utvikleren bruker: før og: etter pseudo-selektorer for å oppnå det tiltenkte resultatet.
10. CSS3 Snowflake
Du kan legge til rette for opprettelsen av CSS3-bare bilder ved hjelp av avanserte verktøy for utvikling av utviklingsverktøy. denne godt utformede CSS3 snøfnugg er et utmerket eksempel på dette. Utvikleren benyttet seg av Jade-templeringsspråket som kompilerer til HTML, og Sass CSS preprosessoren for å implementere denne fantastiske snøfnuggdesignen.
11. juleknapp
Smarte design velger ofte subtile løsninger, akkurat som den snødekte juleknappen i denne pennen. Den mørkrøde bakgrunnen er et perfekt valg for et juledesign; Ikke alt trenger å være grønt etter alt.
Fargene, gradienter, skrifttypen og sveveffekten gjør denne knappen svært elegant og høytidelig. Du trenger bare noen få av dem til raskt å dekorere et nettsted for kristendommen.
12. Parallax Happy Holiday
Hvis du liker parallaxrulling, hvorfor ville du ikke bruke den til dine feriedesigner? Utvikleren av denne pennen eksperimenterte smarte med effekten, og brukte Parallax.js jQuery-plugin på en mindre vanlig måte. Rullingseffekten er ikke vertikal som vanlig, men horisontal. Julestemningen er intensivert av et imponerende snøfall
Hvis jeg måtte velge noen feil på denne pennen, ville det være fargevalg: hvite bokstaver på en delvis hvit bakgrunn svekker tilgjengeligheten av designen betydelig.
13. CSS Christmas wrapping papir
Du kan lage et helt unikt julegavepapir ved hjelp av CSS3. Utvikleren av denne pennen viser ikke bare en, men seks varianter for dette. De vakre mønstrene oppnås ved den smarte utnyttelsen av CSS-gradienter og egenskapen for bakgrunns-blanding.
Du finner enda flere kule eksempler og en detaljert forklaring på utviklerens egen nettside.
14. Boks inne i en boks
Denne fantasifulle designen ble inspirert av tradisjonelle russiske dukker (en dukke inne i en dukke). Hvis du åpner den ytre boksen ved å klikke på den, avslører den en indre boks som også er den ytre boksen til en annen indre boks. Funksjonen er skrevet i jQuery, og de eksakte plassene til boksene er satt ved hjelp av absolutte og relative posisjoner i CSS-filen.
15. Gavekasse med papirknelleffekt
Hvis du klarer å fjerne båndet fra denne gaven ved å dra den bort, kan du se på superkoolpapirskilleffekten som avslører det indre innholdet i gaven. Du kan lese hele opplæringen på utviklerens nettsted, det er et triks at det er definitivt verdt å lære. Hvis du bare vil bruke koden, kan du klone den fra GitHub også.
16. Holiday Spirit Animert Lerret
Julen kan være en fin tid for å eksperimentere med nye ting, akkurat som utvikleren gjorde det i denne pennen ved å bruke HTML5 lerret som en animert bakgrunn. Lerret kommer før innholdet (Happy Holidays!) I HTML-filen, og den er satt som bakgrunn ved hjelp av smart CSS-posisjonering.
Pennen bruker også et bakgrunns animasjonsskript inkludert som en egen JavaScript-fil.
17. Gavekort UI
Dette iøynefallende gavekortet er ikke bare til jul, men kan brukes til enhver tid når du vil overraske brukerne dine med en gave på nettstedet ditt. Det stole ikke på JavaScript, da det er skrevet helt i Sass-stilarket.
Konstruksjonen benytter seg av CSS3-egenskapen for klipp-bane som gjør det mulig for utviklere å vise bare en bestemt region av et element, i stedet for å vise hele området.
18. Ren CSS Merry Christmas Card
Denne uendelig legende julemannen - bare ved hjelp av HTML og CSS3 - kan gi deg muligheten til å forstå hvordan keyframe animasjonssyntaxen kan brukes i praksis. I CSS3 kan du bruke @keyframes-regelen til å angi reglene for en animasjon, og deretter kan du binde denne spesifiserte animasjonen til et bestemt element ved å bruke animasjonen CSS3-egenskapen.
Du må legge til navnet på keyframe som den første verdien av animasjonsegenskapen, akkurat som utvikleren gjorde dette med de egendefinerte nøkkelrammene kalt bodyLaugh, beardLaugh, headLaugh og mouthLaugh spesielt laget for denne pennen.
19. Xmas Cracker
Hvis du svinger over denne imponerende Xmas Cracker, avslører den en unik julemeddelelse som er en fantastisk måte å ønske en god jul på dine besøkende. HTML-koden er skrevet i HAML, HTML Abstraction Markup Language, mens stilreglene tar innflytelse av kraften i Sass Syntactically Awesome Styesheets-språket.
Resultatet er smart og fantastisk faktisk. Ved å legge til litt mer JavaScript kan det til og med brukes til å levere egendefinerte sitater eller meldinger til brukerne.
20. Blinkende Xmas Lights
Disse blinkende julelysene kan raskt gi en unik atmosfære til et hvilket som helst nettsted. Front-end-koden er skrevet i HAML som samler inn i HTML, Sass som kompilerer til CSS, og jQuery.
Den animerte glødende effekten oppnås ved den tidligere nevnte @keyframes-regelen som tilbys av CSS3. Fargene på lysbildene er satt i jQuery-filen ved å legge 50 grader til Hue-verdien til den forrige ledd ved hjelp av HSL-fargeskalaen.
