DEV Community

Cover image for CSS Battle Two-Toned Circle
Chris Jarvis
Chris Jarvis

Posted on

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.

two windows on an app. One has an orange square on a white background. The other has a two toned circle on a brown background.

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>
Enter fullscreen mode Exit fullscreen mode
  body{
    background: #926927;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  cir {
    width: 200;
    height: 200;
    background: #F8B140;
    border-radius: 50%;
  }
Enter fullscreen mode Exit fullscreen mode

Two windows on an app. One has an light yellow circle on a brown background. The other has a two toned yellow and white circle on a brown background.

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);
  }
Enter fullscreen mode Exit fullscreen mode

Two windows on an app. One has an yellow and white circle  on a brown background. The yellow and white are mixed together The other window has a two toned circle on a brown background.But the colors have sharp divide between them.

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);
  }
Enter fullscreen mode Exit fullscreen mode

Two windows on an app. One has an yellow and white circle  on a brown background. The yellow and white are mixed together The other window has a two toned circle on a brown background. But the colors have sharp divide between them.

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%);
  }
Enter fullscreen mode Exit fullscreen mode

Two windows on an app. Both windows have a two toned circle on a brown background. The colors have sharp divide between them.

Summary

This was another fun challenge. There are different ways to solve these. I was happy to do it with just one tag.

Top comments (3)

Collapse
 
adam_cyclones profile image
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.

Collapse
 
jarvisscript profile image
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,

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀 • Edited

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

You need for example:

<div class=“cir” 
Enter fullscreen mode Exit fullscreen mode

Then target that in css with:

.cir{}
Enter fullscreen mode Exit fullscreen mode

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

Anyway keep up the challenges