{"id":3960,"date":"2020-03-12T03:31:00","date_gmt":"2020-03-12T03:31:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=3960"},"modified":"2020-03-10T03:51:26","modified_gmt":"2020-03-10T03:51:26","slug":"celestial-code-snippets-that-celebrate-the-sky-and-outer-space","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/celestial-code-snippets-that-celebrate-the-sky-and-outer-space\/","title":{"rendered":"Celestial Code Snippets That Celebrate the Sky and Outer Space"},"content":{"rendered":"\n<p>The natural world has always served as a great source of inspiration. And we can see some of its most amazing wonders by looking up towards the heavens.<\/p>\n\n\n\n<p>A crystal-blue sky on a sunny day, the stars twinkling at night. Then too, the thoughts of space exploration and our galaxy also ignite our imagination. What\u2019s above us brings both an everyday reality and curiosity of the unknown.<\/p>\n\n\n\n<p>It\u2019s no surprise that some very creative developers have used the sky and space as a subject of experimentation. The potential use of light, color, movement and the latest web technologies are all a natural fit.<\/p>\n\n\n\n<p>Today, we\u2019ll introduce you to some amazing examples that, in one way or another, utilize the sky and space. They run the gamut from scientifically accurate to pure fantasy. Enjoy!<\/p>\n\n\n\n<h2>Scroll Down the Sky<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Canvallax Demo: Parallax Sky Background\" id=\"cp_embed_ZbExyV\" src=\"https:\/\/codepen.io\/shshaw\/embed\/preview\/ZbExyV?height=300&amp;slug-hash=ZbExyV&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The\u00a0parallax scrolling\u00a0effect is just about everywhere these days. It\u2019s one of those trends that has taken on a life of its own. However, this is one of the most unique and compelling examples we\u2019ve seen. Scrolling down the page results in a 3D shifting of clouds, while a changing background color makes it seem like you\u2019re falling towards the Earth.<\/p>\n\n\n\n<h2>Map to the Stars<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"CSS Star Maps\" id=\"cp_embed_QWbvOMK\" src=\"https:\/\/codepen.io\/sweaver2112\/embed\/preview\/QWbvOMK?height=300&amp;slug-hash=QWbvOMK&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>What makes this star map so interesting is the CSS and JavaScript-powered interactivity. Click on a system and it comes into focus, complete with silky-smooth transitions. The map also shows a simulated orbit\u00a0path\u00a0and some fun emoji as icing on the cake.<\/p>\n\n\n\n<h2>Northern Lights<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/codepen.io\/jh3y\/pen\/KKpaZrO\n<\/div><\/figure>\n\n\n\n<p>One of the true wonders of the universe, the&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Aurora\" target=\"_blank\" rel=\"noreferrer noopener\">northern lights<\/a>&nbsp;(aurora borealis) is something not many of us get to see in person. But we can at least try to recreate the experience. Here, a pure CSS version of a glowing green and purple night sky can light up your screen.<\/p>\n\n\n\n<h2>The Sun Sets on the Web<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Sunset\" id=\"cp_embed_zYGBVoO\" src=\"https:\/\/codepen.io\/wstlnd\/embed\/preview\/zYGBVoO?height=300&amp;slug-hash=zYGBVoO&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>A stunning sunset is, on the contrary, something just about everyone can experience. But that doesn\u2019t make it any less stunning. This snippet allows you to put the sunset in motion anytime of day, just by clicking the great yellow sphere. The changing colors make for a attention-grabbing effect.<\/p>\n\n\n\n<h2>The City of Lights at Night<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Full Moon in Paris?\" id=\"cp_embed_rNVWVYd\" src=\"https:\/\/codepen.io\/pehaa\/embed\/preview\/rNVWVYd?height=300&amp;slug-hash=rNVWVYd&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Want to know when the full moon will shine on Paris, France? This delightful animation tells you, and gives you a bedroom window view of the Eiffel Tower. The only mystery here is whether the cozy black cat does anything special when the event arrives.<\/p>\n\n\n\n<h2>Pure CSS Saturn<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/codepen.io\/FelixLuciano\/pen\/dyoGoWO\n<\/div><\/figure>\n\n\n\n<p>Saturn\u2019s rings are a massive source of fascination among us humans. This CSS-only rendering of the planet offers a slightly different take. It\u2019s dark and the rings aren\u2019t quite as prominent as usual. But it provides a beautiful example of how CSS gradients can help us produce some amazing art.<\/p>\n\n\n\n<h2>Approaching the Sun<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Solar\" id=\"cp_embed_RwNmvwN\" src=\"https:\/\/codepen.io\/sweaver2112\/embed\/preview\/RwNmvwN?height=300&amp;slug-hash=RwNmvwN&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The use of WebGL makes this solar animation otherworldly. As the sun drops down from the top of the screen, notice the blurry effects around its edge. The level of detail here is just incredible. Thankfully, no heat makes it through the screen.<\/p>\n\n\n\n<h2>Colors for Every Sky<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Sky gradients\" id=\"cp_embed_rDEAl\" src=\"https:\/\/codepen.io\/zessx\/embed\/preview\/rDEAl?height=300&amp;slug-hash=rDEAl&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Rounding out our collection is a snippet that is a bit more utilitarian. It\u2019s a set of beautiful CSS gradients you can use to reproduce several different sky color combinations. You\u2019ll find everything from the dead of night, sunrise, sunset and the perfect blues of midday.<\/p>\n\n\n\n<h2>Exploring the Heavens Through Code<\/h2>\n\n\n\n<p>As the code snippets above demonstrate, the sky and outer space can add elements of fun and beauty to the web. Whether they recreate our world or aim to show us new ones, they offer a unique way to enhance the user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The natural world has always served as a great source of inspiration. And we can see some of its most amazing wonders by looking up towards the heavens. A crystal-blue sky on a sunny day, the stars twinkling at night. Then too, the thoughts of space exploration and our galaxy also ignite our imagination. What\u2019s [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3962,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,8,81,12],"tags":[25,146,57,116,82,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/03\/celestial-codepen.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-11S","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3960"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=3960"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3960\/revisions"}],"predecessor-version":[{"id":4468,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/3960\/revisions\/4468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3962"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=3960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=3960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=3960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}