20 Lieliski Ziemassvētku projekti, kas paslēpti CodePen

CodePen ir tiešsaistes spēļu laukums talantīgiem priekšgājēju izstrādātājiem, vieta, kur vienmēr varat atrast atdzist projektus, lai paplašinātu savu redzesloku, un redzētu, ko citi izstrādātāji ir gatavi. Visu gadu brīvdienas ir lielisks laiks, lai pārsteigtu savus mīļotos cilvēkus ar radošiem personīgiem projektiem, vai pateikt pateicību saviem klientiem ar dažiem atdzistiem, moderniem dizainiem, kas palīdzēs atpūsties.

Šajā amatā mēs apskatīsim 20 awesome Ziemassvētku eksperimenti CodePen, jūs varat izmantot, lai iedvesmotu savu dizainu.

1. Ģimenes Ziemassvētku dziesmu grāmata

Šī jaukā ģimenes Ziemassvētku dziesmu lietotne var atskaņot jūsu iecienītākās Ziemassvētku dziesmas, kas atrodas SoundCloud. Stila noteikumi ir rakstīti LESS stila lapas valodā, un mūzikas atskaņotāja funkcionalitāti nodrošina pielāgots jQuery spraudnis.

Sniegpārsla un Ziemassvētku eglītes ikonas fonā dod svinīgu atmosfēru dizainam, un, ja jūs virziet virs pildspalvu, jūs varat atrast arī dažas smalkas CSS sekas.

2. Digitālā Ziemassvētku eglīte

Ziemassvētku dizains vienmēr ir pateicīgs darbs, jo tā tipiskos vizuālos elementus var veidot daudzos radošos veidos. Šis pildspalva ir labs piemērs tam. Sākumā jūs varat redzēt tikai krāsainus trīsstūri, kas šķietami nav saistīti ar brīvdienām, bet, noklikšķinot uz pogas Atklāt, tie tiek apvienoti Ziemassvētku eglīte. Tas ir ne tikai unikāls risinājums, bet arī atgādina vienkāršāku spēli.

3. Ziemassvētku animācija ar sniegputenī

Jums nav obligāti jāizmanto JavaScript, ja vēlaties izveidot atdzist animāciju Ziemassvētkiem. Šajā pildspalvā gan sniegputenī, gan fona attēli tiek radīti tikai CSS. Ir vērts pārbaudīt kodu mazliet, jo tas parāda CSS3 neticamas spējas. Fona attēlu var pat sajaukt ar īstu SVG grafiku.

4. Santa uz palaist!

Santa uz palaist! ir jautra JavaScript spēle brīvdienām, izmantojot phaser.js HTML5 spēļu sistēmu. Šajā spēlē nav pārāk daudz noteikumu: Santa darbojas bezgalīgi, vai vismaz līdz brīdim, kad viņš nokrīt. Šī pildspalva sniedz jums lielisku iespēju saprast, kā JavaScript veidot vienkāršāku spēli.

5. Noslēpuma vārda atlasītājs

Nosaukuma izņemšana no cepures ir bijis populārs veids skolās un birojos, lai izvēlētos Secret Santas - šī pildspalva ir tikai šīs tradīcijas digitālā versija. Tā kā tā izmanto tikai vaniļas JavaScript, jūs varat to viegli ievietot savā vietnē. Vienkārši nomainiet vārdus dot mainīgā.

6. Ziemassvētku bumbas Pure CSS

Šīs jautrās Ziemassvētku bumbiņas ir rakstītas tīrā CSS, ņemot vērā robežu rādiusa noteikumus. Dažādas bumbiņu daļas tiek noteiktas kopā, izmantojot precīzi aprēķinātās relatīvās pozīcijas.

Ja vēlaties ātri pievienot brīvdienu atmosfēru tīmekļa lapai, vienkārši ievietojiet dažas no šīm bumbām atbilstošās vietās krāsā, kas atbilst vietnes kopējam dizainam.

7. Kustamas sniega pārslas

