Learn how to create a stunning planetary system using only HTML and Pure CSS with our step-by-step tutorial. Impress your website visitors or use it for educational purposes.
Table of Contents
An amazing planetary system with CSS is a visual representation of a planetary system created using HTML and CSS. It is essentially a digital version of a planetary system that can be displayed in a web browser. The appearance and behavior of the celestial bodies in the system can be customized using various CSS properties and techniques, such as transformations, animations, gradients, and media queries.
A Pure CSS art. I played around with box shadows to see how I could work better with lights and shadows. This is what I'm building. I added darkness, reflections, etc to make it look more natural.
Watch full tutorial on my YouTube Channel: Watch Here.
Let's start making an amazing planetary system Using HTML and Pure CSS step by step.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our moon and satellite.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create box-shadow effect. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our moon and satellite an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
background: #101227;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.moon{
width: 30em;
height: 30em;
border-radius: 50%;
background: white;
box-shadow: 0 0 5em 0 rgb(254 216 76 / 50%), 0 0 20em 4em rgb(232 165 82 / 20%), 0 0 55em 8em rgb(255 77 77 /10%);
position: relative;
}
.satellite, .satellite::after{
content: "";
position: absolute;
width: 5em;
height: 5em;
border-radius: 50%;
}
.satellite{
background: #ffedd1;
box-shadow: -2em 0 5em -1em white;
overflow: hidden;
transition: 250ms;
left: 32em;
transform: rotate(20deg);
animation: round 5s infinite ease-in-out;
}
.satellite::after{
background: #262938;
width: 2.5em;
left: 2.5em;
box-shadow: 0 0 0.75em 0.95em #262938;
animation: shadow 5s infinite ease-in-out;
}
@keyframes shadow{
0%{
width: 2.5em;
left: 0;
}
25%{
width: 5em;
left: 0;
}
50%{
width: 2.5em;
left: 2.5em;
}
75%{
width: 0em;
left: 5em;
}
80%{
left: 0;
box-shadow: 0 0 0.55em 0.75em #262938;
}
100%{
width: 2.5em;
left: 0;
}
}
@media screen and (max-width: 1000px){
*{
font-size: 10px;
}
}
@media screen and (max-width: 500px){
*{
font-size: 5px;
}
}
@keyframes round {
0%, 100%{
top: 2em;
left: -15em;
box-shadow: -2em 0 5em 0.5em rgb(198 131 100 / 40%);
z-index: 2;
}
25%{
box-shadow: 0 0 3em 1em #412104b5;
}
75%{
box-shadow: 0 0 3em 1em black;
}
48%{
z-index: 2;
}
50%{
left: 40em;
top: 20em;
z-index: -1;
box-shadow: 2em 0 5em 0.5em rgb(132 90 70 / 51%);
}
99%{
z-index: -1;
}
} Final Output:
Conclusion:
In conclusion, this tutorial has provided step-by-step instructions on how to create an amazing planetary system using HTML and Pure CSS. By following the instructions, readers can build their own planetary system that is visually stunning and can be used for a variety of purposes, including websites, presentations, and educational materials. By using only HTML and Pure CSS, readers can have complete control over the design of their planetary system and create a unique and personalized experience for their audience. With the help of this tutorial, anyone can become a web design master and create impressive and engaging visual content.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
