CSS Battle Two-Toned Circle

Here'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.

CSS Battle: Test your Skills

Chris Jarvis ・ Jul 11 '23

#css #learning #frontend

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.

Comments

[Adam Crockett 🌀]

Hi Chris, Nice idea here.

Try not to make up html elements such as cir, there is a specification for a reason which if we see stuff like this in the wild, confuses new developers. In this case the humble div is the appropriate element.

Hard stop gradient is a good idea, another way to achieve it using a 1px background data image.

I don't know the background shorthand off by heart anymore so forgive me but it could be made shorter.

[Chris Jarvis]

Thanks. I was going to do two divs with classes of circle1 and circle2. Then realized I could do it in one element. I cut it down to jut cir but that is the same length as div,

[Adam Crockett 🌀]

Oh I see, how about creating classes but instead creating invalid html elements.

You need for example:

<div class=“cir” 

Then target that in css with:

.cir{}

In terms of length of typing 💬 making plain sense is far more important than convenience I always say.

Anyway keep up the challenges