20 de proiecte minunate de Crăciun ascunse în CodePen

CodePen este un loc de joacă online pentru dezvoltatorii talentați din față, un loc în care puteți găsi mereu proiecte interesante pentru a vă lărgi orizonturile și pentru a vedea ce fac ceilalți dezvoltatori. Sărbătorile de sfârșit de an reprezintă un moment excelent pentru a vă surprinde pe cei dragi cu proiecte personale creative sau pentru a le mulțumi clienților dvs. cu niște modele reci, care vă vor ajuta să vă bucurați de vacanță.

În acest post ne vom uita la 20 de experimente minunate de Craciun pe CodePen, pe care le puteți folosi ca inspirație pentru a vă crea propriile desene sau modele.

1. Cântecul de Crăciun pentru familie

Această aplicație minunată de Crăciun pentru Familie de Crăciun poate juca melodiile preferate de Crăciun găzduite pe SoundCloud. Regulile de stil sunt scrise în limba LESS style sheet, iar funcția de music player este furnizată de un plugin personalizat jQuery.

Icoanele de zăpadă și de pom de Crăciun în fundal dau o atmosferă solemnă designului, iar dacă treceți deasupra stiloului, puteți găsi și câteva efecte CSS subtile.

2. Pomul de Crăciun digital

Proiectarea pentru Crăciun este întotdeauna o slujbă recunoscătoare, deoarece elementele sale vizuale tipice pot fi construite în multe moduri creative. Acest pix este un bun exemplu pentru acest lucru. La început puteți vedea numai triunghiuri colorate, care nu au nicio legătură cu sărbătorile, dar când faceți clic pe butonul Reveal, acestea sunt așezate împreună într-un pom de Crăciun. Nu este doar o soluție unică, ci, de asemenea, amintește de un joc mai simplu.

3. Animație de Crăciun cu zăpadă

Nu trebuie neapărat să utilizați JavaScript, dacă doriți să creați o animație rece pentru Crăciun. În acest pix, atât animația cu zăpadă cât și imaginile de fundal sunt create exclusiv în CSS. Merită să examinăm codul un pic, deoarece arată capacitățile incredibile ale CSS3. Imaginea de fundal poate fi chiar greșită pentru un grafic SVG real.

4. Mos Craciun!

Santa on the Run! este un joc distractiv JavaScript pentru sărbătorile care utilizează cadrul de joc HTML5 phaser.js. Nu există prea multe reguli în acest joc: Santa rulează infinit sau cel puțin până când cade. Acest pix vă oferă o oportunitate excelentă de a înțelege cum să scrieți un joc mai simplu în JavaScript.

5. Secret Santa Nume Picker

Alegerea unui nume dintr-o pălărie a fost o metodă populară în școli și birouri pentru a alege Secret Santas - acest stilou este doar o versiune digitală a acestei tradiții. Pe măsură ce utilizează doar JavaScript de la vanilla, îl puteți încorpora cu ușurință în propriul site. Schimbați doar numele din interiorul variabilei da.

6. Bile de Crăciun în CSS Pure

Aceste bile de Crăciun vesele sunt scrise în CSS pur, luând levierul regulilor de rază de graniță. Diferitele părți ale bilelor sunt setate împreună prin utilizarea unor poziții relative calculate precis.

Dacă doriți să adăugați rapid o atmosferă de vacanță unei pagini web, introduceți doar câteva dintre aceste bile în locurile potrivite într-o culoare care se potrivește cu designul general al site-ului.

7. fulgi de zăpadă mobili

Puteți face ca aceste fulgi de zăpadă să se miște trecând deasupra lor pe un desktop sau prin înclinarea smartphone-ului. Funcționalitatea este oferită de JavaScript orientat pe obiecte, utilizat inteligent de către dezvoltator pentru a crea o clasă de Snowflake personalizată.

Fulgi de zăpadă se construiesc în CSS3, iar fundalul folosește gradienți - nu există imagini în acest stilou.

8. Experimentul de acordeon de vacanță

Acest acordeon de vacanță este pur și simplu frumos. Dacă deplasați mouse-ul peste o filă, ajunge să vă concentrați prin extinderea unui pic și dacă faceți clic pe el, apare brusc și acoperă întreaga pagină. Este interesant de remarcat faptul că acest stilou utilizează Vectori grafice scalabile (SVG), care sunt decorate cu CSS.

SVG-urile sunt mai puternice decât par a fi la prima vedere, ele pot fi poziționate și proiectate inteligent cu aceleași reguli de stil pe care le folosim cu elemente HTML obișnuite.

9. Cangurul de zăpadă Pure Flat CSS

Cine a spus designul plat trebuie să fie plictisitor? Acest om de zăpadă minunat poate adăuga cu ușurință spiritul de Crăciun la orice design. Nu există imagini folosite pentru omul de zăpadă, este complet scris în CSS. Merită să aruncăm o privire la codul CSS un pic și să vedem cum dezvoltatorul folosește: înainte și după pseudo selectori pentru a obține rezultatul dorit.

10. CSS3 Snowflake

Puteți facilita crearea de imagini numai pentru CSS3 utilizând instrumente avansate de dezvoltare frontală; acest bine proiectat CSS3 fulg de zăpadă este un excelent exemplu pentru acest lucru. Dezvoltatorul a folosit limbajul tematic Jade care se compila în HTML și preprocesorul SSS CSS pentru a implementa acest design uimitor de fulg de zăpadă.

