20 Awesome Božićni projekti skriveni u CodePenu

CodePen je online igralište za talentirane front-end programere, mjesto gdje uvijek možete pronaći cool projekte kako biste proširili svoje horizonte i vidjeli što drugi programeri rade. Godišnji praznici su sjajna prilika da iznenadite svoje najmilije kreativnim osobnim projektima, ili da se zahvalite svojim klijentima s nekim cool, vrhunskim dizajnom koji će vam pomoći da se odmorite.

U ovom postu ćemo zaviriti u 20 sjajnih božićnih pokusa na CodePenu, koje možete koristiti za inspiraciju za izradu vlastitih dizajna.

1. Obiteljska božićna pjesmarica

Ova lijepa obitelj božićna pjesmarica app može igrati svoje omiljene božićne pjesme domaćin na SoundCloud. Pravila stila zapisana su u jeziku slova LESS, a funkcionalnost glazbenog playera osigurava prilagođeni JQuery dodatak.

Ikone snježne pahulje i božićnog drvca u pozadini daju svečanu atmosferu dizajnu, a ako lebdite iznad olovke možete pronaći i neke suptilne CSS efekte..

2. Digitalno božićno drvce

Projektiranje za Božić je uvijek zahvalan posao, budući da se njegovi tipični vizualni elementi mogu graditi na mnoge kreativne načine. Ova olovka je dobar primjer za to. Isprva možete vidjeti samo šarene trokute, naizgled nepovezane s praznicima, ali kada kliknete na gumb Otkrij, oni se spajaju u božićno drvce. To nije samo jedinstveno rješenje, već također podsjeća na jednostavniju igru.

3. Božićna animacija sa snijegom

Ne morate nužno koristiti JavaScript, ako želite stvoriti kul animaciju za Božić. U ovoj se olovci i animacija snijega i pozadinske slike stvaraju isključivo u CSS-u. Vrijedi razmotriti kod malo, jer pokazuje nevjerojatne mogućnosti CSS3. Pozadinska slika može se čak i zamijeniti za stvarnu SVG grafiku.

4. Djed Božićnjak na trčanju!

Santa na trčanju! je zabavna JavaScript igra za blagdane koji koriste okvir za igre phaser.js HTML5. U ovoj igri nema previše pravila: Santa radi beskonačno ili barem dok ne padne. Ova olovka daje vam izvrsnu priliku da shvatite kako napisati jednostavniju igru ​​u JavaScriptu.

5. Tajni sakupljač imena Santa

Odabir imena iz šešira bio je popularan način u školama i uredima da odaberu tajni Santas - ova olovka je samo digitalna verzija te tradicije. Budući da koristi samo vanilijski JavaScript, jednostavno ga možete ugraditi na vlastitu web-lokaciju. Samo promijenite imena unutar varijable give.

6. Božićne kugle u čistom CSS-u

Ove vesele božićne kugle ispisane su u čistom CSS-u uzimajući u obzir pravila graničnog radijusa. Različiti dijelovi kuglica postavljaju se zajedno pomoću precizno izračunatih relativnih položaja.

Ako želite brzo dodati atmosferu odmora na web-stranicu, samo umetnite neke od tih lopti na odgovarajuća mjesta u boji koja odgovara ukupnom dizajnu web-lokacije.

7. Pokretne pahulje

Možete napraviti ove snježne pahulje kako se kreću iznad njih na radnoj površini ili naginjanjem pametnog telefona. Funkcionalnost pruža objektno orijentirani JavaScript koji pametno koristi programer za stvaranje prilagođene klase Pahuljica.

Snježne pahulje su ugrađene u CSS3, a pozadina koristi gradijente - uopće nema slika u ovoj olovci.

8. Holiday Accordion Experiment

Ova harmonika je jednostavno lijepa. Ako prelazite preko kartice, fokus će se proširiti, a ako kliknete na nju, naglo će se pojaviti i pokriti cijelu stranicu. Zanimljivo je da ova olovka koristi skalabilnu vektorsku grafiku (SVG) koja je oblikovana pomoću CSS-a.

SVG-ovi su moćniji nego što se čini na prvi pogled, mogu biti pametno pozicionirani i dizajnirani s istim pravilima stila koja koristimo s uobičajenim HTML elementima.

9. Ravan Čisti CSS Snjegović

Tko je rekao da dizajn mora biti dosadan? Ovaj lijep snjegović može lako dodati Božićni duh bilo kojem dizajnu. Nema slika korištenih za snjegovića, potpuno je napisana u CSS-u. Vrijedno je malo pogledati CSS kod i vidjeti kako programer koristi: prije i nakon pseudo selektora kako bi postigao željeni rezultat.

10. CSS3 Pahuljica

Možete olakšati stvaranje slika samo za CSS3 pomoću naprednih razvojnih alata; ovaj dobro osmišljen CSS3 pahuljica je izvrstan primjer za to. Programer je upotrijebio jezik Jade templatinga koji se kompilira u HTML, a Sass CSS pretprocesor za implementaciju ovog zapanjujućeg dizajna pahuljica.

11. Božićni gumb

