20 „CodePen“ paslėpti nuostabūs Kalėdų projektai

„CodePen“ yra internetinė žaidimų aikštelė talentingiems „front-end“ kūrėjams, kur visada galite rasti vėsius projektus, kad išplėstumėte savo akiratį, ir pamatysite, ką kiti kūrėjai turi. Metų pabaigoje vykstančios atostogos yra puikus laikas nustebinti savo artimuosius kūrybingais asmeniniais projektais, arba pasakyti savo klientams su puikiais, pažangiausiais dizainais, kurie padės atostogauti.

Šiame pranešime mes žiūrėsime į 20 nuostabių Kalėdų eksperimentų su „CodePen“, kad galėtumėte naudoti įkvėpimui kurti savo dizainą.

1. Šeimos Kalėdų dainų knyga

Ši graži Šeimos Kalėdų dainų programa gali leisti savo mėgstamas Kalėdų dainas, talpinamas SoundCloud. Stiliaus taisyklės yra parašytos LESS stiliaus kalba, o muzikos grotuvo funkcionalumą teikia pasirinktinis jQuery įskiepis.

Snaigės ir Kalėdų eglutės piktogramos fone suteikia iškilmingą atmosferą dizainui ir, jei jūs užveskite ant švirkštimo priemonės, taip pat galite rasti keletą subtilių CSS efektų.

2. Skaitmeninė Kalėdų eglutė

Dizainas Kalėdoms visada yra dėkingas darbas, nes jo tipiniai vizualiniai elementai gali būti kuriami kūrybiškai. Šis rašiklis yra geras pavyzdys. Iš pradžių jūs galite pamatyti tik spalvingus trikampius, kurie, atrodo, nesusiję su švenčių dienomis, bet kai spustelėsite mygtuką „Atskleisti“, jie bus sujungti į Kalėdų eglutę. Tai ne tik unikalus sprendimas, bet ir paprastesnis žaidimas.

3. Kalėdų animacija su sniegu

Jei norite sukurti linksmą animaciją Kalėdoms, nebūtinai turite naudoti „JavaScript“. Šiame rašikliu tiek sniego animacija, tiek fono paveikslėliai yra sukurti tik CSS. Verta šiek tiek išnagrinėti kodą, nes tai rodo neįtikėtinas CSS3 galimybes. Fono vaizdas gali būti netgi supainiotas su tikru SVG grafiku.

4. „Santa On Run“!

Kalėdų Senelis! yra įdomus „JavaScript“ žaidimas, skirtas atostogoms, kuriose naudojamas „phaser.js HTML5“ žaidimų pagrindas. Šiame žaidime nėra per daug taisyklių: Santa važiuoja be galo arba bent jau tol, kol jis nuleis. Ši švirkštimo priemonė suteikia jums puikią galimybę suprasti, kaip parašyti paprastesnį „JavaScript“ žaidimą.

5. Slaptos Santa pavadinimo parinkėjas

Pavadinimas iš skrybėlės buvo populiarus būdas mokyklose ir biuruose pasirinkti „Secret Santas“ - ši švirkštimo priemonė yra tik šios tradicijos skaitmeninė versija. Kadangi jis naudoja tik vanilės „JavaScript“, galite lengvai įdėti jį į savo svetainę. Tiesiog pakeiskite vardus viduje duoti kintamąjį.

6. Kalėdų kamuoliai „Pure CSS“

Šie linksmi Kalėdų kamuoliukai rašomi gryname CSS, atsižvelgiant į sienos spindulių taisykles. Skirtingos rutulių dalys yra nustatytos kartu, naudojant tiksliai apskaičiuotas santykines pozicijas.

Jei norite greitai įtraukti atostogų atmosferą į tinklalapį, tiesiog įdėkite kai kuriuos iš šių kamuoliukų į tinkamas vietas, kurios atitinka bendrą svetainės dizainą.

7. Kilnojamasis snaigės

