CSS Battle #28 – Cups & Balls

[aishwarya-mali]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source  – <strong>score {character count}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {character count}

your cssbattles code here!

[aishwarya-mali]

624.98 {291}

<p><p c o><p c><p o><p u o><p><p o><p u>
<style>
body{
background:#1A4341;
width:70%;
margin:auto;
position:relative;
top:80;
}
p {
display:inline-block;
width:50;
height:50;
background:#998235;
border-radius:50%;
margin:10;
}
[c]{
border-radius:50% 50% 0 0;
}
[u]{
border-radius:0 0 50% 50%;
}
[o]{
background:#F3AC3C

[meg-gutshall]

First Attempt – 601.57 {581}

<div class="ball dim"></div>
<div class="down"></div>
<div class="down dim"></div>
<div class="ball"></div>
<div class="up"></div>
<div class="ball dim"></div>
<div class="ball"></div>
<div class="up dim"></div>
<style>
  body {
    background: #1A4341;
    display: flex;
    flex-flow: wrap;
    align-content: center;
    gap: 20px;
    padding: 62px;
  }
  div {
    width: 50px;
    height: 50px;
    background: #F3AC3C;
  }
  .up { border-radius: 0 0 50% 50%; }
  .down { border-radius: 50% 50% 0 0; }
  .ball { border-radius: 50%; }
  .dim { background: #998235; }
</style>

Refactored – 609.36 {394}

<a d>
<a f>
<a f d>
<a>
<a u>
<a d>
<a>
<a u d>
<style>
  * {
    background: var(--b, #1A4341);
    border-radius: var(--r, 50%);
  }
  body {
    display: flex;
    flex-flow: wrap;
    align-content: center;
    gap: 20px;
    padding: 62;
  }
  a {
    width: 50;
    height: 50;
    --b: #F3AC3C;
  }
  [u] { --r: 0 0 50% 50%; }
  [f] { --r: 50% 50% 0 0; }
  [d] { --b: #998235; }
</style>

Refactored (Minified) – 631.7 {266}

<a d><a f><a f d><a><a u><a d><a><a u d><style>*{background:var(--b,#1A4341);border-radius:var(--r,50%)}body{display:flex;flex-flow:wrap;align-content:center;gap:20px;padding:62}a{width:50;height:50;--b:#F3AC3C}[u]{--r:0 0 50% 50%}[f]{--r:50% 50% 0 0}[d]{--b:#998235