Jūs varat veikt šos sniegpārslas pārvietoties, novietojot tos uz galda vai noliecot viedtālruni. Funkciju nodrošina objektorientēta JavaScript, ko attīstītājs gudri izmanto, lai izveidotu pielāgotu Snowflake klasi.

Paši sniegpārsli ir iebūvēti CSS3, un fons izmanto gradientus - šajā pildspalva nav nekādu attēlu.

8. Brīvdienu akordeona eksperiments

Šis brīvdienu akordeons ir vienkārši skaists. Ja jūs virzāmies virs cilnes, kas vērsta uz fokusu, paplašinot mazliet, un, noklikšķinot uz tā, tā pēkšņi parādās un aptver visu lapu. Interesanti atzīmēt, ka šajā pildspalvveida pilnšļircē tiek izmantoti pielāgojami Vector Graphics (SVG), kas ir veidoti ar CSS.

SVG ir jaudīgāki, nekā šķiet, ka tie ir pirmās acumirklī, tos var gudri izvietot un veidot ar tādiem pašiem stila noteikumiem, ko izmantojam ar parastiem HTML elementiem.

9. Flat Pure CSS sniegavīrs

Kurš teica, ka plakanam dizainam ir jābūt garlaicīgi? Šis jaukais sniegavīrs var viegli pievienot Ziemassvētku garu jebkuram dizainam. Sniegavīrs nav izmantojis attēlus, tas ir pilnīgi rakstīts CSS. Ir vērts apskatīt CSS kodu mazliet, un redzēt, kā attīstītājs izmanto: pirms un: pēc pseidogrupas atlasītājiem, lai sasniegtu paredzēto rezultātu.

10. CSS3 sniegpārsla

Jūs varat atvieglot tikai CSS3 attēlu izveidi, izmantojot progresīvus front-end izstrādes rīkus; šis labi izstrādātais CSS3 sniegpārsla ir lielisks piemērs tam. Izstrādātājs izmantoja Jade veidnes valodu, kas apkopo HTML, un Sass CSS priekšprocesoru, lai īstenotu šo apbrīnojamo sniegpārsla dizainu.

11. Ziemassvētku poga

Viedie dizaini bieži izvēlas izsmalcinātus risinājumus, tāpat kā sniega Ziemassvētku poga šajā pildspalva. Tumši sarkans fons ir lieliska izvēle Ziemassvētku dizainam; ne viss ir zaļš.

Krāsas, slīpumi, šrifts un slīdošais efekts padara šo pogu ļoti elegantu un svinīgu. Jums ir nepieciešamas tikai dažas no tām, lai ātri izrotātu krustmāmības vietni.

12. Parallax Happy Holiday

Ja jums patīk paralaksu ritināšana, kāpēc jūs to neizmantojat brīvdienu dizainam? Šīs pildspalvas izstrādātājs gudri eksperimentēja ar šo efektu un izmantoja parallax.js jQuery spraudni retāk, ritināšanas efekts nav vertikāls kā parasti, bet horizontāls. Ziemassvētku atmosfēru pastiprina iespaidīgs sniegs

Ja man būtu jāizvēlas jebkura šīs pildspalvas kļūda, tā būtu krāsu izvēle: balti burti uz daļēji balta fona ievērojami samazina dizaina pieejamību..

13. CSS Ziemassvētku iesaiņošanas papīrs

Ar CSS3 var izveidot pilnīgi unikālu Ziemassvētku iesaiņošanas papīru. Šī pildspalvu attīstītājs parāda ne tikai vienu, bet sešus variantus. Skaisti modeļi tiek sasniegti, izmantojot gudru CSS gradientu un fona-maisījuma režīma īpašumu.

Jūs varat atrast vēl vēsākus piemērus un detalizētu paskaidrojumu izstrādātāja mājas lapā.

14. Kaste kastes iekšpusē

