20 Projek Krismas Awesome Tersembunyi di CodePen

CodePen adalah taman permainan dalam talian untuk pembangun front-end berbakat, tempat di mana anda sentiasa boleh mencari projek-projek sejuk untuk memperluaskan cakrawala anda, dan melihat apa yang pemaju lain terpulang. Cuti akhir tahun adalah masa yang tepat untuk mengejutkan orang yang anda sayangi dengan projek peribadi yang kreatif, atau mengucapkan terima kasih kepada para pelanggan anda dengan reka bentuk canggih dan canggih yang akan membantu meraikan percutian.

Dalam jawatan ini kita akan mengintip 20 eksperimen Krismas hebat pada CodePen, yang boleh anda gunakan untuk inspirasi untuk mencipta reka bentuk anda sendiri.

1. Buku Muzik Krismas Keluarga

Buku Muzik Krismas Keluarga yang indah ini boleh memainkan lagu Krismas kegemaran anda yang dihoskan di SoundCloud. Peraturan gaya ditulis dalam bahasa gaya gaya kurang, dan fungsi pemain muzik disediakan oleh plugin jQuery tersuai.

Ikon salji dan ikon pokok Krismas di latar belakang memberi atmosfera yang serius kepada reka bentuk, dan jika anda melayang di atas pen anda juga boleh mencari beberapa kesan CSS halus.

2. Pokok Krismas Digital

Merekabentuk untuk Krismas adalah tugas yang berterima kasih, kerana unsur-unsur visual tipikalnya boleh dibina dengan banyak cara kreatif. Pen ini adalah contoh yang baik untuk ini. Pada mulanya anda hanya dapat melihat segitiga yang berwarna-warni, yang tampaknya tidak berkaitan dengan cuti, tetapi apabila anda mengklik pada butang Reveal, ia akan disatukan menjadi pokok Krismas. Ia bukan sahaja penyelesaian yang unik, tetapi juga mengingatkan permainan yang lebih mudah.

3. Animasi Krismas dengan Salji

Anda tidak semestinya perlu menggunakan JavaScript, jika anda mahu membuat animasi sejuk untuk Krismas. Dalam pen ini, kedua-dua animasi salji dan imej latar belakang dicipta semata-mata dalam CSS. Ia bernilai memeriksa kod sedikit, kerana ia menunjukkan keupayaan CSS3 yang luar biasa. Imej latar belakang boleh disalah anggap sebagai grafik SVG sebenar.

4. Santa On The Run!

Santa On The Run! adalah permainan JavaScript yang menyeronokkan untuk cuti yang menggunakan rangka permainan HTML phaser.js. Tidak ada terlalu banyak peraturan dalam permainan ini: Santa berjalan tak terhingga, atau sekurang-kurangnya sehingga dia jatuh. Pen ini memberi anda peluang yang baik untuk memahami cara menulis permainan yang lebih mudah dalam JavaScript.

5. Rahsia Nama Santa Pemetik

Memilih nama keluar dari topi telah menjadi cara yang popular di sekolah dan pejabat untuk memilih Rahsia Santas - pen ini hanyalah versi digital dari tradisi ini. Memandangkan hanya menggunakan JavaScript vanila, anda boleh dengan mudah membenamkannya ke laman web anda sendiri. Hanya ubah nama-nama di dalam pemboleh ubah memberi.

6. Bola Krismas dalam CSS Tulen

Bola-bola Krismas yang ceria ini ditulis dalam CSS tulen yang mengambil leverage peraturan perbatasan sempadan. Bahagian-bahagian yang berlainan dari bola disusun bersama-sama dengan menggunakan posisi relatif tepat dikira.

Sekiranya anda ingin menambahkan suasana percutian ke laman web dengan cepat, masukkan beberapa bola ini ke tempat yang sesuai dengan warna yang sesuai dengan reka bentuk keseluruhan laman web.

7. Meluncur salji

