< Back to Frontend Friday Folks Index

Birdie

Highlighted solution (414 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    background: #1A4341;
5 
  }
6 
  div {
7 
    position: absolute;
8 
    border-radius: 50%;
9 
    width: 200px;
10 
    height: 200px;
11 
    inset: 50px 100px;
12 
    background:
13 
      radial-gradient(#0B2429 15px, transparent 0) -30px -30px,
14 
      conic-gradient(#F3AC3C 90deg, transparent 0),
15 
      radial-gradient(transparent 75px, #1A4341 0),
16 
      conic-gradient(transparent 180deg, #998235 0);
17 
  }
This is the first puzzle where I used multiple backgrounds with gradients. It's not optimized yet, but the idea is clear.
Highlighted solution (337 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    background: #1A4341;
5 
  }
6 
  div {
7 
    position: absolute;
8 
    border-radius: 50%;
9 
    inset: 50px 100px;
10 
    background:
11 
      radial-gradient(#0B2429 15px, transparent 0) -30px -30px,
12 
      conic-gradient(#F3AC3C 90deg, #1A4341 0 180deg,transparent 0),
13 
      radial-gradient(#998235 75px, #1A4341 0);
14 
  }
Here is an improved version by leveraging the fact that inset is already telling CSS how big the box is. width and height settings are therefore not necessary. The second improvement is how the gradients are applied: Instead of using four different, it can do it in three, using multiple color stops.
MDN has a great explanation for using multiple backgrounds.
< Back to Frontend Friday Folks Index