20 Proyek Natal Luar Biasa yang Tersembunyi di CodePen

CodePen adalah taman bermain online untuk pengembang front-end yang berbakat, tempat di mana Anda selalu dapat menemukan proyek keren untuk memperluas wawasan Anda, dan melihat apa yang sedang dilakukan pengembang lain. Liburan akhir tahun adalah waktu yang tepat untuk mengejutkan orang yang Anda cintai dengan proyek pribadi yang kreatif, atau untuk mengucapkan terima kasih kepada pelanggan Anda dengan beberapa desain keren dan canggih yang akan membantu ceria liburan.

Dalam posting ini kita akan mengintip 20 eksperimen Natal yang luar biasa di CodePen, yang dapat Anda gunakan untuk inspirasi untuk membuat desain Anda sendiri.

1. Buku Nyanyian Natal Keluarga

Aplikasi Buku Nyanyian Natal Keluarga yang indah ini dapat memutar lagu-lagu Natal favorit Anda yang dihosting di SoundCloud. Aturan gaya ditulis dalam bahasa stylesheet KURANG, dan fungsionalitas pemutar musik disediakan oleh plugin jQuery kustom.

Ikon kepingan salju dan pohon Natal di latar belakang memberikan suasana khusyuk pada desain, dan jika Anda mengarahkan kursor ke pena Anda juga dapat menemukan beberapa efek CSS halus.

2. Pohon Natal Digital

Merancang untuk Natal selalu merupakan pekerjaan yang patut disyukuri, karena elemen visualnya yang khas dapat dibangun dengan banyak cara kreatif. Pena ini adalah contoh yang bagus untuk ini. Pada awalnya Anda hanya dapat melihat segitiga berwarna-warni, yang tampaknya tidak terkait dengan liburan, tetapi ketika Anda mengklik tombol Reveal, mereka diatur bersama menjadi pohon Natal. Ini bukan hanya solusi unik, tetapi juga mengingatkan pada game yang lebih sederhana.

3. Animasi Natal dengan Snowfall

Anda tidak perlu menggunakan JavaScript, jika Anda ingin membuat animasi keren untuk Natal. Dalam pena ini, animasi salju turun dan gambar latar belakang dibuat murni dalam CSS. Layak untuk memeriksa kode sedikit, karena menunjukkan kemampuan luar biasa dari CSS3. Gambar latar belakang bahkan dapat disalahartikan sebagai grafik SVG sungguhan.

4. Santa On The Run!

Santa Di Lari! adalah permainan JavaScript yang menyenangkan untuk liburan yang memanfaatkan kerangka kerja HTML5 phaser.js. Tidak ada terlalu banyak aturan dalam permainan ini: Santa berjalan tanpa batas, atau setidaknya sampai ia jatuh. Pena ini memberi Anda peluang bagus untuk memahami cara menulis game yang lebih sederhana dalam JavaScript.

5. Secret Name Name Picker

Memilih nama dari topi telah menjadi cara populer di sekolah dan kantor untuk memilih Santas Rahasia - pena ini hanyalah versi digital dari tradisi ini. Karena hanya menggunakan JavaScript vanilla, Anda dapat dengan mudah menanamkannya ke situs Anda sendiri. Cukup ganti nama di dalam variabel beri.

6. Bola Natal di CSS Murni

Bola Natal yang ceria ini ditulis dalam CSS murni dengan memanfaatkan aturan batas-jari. Bagian bola yang berbeda diatur bersama dengan memanfaatkan posisi relatif yang dihitung secara tepat.

Jika Anda ingin dengan cepat menambahkan suasana liburan ke halaman web, cukup masukkan beberapa bola ini ke tempat-tempat yang sesuai dengan warna yang sesuai dengan keseluruhan desain situs..

7. Kepingan Salju Bergerak

Anda dapat memindahkan kepingan salju ini dengan mengarahkannya di desktop, atau dengan memiringkan ponsel cerdas Anda. Fungsionalitas ini disediakan oleh JavaScript berorientasi objek yang digunakan secara cerdas oleh pengembang untuk membuat kelas Snowflake kustom.

Kepingan salju itu sendiri dibangun dalam CSS3, dan latar belakang menggunakan gradien - tidak ada gambar di pena ini sama sekali.

8. Percobaan Akordeon Liburan

Akordeon liburan ini sangat indah. Jika Anda mengarahkan kursor ke tab, fokusnya adalah sedikit memperluas, dan jika Anda mengkliknya tiba-tiba muncul dan menutupi seluruh halaman. Sangat menarik untuk dicatat bahwa pena ini menggunakan Scalable Vector Graphics (SVG) yang ditata dengan CSS.

SVG lebih kuat daripada yang terlihat pada pandangan pertama, mereka dapat diposisikan secara cerdas dan dirancang dengan aturan gaya yang sama yang kita gunakan dengan elemen HTML biasa.

9. Flat Pure CSS Snowman

Siapa bilang desain datar harus membosankan? Manusia salju yang cantik ini dapat dengan mudah menambahkan semangat Natal ke desain apa pun. Tidak ada gambar yang digunakan untuk manusia salju, itu sepenuhnya ditulis dalam CSS. Layak untuk melihat kode CSS sedikit, dan melihat bagaimana pengembang menggunakan: sebelum dan: setelah penyeleksi semu untuk mencapai hasil yang diinginkan.

10. CSS3 Snowflake

Anda dapat memfasilitasi pembuatan gambar hanya CSS3 dengan menggunakan alat pengembangan front-end canggih; kepingan salju CSS3 yang dirancang dengan baik ini adalah contoh yang bagus untuk ini. Pengembang memanfaatkan bahasa templating Jade yang mengkompilasi ke dalam HTML, dan preprocessor Sass CSS untuk mengimplementasikan desain kepingan salju yang menakjubkan ini.