Anda boleh membuat kepingan salji ini bergerak dengan melayang di atasnya pada desktop, atau dengan memiringkan telefon pintar anda. Fungsi ini disediakan oleh JavaScript berorientasikan objek yang bijak digunakan oleh pemaju untuk membuat kelas Snowflake tersuai.

Gumpalan salji itu sendiri dibina dalam CSS3, dan latar belakang menggunakan kecerunan - tiada imej dalam pen ini sama sekali.

8. Eksperimen Akordion Percutian

Akordion percutian ini hanya cantik. Sekiranya anda melayari tab, ia akan memberi tumpuan dengan mengembangkan sedikit, dan jika anda klik padanya tiba-tiba muncul dan merangkumi seluruh halaman. Ia menarik untuk dicatat bahawa pen ini menggunakan Grafik Vektor Skalable (SVG) yang digayakan dengan CSS.

SVGs lebih berkuasa daripada mereka kelihatan pada pandangan pertama, mereka boleh dengan bijak diposisikan dan direka dengan peraturan gaya yang sama yang kita gunakan dengan elemen HTML biasa.

9. Flat CSSM CSS Tulen

Siapa kata reka bentuk rata perlu membosankan? Salji salji yang indah ini dengan mudah boleh menambahkan semangat Krismas kepada sebarang reka bentuk. Tiada imej yang digunakan untuk orang salji, ia ditulis sepenuhnya dalam CSS. Ia bernilai untuk melihat kod CSS sedikit, dan lihat bagaimana pemaju menggunakan: sebelum dan: selepas pemilih pseudo untuk mencapai hasil yang diinginkan.

10. CSS3 Snowflake

Anda boleh memudahkan penciptaan imej CSS3 sahaja dengan menggunakan alat pembangunan maju front-end; kepingan salji CSS3 yang direka dengan baik ini merupakan contoh yang sangat baik untuk ini. Pembangun menggunakan bahasa templat Jade yang dikompilasi ke dalam HTML, dan preprocessor CSS Sass untuk melaksanakan reka bentuk salji yang menakjubkan ini.

11. Krismas Button

Reka bentuk pintar sering memilih penyelesaian yang halus, sama seperti Button Krismas bersalji di pen ini. Latar belakang merah gelap adalah pilihan yang sempurna untuk reka bentuk Krismas; tidak semuanya perlu menjadi hijau selepas semua.

Warna, kecerunan, typeface, dan kesan hover membuat butang ini sangat elegan dan penuh. Anda hanya memerlukan sedikit daripada mereka untuk menghias tapak dengan mudah untuk Christmastime.

12. Parallax Happy Holiday

Jika anda suka menatal paralaks, kenapa anda tidak menggunakannya untuk reka bentuk percutian anda? Pemaju pen ini dengan bijak bereksperimen dengan kesannya, dan menggunakan plugin jQuery Parallax.js dengan cara yang kurang biasa, kesan menatal tidak menegak seperti biasa, tetapi mendatar. Suasana Natal dipergiatkan dengan salji yang mengagumkan

Jika saya terpaksa memilih apa-apa kecacatan pen ini, ia akan menjadi pilihan warna: huruf putih pada latar belakang putih sebahagiannya melemahkan aksesibiliti reka bentuk.

13. Kertas Pembungkus Krismas CSS

Anda boleh membuat kertas pembalut Krismas yang unik dengan bantuan CSS3. Pemaju pen ini menunjukkan bukan sahaja satu, tetapi enam varian untuk ini. Corak cantik dicapai oleh penggunaan pintar kecerunan CSS dan sifat latar belakang-gabungan-mod.

Anda boleh mencari contoh yang lebih keren dan penjelasan terperinci mengenai laman web pemaju sendiri.

14. Kotak Dalam Kotak

Reka bentuk imajinatif ini diilhamkan oleh anak patung tradisional Rusia (boneka dalam boneka). Jika anda membuka kotak luar dengan mengklik padanya, ia mendedahkan kotak dalaman yang juga kotak luar kotak dalaman yang lain. Fungsi ini ditulis dalam jQuery, dan tempat tepat kotak ditetapkan dengan bantuan peraturan kedudukan absolut dan relatif dalam file CSS.

15. Kotak Hadiah dengan Kesan Kertas Kertas

Sekiranya anda mengalih keluar reben dari hadiah ini dengan menyeretnya, anda boleh melihat kesan kulit kertas supercool yang mendedahkan kandungan dalaman hadiah tersebut. Anda boleh membaca tutorial penuh di laman web pembangun, itu adalah trik yang pasti bernilai untuk belajar. Jika anda hanya mahu menggunakan kod yang anda boleh mengklonkannya dari GitHub juga.

16. Kanvas Animated Spirit Holiday

Krismas boleh menjadi masa yang hebat untuk bereksperimen dengan perkara-perkara baru, seperti pemaju melakukannya dalam pen ini dengan menggunakan kanvas HTML5 sebagai latar belakang animasi. Kanvas itu datang sebelum kandungan (Happy Holidays!) Dalam fail HTML, dan ia ditetapkan sebagai latar belakang dengan bantuan kedudukan CSS pintar.

Pen ini juga menggunakan skrip animasi latar belakang yang disertakan sebagai fail JavaScript yang berasingan.

17. UI Kad Hadiah

Kad hadiah ini menarik bukan hanya untuk Krismas, tetapi boleh digunakan pada bila-bila masa apabila anda ingin mengejutkan pengguna anda dengan hadiah di laman web anda. Ia tidak bergantung kepada JavaScript kerana ia ditulis sepenuhnya dalam bahasa gaya bahasa Sass.

Reka bentuk ini menggunakan ciri-ciri CSS3 klip-jalan yang membolehkan pemaju untuk memaparkan hanya rantau tertentu bagi sesuatu unsur, dan bukannya menunjukkan keseluruhan kawasannya.

18. Pure CSS Merry Christmas Card

Ini Santa yang ketawa melampau - menggunakan hanya HTML dan CSS3 - dapat memberikan anda peluang untuk memahami bagaimana sintaks animasi keyframe dapat digunakan dalam praktik. Dalam CSS3, anda boleh menggunakan peraturan @keyframes untuk menentukan peraturan animasi, dan kemudian anda boleh mengikat animasi yang ditentukan ini kepada elemen tertentu dengan menggunakan animasi CSS3 harta.

Anda perlu menambah nama kerangka utama sebagai nilai pertama dari harta animasi, sama seperti pemaju melakukan ini dengan kunci utama tersuai yang dipanggil bodyLaugh, beardLaugh, headLaugh, dan mulutLaugh khusus dibuat untuk pen ini.

19. Xmas Cracker

Sekiranya anda melayang ke atas Xmas Cracker yang mengagumkan ini, ia mendedahkan satu mesej Krismas yang unik yang merupakan cara yang luar biasa untuk mengharapkan Merry Christmas kepada pengunjung anda. HTML ditulis dalam HAML, HTML Abstraksi Markup Language, sementara peraturan gaya mengambil leverage kekuatan Sass Syntactically Awesome Styesheet bahasa.

Hasilnya memang pintar dan mengagumkan. Dengan menambahkan sedikit lagi JavaScript, ia boleh digunakan untuk menyampaikan petikan atau mesej peribadi kepada pengguna.

20. Lampu Xmas Berkelip

Lampu-lampu Krismas yang berkedip ini dengan cepat boleh memberikan suasana yang unik kepada mana-mana laman web. Kod penghujung ditulis dalam HAML yang dikompilasi ke HTML, Sass yang dikompil ke CSS, dan jQuery.

Kesan bersinar animasi dicapai oleh peraturan @keyframes yang dinyatakan di atas oleh CSS3. Warna pekeliling ditetapkan dalam fail jQuery dengan menambahkan 50 darjah ke nilai Hue yang diterajui sebelumnya menggunakan skala warna HSL.