<!DOCTYPE html>

Moon Phases | CSS Art: Space

<br>
body {<br>
font-family: sans-serif;<br>
margin: 0;<br>
padding: 0;<br>
background-color: #111;<br>
color: #eee;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code>h1, h2, h3 {
text-align: center;
margin-bottom: 1em;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 2em;
}

.moon-container {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
margin-bottom: 2em;
}

.moon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 10px #fff;
}

.dark-side {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #111;
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%
);
}

.phase-description {
text-align: center;
font-size: 1.2em;
}

.code-container {
background-color: #222;
padding: 1em;
border-radius: 5px;
margin-bottom: 2em;
}

.code {
font-family: monospace;
color: #eee;
overflow-x: auto;
}
</code></pre></div>
<p>

Moon Phases | CSS Art: Space

The moon, our celestial neighbor, goes through a captivating cycle of phases, a mesmerizing display of light and shadow. We can recreate these enchanting phases using CSS, harnessing the power of shapes, gradients, and animations to bring the cosmos to life on the web.

Understanding Moon Phases

The phases of the moon are caused by the changing positions of the sun, Earth, and moon. As the moon orbits Earth, different amounts of the sunlit side of the moon become visible from our vantage point. Let's delve into the key phases:

New Moon

Waxing Crescent

First Quarter

Waxing Gibbous

Full Moon

Waning Gibbous

Last Quarter

Waning Crescent

Creating Moon Phases with CSS

Let's embark on the journey of crafting these celestial phases using CSS. Our primary tools will be:

Clip-Path:

This property allows us to define the visible area of an element using a shape. Think of it as a cookie cutter for our moon.
Background-Color:

We'll use this to create the contrasting light and dark portions of the moon.

Step 1: The Moon's Structure

First, we create a simple circular div to represent the moon:




        <div class="moon-container">


          <div class="moon"></div>


          <div class="dark-side"></div>


        </div>

The

moon-container

will serve as the overall container for our moon, while

moon

is the white, illuminated part of the moon. The

dark-side

will be the dark, non-illuminated part.

Step 2: Defining the Shape

We use

clip-path

to define the visible portion of the moon, creating the crescent, quarter, gibbous, and full moon shapes.

For instance, to create the first quarter phase:




        .moon {


          clip-path: polygon(


            50% 0%,


            100% 50%,


            50% 100%


          );


        }

This defines a shape with three points, resulting in a right-angled triangle, which represents the first quarter phase.

Step 3: The Dark Side

The

dark-side

element is positioned behind the

moon

and has a

background-color

of black. Its

clip-path

is set to create a shape that corresponds to the dark portion of the moon.




        .dark-side {


          clip-path: polygon(


            50% 0%,


            100% 50%,


            50% 100%,


            0% 50%


          );


        }

Creating a Moon Phase Animation

We can create a mesmerizing animation of the moon phases by dynamically changing the

clip-path

of the

moon

element using CSS transitions and keyframes.




        .moon {


          transition: clip-path 2s ease-in-out;


          animation: moon-phases 10s linear infinite;


        }

    @keyframes moon-phases {
      0% {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
      25% {
        clip-path: polygon(50% 0%, 100% 50%, 75% 100%, 25% 100%);
      }
      50% {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%);
      }
      75% {
        clip-path: polygon(50% 0%, 100% 50%, 25% 100%, 75% 100%);
      }
      100% {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      }
    }
  </pre>

This code defines an animation named

moon-phases

with keyframes for each phase of the moon, creating a smooth transition between phases. The

transition

property on the

moon

element ensures a smooth animation as the

clip-path

changes.

Conclusion

We have successfully journeyed through the fascinating world of moon phases, understanding the science behind them and learning how to bring them to life with CSS. From simple static displays to captivating animations, CSS offers a powerful toolkit for creating compelling and informative visualizations of celestial events. Explore, experiment, and let your creativity illuminate the digital canvas with the wonders of the cosmos!