< Back to Frontend Friday Folks Index
< Back to Frontend Friday Folks Index
Eclipse
Highlighted solution (245 characters)
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
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... 😅