Planet Awesome

Developer
Bryan Jones
Size
3,554 Kb
Views
48,576
  1. Planet Awesome Previews
  2. Planet Awesome HTML Codes
  3. Planet Awesome CSS Codes

How do I make an planet awesome?

Messing around with shading and rotations to make a realistic (kind of) planet.. What is a planet awesome? How do you make a planet awesome? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.

Planet Awesome Previews
IQ Test

Planet Awesome - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Planet Awesome</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ring ring-1"></div>
<div id="globe"> <div class="crater crater-1"></div> <div class="crater crater-2"></div> <div class="crater crater-3"></div> <div class="crater crater-4"></div> <div class="crater crater-5"></div> <div class="crater crater-6"></div> <div class="crater crater-7"></div>
</div>
<div class="ring ring-2"></div>
</body>
</html>

Planet Awesome - Script Codes CSS Codes

html { background: url(http://www.bryanjones.us/sites/default/files/stars.png) repeat scroll left top #000; height: 100%; width: 100%;
}
#globe { background-color: #053; height: 300px; left: calc(50% - 150px); position: absolute; top: calc(50% - 150px); width: 300px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF00AA55', endColorstr='#FF001100'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjYwcHgiIGN5PSIiIHI9IjgwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWE1NSIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjMDAxMTAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -moz-radial-gradient(60px, circle cover, #00aa55 0%, #001100 80%); background-image: -webkit-radial-gradient(60px, circle cover, #00aa55 0%, #001100 80%); background-image: radial-gradient(circle cover at 60px, #00aa55 0%, #001100 80%);
}
.crater { height: 30px; position: absolute; width: 30px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.crater-1 { background-color: #042; left: 160px; top: 43%; -moz-box-shadow: inset 2px 0 5px 0 #010, -2px 0 0 1px #083, inset -2px 0 3px 0 #083, 2px 0 1px 0 #010; -webkit-box-shadow: inset 2px 0 5px 0 #010, -2px 0 0 1px #083, inset -2px 0 3px 0 #083, 2px 0 1px 0 #010; box-shadow: inset 2px 0 5px 0 #010, -2px 0 0 1px #083, inset -2px 0 3px 0 #083, 2px 0 1px 0 #010;
}
.crater-2 { background-color: #010; left: 200px; top: 20px; -moz-transform: rotateX(65deg) rotateY(25deg); -ms-transform: rotateX(65deg) rotateY(25deg); -webkit-transform: rotateX(65deg) rotateY(25deg); transform: rotateX(65deg) rotateY(25deg); -moz-box-shadow: inset 2px 2px 6px 2px #010, -2px 2px 0 1px #042, inset -2px 2px 2px 0 #053, 2px 0 1px 0 #010; -webkit-box-shadow: inset 2px 2px 6px 2px #010, -2px 2px 0 1px #042, inset -2px 2px 2px 0 #053, 2px 0 1px 0 #010; box-shadow: inset 2px 2px 6px 2px #010, -2px 2px 0 1px #042, inset -2px 2px 2px 0 #053, 2px 0 1px 0 #010;
}
.crater-3 { background-color: #063; left: 40px; top: 80px; -moz-transform: rotateX(-35deg) rotateY(40deg); -ms-transform: rotateX(-35deg) rotateY(40deg); -webkit-transform: rotateX(-35deg) rotateY(40deg); transform: rotateX(-35deg) rotateY(40deg); -moz-box-shadow: inset 2px 0 5px 0 #030, -2px 0 0 1px #0a2, inset -2px 0 2px 0 #0a2, 2px 0 3px 0 #030; -webkit-box-shadow: inset 2px 0 5px 0 #030, -2px 0 0 1px #0a2, inset -2px 0 2px 0 #0a2, 2px 0 3px 0 #030; box-shadow: inset 2px 0 5px 0 #030, -2px 0 0 1px #0a2, inset -2px 0 2px 0 #0a2, 2px 0 3px 0 #030;
}
.crater-4 { background-color: #010; left: 230px; top: 230px; -moz-transform: rotateX(-55deg) rotateY(40deg); -ms-transform: rotateX(-55deg) rotateY(40deg); -webkit-transform: rotateX(-55deg) rotateY(40deg); transform: rotateX(-55deg) rotateY(40deg); -moz-box-shadow: inset 2px 0 5px 0 #010, -2px 0 0 1px #031, inset -2px 0 3px 0 #021, 2px 0 1px 0 #010; -webkit-box-shadow: inset 2px 0 5px 0 #010, -2px 0 0 1px #031, inset -2px 0 3px 0 #021, 2px 0 1px 0 #010; box-shadow: inset 2px 0 5px 0 #010, -2px 0 0 1px #031, inset -2px 0 3px 0 #021, 2px 0 1px 0 #010;
}
.crater-5 { background-color: #053; left: 95px; top: 210px; -moz-transform: rotateX(-25deg) rotateY(-30deg); -ms-transform: rotateX(-25deg) rotateY(-30deg); -webkit-transform: rotateX(-25deg) rotateY(-30deg); transform: rotateX(-25deg) rotateY(-30deg); -moz-box-shadow: inset 2px 0 6px 1px #020, -2px 0 0 1px #083, inset -2px 0 3px 0 #083, 2px 0 5px 1px #020; -webkit-box-shadow: inset 2px 0 6px 1px #020, -2px 0 0 1px #083, inset -2px 0 3px 0 #083, 2px 0 5px 1px #020; box-shadow: inset 2px 0 6px 1px #020, -2px 0 0 1px #083, inset -2px 0 3px 0 #083, 2px 0 5px 1px #020;
}
.crater-6 { background-color: #053; left: 45px; top: 230px; -moz-transform: rotateX(-55deg) rotateY(-40deg); -ms-transform: rotateX(-55deg) rotateY(-40deg); -webkit-transform: rotateX(-55deg) rotateY(-40deg); transform: rotateX(-55deg) rotateY(-40deg); -moz-box-shadow: inset 1px 1px 2px 0 #010, -1px -1px 0 1px #083, inset -1px -1px 3px 0 #083, 1px 1px 1px 0 #010; -webkit-box-shadow: inset 1px 1px 2px 0 #010, -1px -1px 0 1px #083, inset -1px -1px 3px 0 #083, 1px 1px 1px 0 #010; box-shadow: inset 1px 1px 2px 0 #010, -1px -1px 0 1px #083, inset -1px -1px 3px 0 #083, 1px 1px 1px 0 #010;
}
.crater-7 { background-color: #000700; left: 255px; top: 130px; -moz-transform: rotateX(0deg) rotateY(-45deg); -ms-transform: rotateX(0deg) rotateY(-45deg); -webkit-transform: rotateX(0deg) rotateY(-45deg); transform: rotateX(0deg) rotateY(-45deg); -moz-box-shadow: inset 2px 0 5px 0 #000, -2px 0 0 1px #031, inset -2px 0 3px 0 #021, 2px 0 1px 0 #000; -webkit-box-shadow: inset 2px 0 5px 0 #000, -2px 0 0 1px #031, inset -2px 0 3px 0 #021, 2px 0 1px 0 #000; box-shadow: inset 2px 0 5px 0 #000, -2px 0 0 1px #031, inset -2px 0 3px 0 #021, 2px 0 1px 0 #000;
}
.ring-1 { border-bottom: 1px solid #fff; border-top: 10px solid #fff; height: 275px; left: calc(50% - 287px); position: absolute; top: calc(50% - 137px); width: 575px; z-index: -10; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transform: rotateX(65deg) rotateY(45deg); -ms-transform: rotateX(65deg) rotateY(45deg); -webkit-transform: rotateX(65deg) rotateY(45deg); transform: rotateX(65deg) rotateY(45deg);
}
.ring-2 { border-left: 1px solid #fff; border-bottom: 15px solid #fff; height: 275px; left: calc(50% - 287px); position: absolute; top: calc(50% - 137px); width: 575px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transform: rotateX(65deg) rotateY(45deg); -ms-transform: rotateX(65deg) rotateY(45deg); -webkit-transform: rotateX(65deg) rotateY(45deg); transform: rotateX(65deg) rotateY(45deg);
}
Planet Awesome - Script Codes
Planet Awesome - Script Codes
Home Page Home
Developer Bryan Jones
Username bartuc
Uploaded July 13, 2022
Rating 3.5
Size 3,554 Kb
Views 48,576
Do you need developer help for Planet Awesome?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryan Jones (bartuc) Script Codes
Name
Lens Flare
Solar System Maker
Shine Effect
Lightbulb
Gravity
Books
Potion
Card Flip
Planets
Solar System
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!