Chris JarvisHere's a recent CSS Battle daily target. It's only live for 24 hours. After that you can't get a score on it, unless you have the PLUS Plan.
There's no leader board on Daily Targets. So I feel I can share an old daily target here.
Here's the starting set up. Goal is to build the target image on the right. They give you the colors and some boiler plate code.
Read more about how it works in this post.
Background and base color.
I copied the background color for the body, then used flex to center a circle. A circle is a square with a border radius.
<cir></cir>
body{
background: #926927;
display: flex;
justify-content: center;
align-items: center;
}
cir {
width: 200;
height: 200;
background: #F8B140;
border-radius: 50%;
}
Now in full color.
That gives a circle but it only has one color. How to add the second color?
Maybe layer another circle on top and make half of each transparent?
There's way to do it with just one circle element. Gradients!
cir {
background: linear-gradient(#F8B140, #FFEBCB);
}
Adding a second color to the background, gives a blend of the colors, not a sharp divide between them like the target image. Also the colors move from top to bottom. We need these to transition horizontally.
To The Right
Adding to right before the colors changes the direction of the blend from left to right instead of the default top to bottom.
cir {
background: linear-gradient(to right ,#F8B140, #FFEBCB);
}
Hard Stop
The color gradient is moving in the right direction but it's still blended. The target image has a distinct line where the colors meet.
This need a hard stop. I use percentages to have the yellow end 50% of the way across and the white to start there.
cir {
background: linear-gradient(to right ,#F8B140 50%, #FFEBCB 50%);
}
Summary
This was another fun challenge. There are different ways to solve these. I was happy to do it with just one tag.
