20 Awesome Christmas Projects Skriti v CodePen
CodePen je spletno igrišče za nadarjene razvijalce, kraj, kjer lahko vedno najdete kul projekte za razširitev svojih obzorij, in vidite, kaj nameravajo drugi razvijalci. Letošnje počitnice so odličen čas, da presenetite svoje najdražje z ustvarjalnimi osebnimi projekti, ali pa se zahvalite svojim strankam z nekaterimi kul, vrhunskimi dizajni, ki bodo pomagali počitnice.
V tem prispevku si bomo ogledali 20 odličnih božičnih poskusov na CodePen, ki jih lahko uporabite za navdih za ustvarjanje lastnih modelov.
1. Družinska božična pesem
Ta čudovita aplikacija Family Christmas Songbook lahko predvaja vaše najljubše božične pesmi, ki jih gosti SoundCloud. Pravila sloga so napisana v jeziku slogovnega jezika LESS, funkcijo predvajalnika glasbe pa omogoča vtičnik jQuery po meri..
Ikone snežinke in božičnega drevesa v ozadju dajejo oblikovalcu slovesno vzdušje, in če lebdite nad peresom, boste našli tudi nekaj subtilnih CSS učinkov.
2. Digitalno božično drevo
Oblikovanje za božič je vedno hvaležno delo, saj lahko njegove značilne vizualne elemente zgradimo na veliko ustvarjalnih načinov. Ta peresnik je dober primer za to. Najprej si lahko ogledate le barvite trikotnike, ki na videz niso povezani s prazniki, toda ko kliknete na gumb Razkrij, so skupaj postavljeni v božično drevo. To ni samo edinstvena rešitev, ampak tudi spominja na preprostejšo igro.
3. Božična animacija s sneženjem
Ni nujno, da uporabljate JavaScript, če želite ustvariti kul animacijo za božič. V tem peresu se tako animacija sneženja kot slike ozadja ustvarijo izključno v CSS. To je vredno preučiti kodo malo, saj kaže neverjetne zmogljivosti CSS3. Sliko ozadja lahko celo zamenjate z resnično sliko SVG.
4. Božiček na poti!
Božiček na poti! je zabavna igra JavaScript za počitnice z uporabo okvira za igre HTML phaser.js. V tej igri ni preveč pravil: Božiček teče neskončno ali vsaj dokler ne pade dol. Ta pero vam daje odlično priložnost, da razumete, kako napisati preprostejšo igro v JavaScriptu.
5. Secret Santa Picker
Izbira imena iz klobuka je bila priljubljena pot v šolah in pisarnah, da bi izbrali Secret Santas - ta pero je zgolj digitalna različica te tradicije. Ker uporablja samo vanilji JavaScript, ga lahko preprosto vdelate v svoje spletno mesto. Samo spremenite imena znotraj spremenljivke daj.
6. Božične žoge v Čisti CSS
Te vesele božične žogice so napisane v čistem CSS-ju, pri čemer upoštevajo pravila meje. Različni deli krogel so združeni z uporabo natančno izračunanih relativnih položajev.
Če želite na spletno stran hitro dodati počitniško vzdušje, vstavite nekaj teh žog v ustrezna mesta v barvi, ki ustreza splošni zasnovi spletnega mesta..
7. Premične snežinke
Ti snežinke lahko premikate tako, da se premikajo nad njimi na namizju ali pa nagibajo pametni telefon. Funkcionalnost zagotavlja objektno usmerjen JavaScript, ki ga razvijalec pametno uporablja za ustvarjanje razreda po meri Snowflake.
Snežinke same so zgrajene v CSS3, ozadje uporablja prelome - v tem peresu sploh ni slik.
8. Holiday Accordion Experiment
Ta praznična harmonika je preprosto lepa. Če se premikate čez zavihek, se osredotočite tako, da ga malo razširite in če kliknete nanj, se nenadoma prikaže in pokrije celotno stran. Zanimivo je, da ta pero uporablja Scalable Vector Graphics (SVG), ki je oblikovan s CSS.
SVG-ji so močnejši, kot se zdi na prvi pogled, lahko so pametno postavljeni in oblikovani z istimi slogi, ki jih uporabljamo z običajnimi elementi HTML.
9. Ploščati čist CSS snežak
Kdo je rekel, da mora biti ravno načrtovanje dolgočasno? Ta čudovit snežak lahko brez težav doda božični duh vsakemu dizajnu. Za snežaka ni slik, ki so v celoti zapisane v CSS. Pomembno je, da si malo pogledate kodo CSS in si ogledate, kako razvijalec uporablja: pred in: po psevdo selektorjih za doseganje želenega rezultata..
10. Snežinka CSS3
Z uporabo naprednih razvojnih orodij lahko omogočite ustvarjanje slik samo za CSS3; ta dobro zasnovana snežinka CSS3 je odličen primer za to. Razvijalec je uporabil jezik Jade templating, ki ga sestavlja HTML, in Sass CSS predprocesor za izvedbo tega osupljivega oblikovanja snežinke..
11. Božični gumb
Pametni načrti se pogosto odločajo za subtilne rešitve, tako kot zasneženi božični gumb v tem peresu. Temno rdeča podlaga je odlična izbira za božično oblikovanje; ne bo vse moralo biti zeleno.
Barve, prelivi, tipografija in hover učinkujejo na ta gumb zelo elegantno in svečano. Potrebujete le nekaj od njih, da hitro okrasite spletno mesto za Božič.
12. Parallax Happy Holiday
Če vam je všeč drsenje po paralaksi, zakaj ga ne bi uporabili za vaše počitniške modele? Razvijalec tega peresa je pametno eksperimentiral z učinkom in uporabil plugin Parallax.js jQuery na manj običajen način, ki pa ni navpičen kot običajno, ampak horizontalno. Božično vzdušje okrepi impresivno sneženje
Če bi moral izbrati kakšno napako tega peresa, bi bila izbira barve: bele črke na delno belem ozadju znatno slabijo dostopnost oblikovanja.
13. CSS božični zavijalni papir
S pomočjo CSS3 lahko ustvarite popolnoma edinstven božični ovojni papir. Razvijalec tega peresa ne prikazuje le enega, temveč šest variant za to. Lepe vzorce dosežemo s pametno uporabo CSS gradientov in lastnostmi v ozadju-blend-mode.
Lahko najdete še zanimivejše primere in podrobno razlago na lastni spletni strani razvijalca.
14. Okvir znotraj polja
Ta domiselna zasnova je bila navdihnjena s tradicionalnimi ruskimi lutkami (lutko v lutki). Če odprete zunanjo škatlo s klikom nanj, se prikaže notranja škatla, ki je tudi zunanja škatla druge notranje škatle. Funkcionalnost je zapisana v jQuery, natančna mesta polj pa so določena s pomočjo absolutnih in relativnih pravil položaja v datoteki CSS.
15. Darilna škatla z učinkom papirnega lupljenja
Če nameravate odstraniti trak s tega darila tako, da ga povlečete stran, si lahko ogledate učinek puhalnega papirja, ki razkriva notranjo vsebino darila. Celotno vadnico lahko preberete na spletni strani razvijalca, to je trik, ki ga je vsekakor vredno naučiti. Če želite uporabiti kodo, jo lahko tudi klonirate iz GitHub.
16. Počitniški duh Animirano platno
Božič je lahko odličen čas za eksperimentiranje z novimi stvarmi, tako kot ga je razvijalec naredil v tem peresu s pomočjo HTML5 platna kot animiranega ozadja. Platno prihaja pred vsebino (Happy Holidays!) V datoteki HTML in je nastavljeno kot ozadje s pomočjo pametnega določanja položaja CSS..
Pero uporablja tudi animacijo v ozadju, ki je vključena kot ločena datoteka JavaScript.
17. Uporabniški vmesnik darilne kartice
Ta privlačna darilna kartica ni samo za božič, temveč jo lahko uporabite kadarkoli, ko želite svoje uporabnike presenetiti z darilom na vaši spletni strani. Ne zanaša se na JavaScript, saj je v celoti napisan v jeziku slogovnih slogov Sass.
Zasnova uporablja lastnost posnetka CSS3, ki razvijalcem omogoča, da prikažejo samo določeno regijo elementa, namesto da pokažejo celotno območje..
18. Pure CSS Merry Christmas Card
Ta neskončno smejan Božiček - ki uporablja samo HTML in CSS3 - vam lahko ponudi priložnost, da razumete, kako lahko sintakso animacije ključnega okvira uporabite v praksi. V CSS3 lahko uporabite pravilo @keyframes, da določite pravila animacije, nato pa lahko to določeno animacijo povežete z določenim elementom z lastnostjo animacije CSS3.
Dodati morate ime ključnega okvira kot prvo vrednost lastnosti animacije, tako kot razvijalec je to storil s ključnimi kadri po meri, imenovanimi bodyLaugh, beardLaugh, headLaugh in mouthLaugh, ki so bili posebej ustvarjeni za ta pero.
19. Božični kreker
Če lebdite nad tem impresivnim božičarjem, vam razkrije edinstveno božično sporočilo, ki je neverjeten način, da svojim obiskovalcem zaželite vesel božič. HTML je napisan v jeziku HAML, označevalnem jeziku za abstrakcijo HTML, medtem ko slog pravila prevzamejo moč jezika Sass Syntactically Awesome Styesheets..
Rezultat je resnično pameten in super. Z dodajanjem malo več JavaScripta se lahko celo uporabijo za dostavo uporabniških ponudb ali sporočil uporabnikom.
20. Utripajoče Božične luči
Te utripajoče božične luči lahko hitro dajo edinstveno vzdušje vsem spletnim mestom. Vhodna koda je napisana v HAML, ki se združi v HTML, Sass, ki se združi v CSS, in jQuery.
Animirani žareč učinek dosežemo s prej omenjenim pravilom @keyframes, ki ga zagotavlja CSS3. Barve ledov so nastavljene v datoteki jQuery tako, da dodajo 50 stopinj v vrednost Hue prejšnjega vodila z uporabo barvne lestvice HSL..
