< Back to Frontend Friday Folks Index
< Back to Frontend Friday Folks Index
Birdie
Highlighted solution (414 characters)
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
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 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
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.