Šiuos snaiges galite perkelti, stumdami juos ant darbalaukio arba pakreipdami savo išmanųjį telefoną. Funkcionalumą teikia į objektą orientuotas „JavaScript“, kurį kūrėjas naudoja protingai, kad sukurtų pasirinktinę „Snowflake“ klasę.

Pats snaigės yra pastatytos CSS3, o fonas naudoja gradientus - šiame pieštuke nėra jokių vaizdų.

8. Atostogų akordeono eksperimentas

Šis atostogų akordeonas yra tiesiog gražus. Jei pakyla virš skirtuko, kurį norite sutelkti, plečiant šiek tiek, ir jei paspausite ant jo, jis staiga pasirodo ir apima visą puslapį. Įdomu pažymėti, kad šis rašiklis naudoja „Scalable Vector Graphics“ (SVG), suformuotą su CSS.

SVG yra galingesni, nei atrodo iš pirmo žvilgsnio, jie gali būti sumaniai išdėstyti ir suprojektuoti taip pat, kaip ir įprastomis HTML elementais..

9. Plokščias grynas CSS sniego žmogus

Kas sakė, kad butas turi būti nuobodu? Šis puikus sniego senis gali lengvai pridėti Kalėdų dvasią bet kokiam dizainui. Nėra sniego žmogui naudojamų vaizdų, jis visiškai parašytas CSS. Verta šiek tiek pažvelgti į CSS kodą ir pamatyti, kaip kūrėjas naudoja: prieš ir: po pseudo selektorių, kad pasiektų numatytą rezultatą.

10. CSS3 Snaigė

Jūs galite palengvinti tik CSS3 vaizdų kūrimą naudodami pažangias „front-end“ plėtros priemones; šis gerai suprojektuotas CSS3 snaigė yra puikus pavyzdys. Vykdytojas pasinaudojo „Jade“ šablonų kalba, kurią sukaupė į HTML, ir „Sass CSS“ išankstinį procesorių, kad būtų įgyvendintas šis nuostabus snaigės dizainas.

11. Kalėdų mygtukas

Smart dizainai dažnai pasirenka subtilius sprendimus, kaip ir sniego Kalėdų mygtukas šiame švirkšte. Tamsiai raudonas fonas yra puikus pasirinkimas Kalėdų dizainui; viskas ne viskas turi būti žalia.

Spalvos, gradientai, šriftas ir slinkimo efektas daro šį mygtuką labai elegantišką ir iškilmingą. Jums reikia tik keleto iš jų, kad galėtumėte greitai papuošti krikščioniškojo laikymo vietą.

12. „Parallax“ laimingas atostogas

Jei jums patinka paralaksų slinkimas, kodėl neturėtumėte to naudoti savo atostogų dizainams? Šio rašiklio kūrėjas sumaniai eksperimentavo su efektu ir naudojo „Parallax.js“ jQuery įskiepį mažiau paplitusiu būdu, slinkimo efektas nėra vertikalus, kaip įprasta, bet horizontali. Kalėdų atmosferą sustiprina įspūdingas sniegas

Jei turėčiau rinktis bet kokį šio rašiklio trūkumą, tai būtų spalvų pasirinkimas: baltos raidės iš dalies baltame fone žymiai susilpnina dizaino prieinamumą.

13. CSS Kalėdų vyniojimo popierius

CSS3 pagalba galite sukurti visiškai unikalų Kalėdų vyniojimo popierių. Šio rašiklio kūrėjas rodo ne tik vieną, bet ir šešis variantus. Gražūs modeliai pasiekiami išmaniai naudojant CSS gradientus ir fono mišinio režimo savybę.

Dar daugiau įdomių pavyzdžių ir išsamų paaiškinimą galite rasti kūrėjo svetainėje.

14. Dėžutė langelyje