Pametni dizajni često se odlučuju za suptilna rješenja, baš kao i snježni božićni gumb u ovoj olovci. Tamno crvena pozadina savršen je izbor za božićni dizajn; ne mora sve biti zeleno.

Boje, gradijenti, tipografija i efekt lebdenja čine ovaj gumb vrlo elegantnim i ozbiljnim. Trebate samo nekoliko njih da brzo ukrasite stranicu za Božić.

12. Sretan praznik paralakse

Ako vam se sviđa pomicanje paralakse, zašto ga ne biste upotrijebili za vaše blagdane? Programer ove olovke pametno je eksperimentirao s tim efektom i koristio je plugin Parallax.js jQuery u manje uobičajenom načinu, efekt pomicanja nije vertikalan kao i obično, već horizontalno. Božićna atmosfera pojačana je impresivnim snijegom

Da sam morao izabrati bilo koji nedostatak ove olovke, to bi bio izbor boja: bijela slova na djelomično bijeloj pozadini značajno slabe dostupnost dizajna.

13. CSS božićni omotni papir

S CSS3 možete stvoriti potpuno jedinstveni papir za omatanje. Programer ove olovke prikazuje ne samo jednu, nego šest varijanti za to. Prekrasni uzorci postižu se pametnom uporabom CSS gradijenta i svojstvom pozadinskog miješanja.

Možete pronaći još zanimljive primjere i detaljno objašnjenje na web-lokaciji razvojnog programera.

14. Okvir unutar okvira

Ovaj maštoviti dizajn inspiriran je tradicionalnim ruskim lutkama (lutka u lutki). Ako otvorite vanjski okvir klikom na njega, on otkriva unutarnju kutiju koja je također vanjska kutija druge unutarnje kutije. Funkcionalnost je napisana u jQuery, a točna mjesta polja postavljaju se uz pomoć apsolutnih i relativnih pravila položaja u CSS datoteci.

15. Poklon kutija s efektom ljuštenja papira

Ako uspijete ukloniti vrpcu s tog dara tako što ćete je povući, možete pogledati učinak svježine papira koji otkriva unutarnji sadržaj dara. Cijeli vodič možete pročitati na web-lokaciji razvojnog programera, to je trik koji svakako vrijedi naučiti. Ako samo želite koristiti kod, možete ga klonirati i iz GitHub-a.

16. Holiday Spirit animiranog platna

Božić može biti odličan trenutak za eksperimentiranje s novim stvarima, baš kao što je to učinio programer u ovoj olovci koristeći HTML5 platno kao animiranu pozadinu. Platno dolazi prije sadržaja (sretni praznici!) U HTML datoteci, a postavljeno je kao pozadina uz pomoć pametnog CSS pozicioniranja.

Olovka također koristi skriptu pozadinske animacije uključenu kao zasebnu JavaScript datoteku.

17. Korisničko sučelje za poklon kartice

Ova atraktivna poklon kartica nije samo za Božić, već se može koristiti u bilo koje vrijeme kada želite iznenaditi svoje korisnike poklonom na vašoj web-lokaciji. Ne oslanja se na JavaScript jer je u cijelosti napisan na jeziku Sass stylesheet.

Dizajn koristi CSS3 svojstvo clip-path koji omogućuje programerima prikazivanje samo određene regije elementa, umjesto prikazivanja cijelog područja.

18. Čista CSS Sretna božićna čestitka

Ovaj beskrajno smiješan Djed Mraz - koristeći samo HTML i CSS3 - može vam pružiti priliku da shvatite kako se sintaksa animacije ključnog okvira može koristiti u praksi. U CSS3 možete koristiti pravilo @keyframes za određivanje pravila animacije, a zatim možete povezati navedenu animaciju s određenim elementom pomoću svojstva animacije CSS3.

Morate dodati ime ključnog okvira kao prvu vrijednost svojstva animacije, baš kao što je programer to učinio s prilagođenim ključnim okvirima koji se zovu bodyLaugh, beardLaugh, headLaugh i mouthLaugh posebno stvoreni za ovu olovku.

19. Božićni kreker

Ako lebdite iznad ovog impresivnog Božićnog krekera, on otkriva jedinstvenu Božićnu poruku koja je nevjerojatan način da svojim posjetiteljima poželite sretan Božić. HTML je napisan u HAML-u, HTML Markup Language za apstrakciju, dok pravila stila uzimaju moć moći Sass Syntactically Awesome Styesheets jezika.

Rezultat je doista pametan i strašan. Dodavanjem malo više JavaScripta može se čak koristiti za isporuku prilagođenih citata ili poruka korisnicima.

20. Treperi Božićna svjetla

Ove bljeskanje božićna svjetla mogu brzo dati jedinstvenu atmosferu na bilo koju web stranicu. Front-end kod je napisan u HAML-u koji se kompilira u HTML, Sass koji se kompilira u CSS i jQuery.

Animirani glowing efekt postiže se gore spomenutim pravilom @keyframes kojeg daje CSS3. Boje led-ova postavljene su u jQuery datoteci dodavanjem 50 stupnjeva u vrijednost Hue prethodne vodilice korištenjem HSL skale boja.