11. Butonul de Crăciun

Desenele inteligente aleg frecvent soluții subtile, la fel ca și butonul de Crăciun cu zăpadă din acest stilou. Fundalul roșu închis este o alegere perfectă pentru un design de Crăciun; nu totul trebuie să fie în cele din urmă verde.

Culorile, gradientele, fontul și efectul hover fac acest buton foarte elegant și solemn. Aveți nevoie doar de câteva dintre ele pentru a decora rapid un site pentru Crăciun.

12. Parallax Happy Holiday

Dacă vă place scrollingul parallax, de ce nu l-ați folosi pentru design-urile de vacanță? Dezvoltatorul acestui stilou experimentat în mod inteligent cu efect și utilizat plugin Parallax.js jQuery într-un mod mai puțin frecvente, efectul de defilare nu este verticală ca de obicei, dar orizontală. Atmosfera de Crăciun este intensificată de o ninsoare impresionantă

Dacă ar fi trebuit să aleg orice defecțiune a acestui pix, ar fi alegerea de culoare: literele albe pe un fundal parțial alb slăbește în mod semnificativ accesibilitatea designului.

13. CSS Paper Crapping Christmas

Puteți crea o hârtie de Crăciun complet unică cu ajutorul CSS3. Dezvoltatorul acestui pix arată nu numai una, ci șase variante pentru acest lucru. Modelele frumoase sunt realizate prin utilizarea inteligentă a gradientelor CSS și a proprietății de modelare în fundal.

Puteți găsi exemple mai interesante și o explicație detaliată pe site-ul web al dezvoltatorului.

14. Caseta în interiorul căsuței

Acest design imaginativ a fost inspirat de păpuși tradiționale rusești (o păpușă în interiorul unei păpuși). Dacă deschideți caseta exterioară făcând clic pe ea, aceasta arată o cutie interioară care este și cutia exterioară a unei alte cutii interioare. Funcționalitatea este scrisă în jQuery, iar locurile exacte ale casetelor sunt setate cu ajutorul regulilor de poziție absolute și relative în fișierul CSS.

15. Cutie cadou cu efect de coajă de hârtie

Dacă reușiți să eliminați panglica din acest cadou prin glisarea lui, puteți să aruncați o privire la efectul de coajă de hârtie supercool care dezvăluie conținutul interior al cadoului. Puteți citi tutorialul complet pe site-ul web al dezvoltatorului, este un truc pe care merită cu siguranță să îl înveți. Dacă doriți doar să utilizați codul, îl puteți clona de la GitHub.

16. Canvas animat de animație

Crăciunul poate fi un timp excelent pentru a experimenta lucruri noi, la fel cum a făcut-o dezvoltatorul în acest stilou, folosind panza HTML5 ca fundal animat. Panza vine înaintea conținutului (Happy Holidays!) În fișierul HTML și este setat ca fundal cu ajutorul poziționării inteligente CSS.

Stiloul utilizează, de asemenea, un script de animație de fundal inclus ca fișier JavaScript separat.

17. UI card cadou

Această carte cadou nu este numai pentru Crăciun, dar poate fi utilizată oricând atunci când doriți să surprindeți utilizatorii dvs. cu un cadou pe site-ul dvs. Web. Nu se bazează pe JavaScript, deoarece este scris în întregime în limba de stil Sass.

Design-ul folosește proprietatea CSS3 care permite dezvoltatorilor să afișeze numai o regiune specifică a unui element, în loc să arate întreaga sa zonă.

18. Cardul Crăciun de Crăciun pur CSS

Acest Mos Craciun infinit râde - folosind doar HTML și CSS3 - vă poate oferi posibilitatea de a înțelege cum poate fi folosită sintaxa de animație a cadrelor cheie în practică. În CSS3 puteți utiliza regula @keyframes pentru a specifica regulile unei animații și apoi puteți lega această animație specificată la un anumit element utilizând proprietatea CSS3 animație.

Trebuie să adăugați numele keyframe ca prima valoare a proprietății de animație, la fel ca dezvoltatorul a făcut acest lucru cu cadrele cheie personalizate numite bodyLaugh, beardLaugh, headLaugh și mouthLaugh creat special pentru acest stilou.

19. Crăciunul de Craciun

Dacă vă deplasați peste acest impresionant Crăciun de Crăciun, acesta dezvăluie un mesaj unic de Crăciun care este un mod uimitor de a dori un Crăciun fericit pentru vizitatorii dvs. HTML este scris în HAML, HTML abstractizare Markup Language, în timp ce regulile de stil iau pârghie de puterea Sass Sintactic Awesome limbaj Styesheets.

Rezultatul este într-adevăr inteligent și minunat. Prin adăugarea unui pic mai mult de JavaScript, acesta poate fi chiar folosit pentru a trimite citate sau mesaje personalizate utilizatorilor.

20. Lumini de Crăciun care clipesc

Aceste lumini intermitente de Crăciun pot oferi rapid o atmosferă unică pentru orice site web. Codul front-end este scris în HAML care se compilează în HTML, Sass care se compilează în CSS și jQuery.

Efectul de strălucire animat este realizat prin regula de mai sus @frame-cheie furnizată de CSS3. Culorile led-urilor sunt setate în fișierul jQuery prin adăugarea a 50 de grade la valoarea Hue a led-ului precedent folosind scala de culoare HSL.