Šis vaizdingas dizainas įkvėptas tradicinių Rusijos lėlių (lėlės viduje). Jei atidarote išorinę dėžutę, spustelėję ant jo, jis atskleidžia vidinį langelį, kuris taip pat yra išorinio dėžutės langelis. Funkcija yra parašyta jQuery, o tikslios dėžių vietos nustatomos naudojant absoliučias ir santykines CSS failo taisykles.

15. Dovanų dėžutė su popieriaus nulupimo efektu

Jei sugebėsite pašalinti šią juostą iš šios dovanos nuvilkdami jį, galite pažvelgti į superkorinio popieriaus nulupimo efektą, kuris atskleidžia vidinį dovanos turinį. Pilną pamoką galite perskaityti kūrėjo svetainėje, tai yra triukas, kurį verta išmokti. Jei tik norite naudoti kodą, galite jį klonuoti ir iš „GitHub“.

16. „Holiday Spirit“ animacinis drobė

Kalėdos gali būti puikus laikas eksperimentuoti su naujais dalykais, kaip ir kūrėjas padarė šį rašiklį naudodamas HTML5 drobę kaip animuotą foną. Drobė ateina prieš turinį (laimingas šventes!) HTML faile, ir jis nustatytas kaip fonas, naudojant protingą CSS pozicionavimą.

Rašiklis taip pat naudoja foninį animacijos scenarijų, įtrauktą į atskirą „JavaScript“ failą.

17. Dovanų kortelės vartotojo sąsaja

Ši akį traukianti dovanų kortelė yra ne tik Kalėdoms, bet gali būti naudojama bet kuriuo metu, kai norėsite nustebinti savo vartotojus dovanomis jūsų svetainėje. Jis nesiremia „JavaScript“, nes jis yra visiškai parašytas „Sass“ stilių lentelės kalba.

Projektas naudoja CSS3 klipų kelio savybę, kuri leidžia kūrėjams rodyti tik tam tikrą elemento regioną, o ne rodyti visą jo plotą.

18. Gryna CSS „Merry Christmas“ kortelė

Šis be galo juokiantis Santa - naudodamas tik HTML ir CSS3 - gali suteikti jums galimybę suprasti, kaip praktikoje galima naudoti pagrindinio rėmelio animacijos sintaksę. CSS3 galite naudoti „@keyframes“ taisyklę, norėdami nurodyti animacijos taisykles, o tada galite priskirti šią nurodytą animaciją prie tam tikro elemento naudodami animaciją CSS3 nuosavybė.

Jums reikia pridėti pagrindinio rėmo pavadinimą kaip pirmąją animacijos savybės vertę, kaip ir kūrėjas tai padarė su pasirinktomis raktų rėmelėmis, vadinamomis kūnuLaugh, beardLaugh, headLaugh ir mouthLaugh, specialiai sukurtas šiam rašikliui.

19. Xmas Cracker

Jei pakyla virš šio įspūdingo „Xmas Cracker“, tai atskleidžia unikalią Kalėdų žinią, kuri yra nuostabus būdas palinkėti savo svečiams Kalėdas. HTML yra parašyta HAML, HTML abstrakcijos žymėjimo kalba, o stiliaus taisyklės naudoja Sass Syntactically Awesome Styesheets kalbos galią..

Rezultatas yra protingas ir nuostabus. Pridėjus šiek tiek daugiau „JavaScript“, jis gali būti naudojamas netgi tam, kad naudotojams būtų pristatytos pasirinktinės kainos ir pranešimai.

20. Mirksi Xmas žibintai

Šios viliojančios Kalėdų šviesos gali greitai suteikti unikalią atmosferą bet kuriai interneto svetainei. Front-end kodas yra parašytas HAML, kuris sudaromas į HTML, Sass, kuris sudaro CSS, ir jQuery.

Animuotas švytintis efektas pasiekiamas pagal minėtą „CSS3“ @keyframes taisyklę. Lizdų spalvos nustatomos jQuery faile, pridedant 50 laipsnių į ankstesniojo vadovo Hue reikšmę, naudojant HSL spalvų skalę.