no.hideout-lastation.com
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 for å si takk til dine kunder med noen kule, banebrytende design som vil hjelpe ferien jubel.
I dette innlegget vil vi ta en titt på 20 fantastiske juleksperimenter på CodePen, som du kan bruke til inspirasjon for å lage dine egne motiver.
1. Familie julens sangbok
Denne nydelige Family Christmas Songbook-appen kan spille favorittjulesangene dine på SoundCloud. Stilreglene er skrevet i LEXSERVER-språket, og musikkspillerens funksjonalitet leveres av et tilpasset jQuery-plugin.
Snøfnugg- og juletreikonene i bakgrunnen gir en høytidelig atmosfære til designet, 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 som tar innflytelse av grensestrålereglene. De forskjellige delene av ballene settes sammen ved å benytte nøyaktig beregnede relativstillinger.
Hvis du raskt vil legge til en ferieatmosfæ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øflakene 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 egendefinert Snowflake-klasse.
Snøflakene selv er bygget 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 enkelt 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
Smart 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 må etter hvert være grønt.
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 Julpapir
Du kan lage et helt unikt julegjøringspapir 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 bakom-blanding-modus.
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 papirskilleffekt
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 som er inkludert som en egen JavaScript-fil.
17. Gavekort-brukergrensesnitt
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 stoler 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 del 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økkelrammer 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 utnytter kraften til 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 gitt 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.
Oppdag Design Freebies daglig med denne Chrome Extension
Designere frigir tonnevis av freebies online hver måned, inkludert ikoner, UI-kits, mockups, vektorgrafikk og så mye mer.Piktab er en gratis Chrome-utvidelse som viser de nyeste designfribene i nettleseren din.Hver gang du åpner en ny fane, får du et glimt av de heteste designfribene fra hele nettet. De
iOS har et skjult enhånds tastatur i Xcode
Når skjermstørrelsene på smarttelefonen øker, må utviklerne sørge for at de kan finne måter å klargjøre brukergrensesnittet for enhåndsbruk. I dag er det oppdaget at Apple allerede har jobbet med et enhånds tastatur som kan (eventuelt) aktiveres via kant-swipe. Funksjonen har ennå ikke blitt fullført skjønt.Utvikler Stev