Šo iztēles dizainu iedvesmoja tradicionālās krievu lelles (lelle lelles iekšpusē). Atverot ārējo kasti, noklikšķinot uz tā, tas atklāj iekšējo kasti, kas ir arī citas iekšējās kastes ārējā kaste. Funkcija ir rakstīta jQuery, un precīzas kastu vietas tiek iestatītas, izmantojot absolūtos un relatīvos pozīcijas noteikumus CSS failā..

15. Dāvanu kaste ar papīra mizas efektu

Ja jums ir izdevies noņemt šo lenti no šīs dāvanas, velkot to prom, varat aplūkot papīra mīkstuma efektu, kas atklāj dāvanas iekšējo saturu. Jūs varat izlasīt pilnu apmācību par izstrādātāja vietni, tas ir triks, ko noteikti ir vērts mācīties. Ja jūs vienkārši vēlaties izmantot kodu, varat to arī klonēt no GitHub.

16. Holiday Spirit animācijas audekls

Ziemassvētki var būt lielisks laiks, lai eksperimentētu ar jaunām lietām, tāpat kā attīstītājs to darīja šajā pildspalvā, izmantojot HTML5 audeklu kā animētu fonu. Audekls nāk pirms satura (Happy Holidays!) HTML failā, un tas ir iestatīts kā fons, izmantojot viedo CSS pozicionēšanu.

Pildspalva arī izmanto fona animācijas skriptu, kas iekļauts kā atsevišķs JavaScript fails.

17. Dāvanu karšu lietotāja interfeiss

Šī uzkrītošā dāvanu karte ir ne tikai Ziemassvētkiem, bet var tikt izmantota jebkurā laikā, kad vēlaties pārsteigt savus lietotājus ar dāvanu jūsu mājas lapā. Tas nav atkarīgs no JavaScript, jo tas ir pilnībā uzrakstīts Sass stila lapas valodā.

Dizainā tiek izmantota CSS3 klipkopas īpašība, kas ļauj izstrādātājiem attēlot tikai noteiktu elementu reģionu, nevis tā visu teritoriju..

18. Tīra CSS Ziemassvētku kartīte

Šī bezgalīgi smejošā Santa - izmantojot tikai HTML un CSS3 - var dot jums iespēju saprast, kā praktiski var izmantot keyframe animācijas sintaksi. CSS3 varat izmantot @keyframes noteikumu, lai norādītu animācijas noteikumus, un pēc tam šo saistīto animāciju varat saistīt ar noteiktu elementu, izmantojot animācijas CSS3 īpašumu.

Jums ir jāpievieno atslēgas rāmja nosaukums kā pirmā animācijas īpašuma vērtība, tāpat kā attīstītājs to darīja ar pielāgotu atslēgu karkasu, ko sauc par ķermeniLaugh, bārdu, smagi un muti, kas īpaši izveidoti šim pildspalvam..

19. Xmas Cracker

Ja jūs virzīsieties pār šo iespaidīgo Xmas Cracker, tas atklāj unikālu Ziemassvētku ziņojumu, kas ir pārsteidzošs veids, kā apmeklētājiem piedāvāt Priecīgus Ziemassvētkus. HTML ir uzrakstīts HAML, HTML abstrakcijas marķējuma valodā, bet stila noteikumi izmanto Sass Syntactically Awesome Styesheets valodas spēku..

Rezultāts ir gudrs un awesome. Pievienojot nedaudz vairāk JavaScript, to var pat izmantot, lai lietotājiem piegādātu pasūtījuma cenas vai ziņas.

20. Mirgojoša Xmas gaismas

Šīs mirgojošās Ziemassvētku gaismas var ātri dot unikālu atmosfēru jebkurai tīmekļa vietnei. Front-end kods ir rakstīts HAML, kas apkopo HTML, Sass, kas apkopo CSS, un jQuery.

Animētā kvēlojošā ietekme tiek sasniegta ar iepriekšminēto @keyframes noteikumu, ko nodrošina CSS3. Vadu krāsas tiek iestatītas jQuery failā, pievienojot 50 grādus iepriekšējā svārstību vērtībai, izmantojot HSL krāsu skalu.