{"id":3052,"date":"2017-03-27T20:18:38","date_gmt":"2017-03-28T01:18:38","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2202"},"modified":"2017-03-27T20:18:38","modified_gmt":"2017-03-28T01:18:38","slug":"top-7-css-snippets-featuring-outer-space","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/top-7-css-snippets-featuring-outer-space\/","title":{"rendered":"Top 7 CSS Snippets Featuring Outer Space"},"content":{"rendered":"

Outer space is trending, especially after the recent discovery of a whole lot of\u00a0new planets<\/a>. If you want to keep your designs and projects on trend, maybe consider including some of these awesome space-themed CSS snippets in your sites.<\/p>\n

1. Pure CSS Planet<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

If you’ve ever wanted to create something as cool as a planet using only CSS, this snippet will show you how to do it. The code in this tutorial creates a beautiful image of the planet Saturn, which belongs to our solar system.<\/p>\n

2. Traveling Through Space<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This snippet uses HTML5 Canvas and JavaScript to create the illusion that you’re flying through space, passing hundreds of thousands of stars at unbelievably high speeds.<\/p>\n

3. Alien Invasion<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This CSS snippet includes both a UFO and a human being abducted by aliens. Definitely a fun bit of code to add to a space or alien themed project.<\/p>\n

4. Planets with Points<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

Another space-themed snipped that uses HTML5 canvas, this snippet creates the illusion of planets with strategically placed dots, that give the planets the appearance of objects that are bathed in sun on one side, and cast into darkness on the other.<\/p>\n

5. Squishy Alien<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This animated, pure CSS interpretation of what an alien might look like is as cute as can be.<\/p>\n

6. Space Ship Fun<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

This snippet features a space ship flying through the galaxy. The spaceship responds to movement from your cursor, so have fun moving it all around the viewport!<\/p>\n

7. Solar System<\/a><\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

The minimalist-inspired planets (and the sun) are a beautiful and realistic representation of the planets in our solar system, from order to size to colors, everything is more or less accurate (except the fact that it includes Pluto, which isn’t technically a planet, but still gets a place in the lineup). Remove the animations to really emphasize the minimalist vibe of this cool design.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

Outer space is trending, especially after the recent discovery of a whole lot of\u00a0new planets. If you want to keep your designs and projects on trend, maybe consider including some of these awesome space-themed CSS snippets in your sites.<\/p>\n

1. Pure […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[171,174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3052"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3052"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3052\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2864"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}