DEV Community

Cover image for CSS Eclipse
Chris Jarvis
Chris Jarvis

Posted on

4 2 1 2 1

CSS Eclipse

So you know how people forget holidays are coming. I realized Monday that it was eclipse day. Thought I could do make it with CSS.

Template saves time

I took the template that I use for other CSS projects and filled the center with the Sun. The sun is a circle with a drop shadow.
The sky is the subject div.

Illustration of yellow sun in the sky

<div class="flex-container">
<div class="main">
<div class="outer_frame">
    <div class="subject">
      <div class="sun"></div>
  </div>    
</div>
</div>
</div>

Enter fullscreen mode Exit fullscreen mode
.sun {
filter: drop-shadow(0 0 1.5rem white); 
  width: 300px;
  height: 300px;
  background: yellow;
  border-radius: 50%;
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

The Moon

The CSS Moon is gray circle of the same size.

.moon{
  width: 300px;
  height: 300px;
  background: gray;
  border-radius: 50%;
  z-index: 1;
  position: relative;
  margin-left: -1100px;
}
Enter fullscreen mode Exit fullscreen mode

The Moon Div had to go in an different div than the Sun so it could move on and off screen aka the sky.

<div class="outer_frame">
  <div class="moon"></div>
    <div class="subject">
      <div class="sun"></div>
  </div>
Enter fullscreen mode Exit fullscreen mode

The Outer frame needed to hide the moon till it came on screen so it got overflow: hidden.

.outer_frame {
  background-color: #4981b3;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

The final animation on the moon. I tried changing the moon from gray to black as it crossed the sky but I need finer control on the keyframes. And with an actual Eclipse going on, I went outside.

So here's my fast recreation of it.

.moon {
   animation: eclipse 18s linear;
 }

@keyframes eclipse {
   0% {
    transform: translate(0px, 0);
  }


  100% {
    transform: translate(1100px, 0);

  }
}

Enter fullscreen mode Exit fullscreen mode

the sun is blocked by the moon, the screen show a black circle in the sky.

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (1)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Wow, I missed this. Love it! 🌚

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay