Yes, I created a realistic moon using just CSS.
Let's dive right into the step by step process.
Add a div element into your HTML file and give a class name.
<div class="animated-moon"></div>
Now let's start the craft using CSS:
Start out by giving a basic shape to the element.
width: 20rem;
height: 20rem;
position: absolute;
border-radius: 50%;
Here's an image from Solar System Scope with a moon texture :
https://www.solarsystemscope.com/textures/download/2k_moon.jpg
Add this as background image for your element and give a background size a little extra for the X axis rotation to be possible.
background-image: url('https://www.solarsystemscope.com/textures/download/2k_moon.jpg')
background-size: 110% 100%;
The moment has come to craft an animation that spins and dazzles.
@keyframes moonRotation {
0% { background-position: 0% 0%; }
50% { background-position: 150% 0%; }
100% { background-position: 300% 0%; }
}
Add this code to your .animated-moon
class.
animation-name: moonRotation;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;
Now, your moon would look something like this
Now, all your gotta do is unleash the superstar potential of the box-shadow property to create a stellar 3D effect for the moon.
box-shadow: inset -10px 8px 6px -5px #ffffff, // Shine of light hitting on the moon (top right )
inset 20px -20px 50px 43px rgba(0, 0, 0, 0.9), // Shadow regions on moon
7px -6px 14px rgba(255, 255, 255, 0.3215686275); // Glow outside the moon for light reflection
Here's a codepen link to play around : https://codepen.io/Sridhar-Murali/pen/yLGmNbb?editors=1100
Thanks for your time
Sridhar
Top comments (10)
This looks much more convincing than I thought it would be!
Ditto
Thank you so much 🙂
What does the
{% embed %}
mean in the declaration of the @keyframes ?I have never seen it in common syntax of the rule.
It was added by mistake. Thanks for pointing out. Updated 👍
Looks pretty good to me! Great job!
Thank you so much 🙂
Wow that is incredible!
Thank you so much 🙂
Thank you for sharing