Potongan kode surgawi merayakan surga dan luar angkasa

Dunia alami selalu menjadi sumber inspirasi yang hebat. Dan kita bisa melihat beberapa keajaibannya yang paling menakjubkan sambil memandang ke langit.

Langit sebening kristal di hari yang cerah, bintang-bintang berkelap-kelip di malam hari. Pikiran tentang eksplorasi ruang angkasa dan galaksi kita sendiri memicu imajinasi kita juga. Apa yang ada di atas kita memberikan realitas sehari-hari dan keingintahuan tentang yang tidak diketahui.

Tidak mengherankan, beberapa pengembang yang sangat kreatif telah menggunakan surga dan ruang angkasa sebagai subjek eksperimen. Potensi penggunaan cahaya, warna, gerakan, dan teknologi web terbaru cocok secara alami.

Hari ini kita akan menyajikan beberapa contoh bagus menggunakan surga dan ruang. Mereka menjalankan spektrum dari presisi ilmiah hingga imajinasi murni. Menikmati!

Gulir ke bawah ke langit

Efek pergeseran paralaks ada di mana-mana akhir-akhir ini. Ini adalah salah satu tren yang telah mengambil kehidupannya sendiri. Namun, ini adalah salah satu contoh paling unik dan menarik yang pernah kami lihat. Menggulir ke bawah halaman menghasilkan pengguliran awan 3D, sementara warna latar belakang yang berubah membuatnya tampak seperti Anda jatuh ke tanah.

Tonton demo Shaw’s Pen Canvallax: Parallax Sky Background

Peta untuk bintang-bintang

Apa yang membuat peta bintang ini menarik adalah interaktivitas berbasis CSS dan JavaScript. Klik pada sistem dan fokus, lengkap dengan transisi halus seperti sutra. Peta juga menunjukkan simulasi landasan pacu dan beberapa emoji menyenangkan seperti lapisan gula pada kue.

Lihat pena CSS Star Map milik Scott Weaver (@sweaver2112)

Cahaya utara

Salah satu keajaiban alam semesta yang sebenarnya, aurora borealis, adalah sesuatu yang tidak banyak dari kita lihat. Tapi setidaknya kita bisa mencoba untuk menciptakan kembali pengalaman itu. Di sini, versi CSS bersih dari langit malam berwarna hijau dan ungu muda dapat menerangi layar Anda.

Lihat pena Pure CSS Northern Lights? oleh Jhey

Matahari terbenam online

Sebaliknya, matahari terbenam yang dramatis adalah sesuatu yang hampir semua orang bisa alami. Tapi itu tidak membuatnya kurang mempesona. Cuplikan ini memungkinkan Anda untuk mengatur matahari terbenam bergerak kapan saja sepanjang hari, cukup klik pada bola kuning besar. Perubahan warna menciptakan efek yang mencolok.

Lihat pena matahari terbenam

Cahaya malam

Ingin tahu kapan bulan purnama akan bersinar di Paris, Prancis? Animasi luar biasa ini memberi tahu Anda dan memberi Anda pemandangan jendela Menara Eiffel. Satu-satunya misteri di sini adalah jika kucing hitam yang nyaman melakukan sesuatu yang istimewa ketika acara tiba.

Lihat pena Bulan Purnama di Paris? oleh Paulina Hetman

CSS Saturnus murni

Cincin Saturnus adalah sumber daya tarik yang hebat dalam diri kita. Representasi planet khusus CSS ini menawarkan perspektif yang sedikit berbeda. Hari sudah gelap dan cincin-cincin itu tidak menonjol sebagaimana mestinya. Tapi itu memberikan contoh yang bagus tentang bagaimana gradien CSS dapat membantu kita menciptakan seni yang hebat.

Lihat pena Saturnus Luciano Felix

Mendekati matahari

Menggunakan WebGL membuat animasi matahari ini keluar dari dunia ini. Saat matahari terbenam dari atas layar, Anda akan melihat efek buram di sekitar tepinya. Tingkat detail di sini sangat menakjubkan. Untungnya, tidak ada panas yang melewati layar.

Lihat pena Scott Weaver Solar

Warna untuk semua langit

Koleksi kami dilengkapi dengan bagian yang sedikit lebih berguna. Ini adalah satu set gradien CSS yang indah yang dapat Anda gunakan untuk membuat ulang kombinasi warna langit yang berbeda. Anda akan menemukan segalanya mulai dari kegelapan malam, matahari terbit, matahari terbenam, dan birunya makan malam yang sempurna.

Lihat gradien Pen Sky dari zessx

Jelajahi langit melalui kode

Seperti yang ditunjukkan oleh kode di atas, surga dan luar angkasa dapat menambahkan elemen kesenangan dan keindahan ke web. Apakah mereka menciptakan kembali dunia kita atau mencoba menunjukkan kepada kita dunia baru, mereka menyediakan cara unik untuk meningkatkan pengalaman pengguna.

Ingin melihat lebih banyak contoh? Lihat koleksi CodePen kami!