CSS Battle #58 – Rose

[Narigo]

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!

[meg-gutshall]

My first try – 600.01 {1,157}

<div class="handle yellow"></div>
<div class="bulb yellow"></div>
<div class="outer blue"></div>
<div class="scoop blue"></div>
<div class="inner blue"></div>
<div class="dot blue"></div>
<style>
  * {
    background: var(--b, #191919);
  }
  body {
    margin-top: 45px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
  }
  div {
    position: relative;
  }
  .dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    outline: 10px solid #191919;
  }
  .inner {
    width: 100px;
    height: 30px;
    border-radius: 5px 5px 25px 25px;
    outline: 10px solid #191919;
    top: -10px;
  }
  .scoop {
    width: 140px;
    height: 30px;
    border-radius: 5px 5px 25px 25px;
    outline: 10px solid #191919;
    top: -20px;
  }
  .outer {
    width: 100px;
    height: 50px;
    border-radius: 0 0 90px 90px;
    top: -20px;
  }
  .bulb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: -40px;
  }
  .handle {
    width: 20px;
    height: 80px;
    border-radius: 0 0 10px 10px;
    top: -50px;
  }
  .blue { --b: #4F77FF; }
  .yellow { --b: #F9E492; }
</style>

Refactored – 600.2 {798}

<i h></i>
<i b></i>
<b o></b>
<b s></b>
<b i></b>
<b d></b>
<style>
  * {
    background: var(--b, #191919);
    border-radius: var(--br, 0);
    outline: var(--o, 10px solid #191919);
    position: relative;
  }
  body {
    margin: 45;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  b {
    width: 100;
    height: 30;
    top: -20;
    --b: #4F77FF;
    --br: 5px 5px 25px 25px;
  }
  i {
    --b: #F9E492;
    --o: 0;
  }
  [d] {
    width: 30;
    top: 0;
    --br: 50%;
  }
  [i] {
    top: -10;
  }
  [s] {
    width: 140;
  }
  [o] {
    height: 50;
    --br: 0 0 1in 1in;
    --o: 0;
  }
  [b] {
    width: 40;
    height: 40;
    top: -40;
    --br: 50%;
  }
  [h] {
    width: 20;
    height: 80;
    top: -50;
    --br: 0 0 10px 10px;
  }
</style>

Minified – 603.16 {508}

<i h></i><i b></i><b o></b><b s></b><b i></b><b d><style>*{background:var(--b,#191919);border-radius:var(--br,0);outline:var(--o,10px solid#191919);position:relative}body{margin:45;display:flex;flex-direction:column-reverse;align-items:center}b{width:100;height:30;top:-20;--b:#4F77FF;--br:5px 5px 25px 25px}i{--b:#F9E492;--o:0}[d]{width:30;top:0;--br:50%}[i]{top:-10}[s]{width:140}[o]{height:50;--br:0 0 1in 1in;--o:0}[b]{width:40;height:40;top:-40;--br:50%}[h]{width:20;height:80;top:-50;--br:0 0 10px 10px

[danieltott]

Used position:fixed and lots of css variables 😁

Minified Code Source – 605.76 {445}

<p f><p e><p d><p a><p b><p c><style>*{background:#191919;position:fixed}[a]{--w:140;--y:169}[b]{--y:189}[c]{--w:30;--y:209;--b:30px}[d]{--h:100;--y:119;--b:2in;outline:0}[e]{--w:40;--h:40;--b:2in;--y:99;--g:#F9E492;outline:0}[f]{--w:20;--h:90;--b:20px;--y:29;--g:#F9E492}p{background:var(--g,#4F77FF);outline:10px solid#191919;border-radius:var(--b,5px 5px 25px 25px);height:var(--h,30);width:var(--w,100);left:50%;translate:-50%;bottom:var(--y

Unminified Code Source

<p f></p>
<p e></p>
<p d></p>
<p a></p>
<p b></p>
<p c>
  <style>
    * {
      background: #191919;
      position: fixed;
    }
    [a] {
      --w: 140;
      --y: 169;
    }
    [b] {
      --y: 189;
    }
    [c] {
      --w: 30;
      --y: 209;
      --b: 30px;
    }
    [d] {
      --h: 100;
      --y: 119;
      --b: 2in;
      outline: 0;
    }
    [e] {
      --w: 40;
      --h: 40;
      --b: 2in;
      --y: 99;
      --g: #f9e492;
      outline: 0;
    }
    [f] {
      --w: 20;
      --h: 90;
      --b: 20px;
      --y: 29;
      --g: #f9e492;
    }
    p {
      background: var(--g, #4f77ff);
      outline: 10px solid#191919;
      border-radius: var(--b, 5px 5px 25px 25px);
      height: var(--h, 30);
      width: var(--w, 100);
      left: 50%;
      translate: -50%;
      bottom: var(--y);
    }
  </style>
</p>

[meg-gutshall]

[Narigo]

Code Source – 600.04 {960}

<div class="beige f"></div>
<div class="beige e"></div>
<div class="blue d"></div>
<div class="blue c"></div>
<div class="blue b"></div>
<div class="blue a"></div>
<style>
  body {
    background: #191919;
  }
  .blue {
    background: #4F77FF;
  }
  .beige {
    background: #F9E492;
    border: 0;
  }
  div {
    position: fixed;
    border: 10px solid #191919;
    border-radius: 50%;
    height: 30px;
    width: 30px;
  }
  .a {
    top: 35px;
    left: 175px
  }
  .b {
    border-radius: 15px 15px 35px 35px;
    top: 55px;
    left: 140px;
    width: 100px;
  }
  .c {
    border-radius: 15px 15px 35px 35px;
    top: 75px;
    left: 120px;
    width: 140px;
  }
  .d {
    border: 0;
    top: 65px;
    left: 150px;
    height: 100px;
    width: 100px;
  }
  .e {
    top: 145px;
    left: 180px;
    height: 40px;
    width: 40px;
  }
  .f {
    border-radius: 10px;
    top: 155px;
    left: 190px;
    height: 100px;
    width: 20px;
  }
</style>