< Back to Frontend Friday Folks Index

Eclipse

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (245 characters)
1 
<style>
2 
  body {
3 
    --b:radial-gradient(1q,#998235 200px,#0000 0) 0 150px / 100% 400px;
4 
    background:
5 
      var(--b) no-repeat,
6 
      radial-gradient(1q,#1A4341 100px,#F3AC3C 0 125px,#0000 0),
7 
      var(--b),
8 
      #F3AC3C
9 
    ;
10 
  }
11 
</style>
12

We started late, but we saw a couple of people joining later and learning about our CSS tricks. Micha, who streamed solving CSS battles on Twitch before, joined us this time. Find our solutions on the VC discussion board as well!

For the solution, I've exploited the background pattern to have the same radial gradient twice, since both "golden" half circles match and touch each other (below the teal one). This allowed the use of a variable (--b) with and without background repeat.

Oh, and Meg taught me that instead of writing radial-gradient(circle, ...), I can write radial-gradient(1q, ...)! This could shave off quite a few characters... 😅

< Back to Frontend Friday Folks Index