11. Tombol Natal

Desain cerdas sering memilih solusi halus, seperti Tombol Natal yang bersalju di pena ini. Latar belakang merah gelap adalah pilihan yang sempurna untuk desain Natal; tidak semuanya harus berwarna hijau.

Warna, gradien, jenis huruf, dan efek hover membuat tombol ini sangat elegan dan khidmat. Anda hanya perlu beberapa dari mereka untuk dengan cepat menghias situs untuk Natal.

12. Parallax Happy Holiday

Jika Anda suka scrolling paralaks, mengapa Anda tidak menggunakannya untuk desain liburan Anda? Pengembang pena ini dengan cerdas bereksperimen dengan efek, dan menggunakan plugin jQuery Parallax.js dengan cara yang kurang umum, efek gulir tidak vertikal seperti biasa, tetapi horisontal. Suasana Natal diperkuat oleh hujan salju yang mengesankan

Jika saya harus memilih kesalahan apa pun dari pena ini, itu akan menjadi pilihan warna: huruf putih pada latar belakang sebagian putih secara signifikan melemahkan aksesibilitas desain..

13. Kertas Pembungkus Natal CSS

Anda dapat membuat kertas kado Natal yang benar-benar unik dengan bantuan CSS3. Pengembang pena ini tidak hanya menampilkan satu, tetapi enam varian untuk ini. Pola-pola indah dicapai dengan pemanfaatan pintar gradien CSS dan properti mode latar belakang.

Anda dapat menemukan lebih banyak contoh keren dan penjelasan terperinci di situs web pengembangnya sendiri.

14. Kotak Dalam Kotak

Desain imajinatif ini terinspirasi oleh boneka tradisional Rusia (boneka di dalam boneka). Jika Anda membuka kotak luar dengan mengkliknya, itu akan mengungkapkan kotak dalam yang juga merupakan kotak luar dari kotak dalam lainnya. Fungsionalitas ditulis dalam jQuery, dan tempat-tempat yang tepat dari kotak diatur dengan bantuan aturan posisi absolut dan relatif dalam file CSS.

15. Kotak Hadiah dengan Efek Kupas Kertas

Jika Anda berhasil menghapus pita dari hadiah ini dengan menyeretnya, Anda dapat melihat efek kulit kertas supercool yang mengungkapkan isi bagian dalam hadiah. Anda dapat membaca tutorial lengkap di situs web pengembang, itu adalah trik yang pasti layak untuk dipelajari. Jika Anda hanya ingin menggunakan kode, Anda juga bisa mengkloningnya dari GitHub.

16. Holiday Spirit Animated Canvas

Natal dapat menjadi waktu yang tepat untuk bereksperimen dengan hal-hal baru, seperti yang dilakukan pengembang dalam pena ini dengan menggunakan kanvas HTML5 sebagai latar belakang animasi. Kanvas hadir sebelum konten (Selamat Liburan!) Dalam file HTML, dan itu ditetapkan sebagai latar belakang dengan bantuan penentuan posisi CSS cerdas.

Pena juga menggunakan skrip animasi latar belakang yang disertakan sebagai file JavaScript terpisah.

17. Kartu Hadiah UI

Kartu hadiah yang menarik ini tidak hanya untuk Natal, tetapi dapat digunakan kapan saja ketika Anda ingin mengejutkan pengguna Anda dengan hadiah di situs web Anda. Itu tidak bergantung pada JavaScript karena sepenuhnya ditulis dalam bahasa Sass stylesheet.

Desain memanfaatkan properti CSS-path klip3 yang memungkinkan pengembang untuk hanya menampilkan wilayah tertentu dari suatu elemen, alih-alih menunjukkan seluruh wilayahnya.

18. Kartu Natal Selamat CSS murni

Sinterklas tertawa yang tak terbatas ini - hanya menggunakan HTML dan CSS3 - dapat memberi Anda kesempatan untuk memahami bagaimana sintaks animasi keyframe dapat digunakan dalam praktik. Di CSS3 Anda bisa menggunakan aturan @keyframes untuk menentukan aturan animasi, dan kemudian Anda bisa mengikat animasi yang ditentukan ini ke elemen tertentu dengan menggunakan properti CSS3 animasi.

Anda perlu menambahkan nama keyframe sebagai nilai pertama dari properti animasi, sama seperti pengembang melakukan ini dengan keyframe kustom yang disebut bodyLaugh, beardLaugh, headLaugh, dan mouthLaugh khusus dibuat untuk pena ini.

19. Xmas Cracker

Jika Anda membawa lebih dari Xmas Cracker yang mengesankan ini, itu mengungkapkan pesan Natal unik yang merupakan cara yang luar biasa untuk mengucapkan Selamat Natal kepada pengunjung Anda. HTML ditulis dalam HAML, Bahasa Markup Abstraksi HTML, sedangkan aturan gaya memanfaatkan kekuatan dari bahasa Sass Stye Heets Sass Syntactically Awesome.

Hasilnya memang pintar dan mengagumkan. Dengan menambahkan lebih banyak JavaScript, ini bahkan dapat digunakan untuk mengirimkan kutipan atau pesan khusus kepada pengguna.

20. Lampu Xmas Berkedip

Lampu Natal yang berkedip ini dapat dengan cepat memberikan suasana unik ke situs web mana pun. Kode front-end ditulis dalam HAML yang mengkompilasi ke dalam HTML, Sass yang mengkompilasi ke dalam CSS, dan jQuery.

Efek animasi menyala dicapai oleh aturan @keyframes yang disediakan oleh CSS3. Warna-warna led diatur dalam file jQuery dengan menambahkan 50 derajat ke nilai Hue dari led sebelumnya menggunakan skala warna HSL.