CSS Battles #51 – Wear a Mask

[meg-gutshall]

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!

[danieltott]

First pass (unminified) – 602.2 {546}

<p h>
<p c>
<p d>
<p b>
<style>
  *{
    background: #293462;
  }
  body {
    margin: 100 65;
    position: relative;
  }
  p {
    margin: 0;
    position: absolute;
  }
  [h] {
    border: 10px solid #FFF1C1;
    inset: 0 0 40px;
    border-radius: 1in;
  }
  [c] {
    background: #FFF1C1;
    inset: 0 60px;
    border-radius: 0 0 50px 50px;
  }
  [d],[b] {
    border-radius: 1in;
    background: #FE5F55;
  }
  [d] {
    inset: 40px 80px 20px 150px;
  }
  [b] {
    inset: 20px 150px 70px 80px;
    box-shadow: 0 20px #FE5F55;
  }
</style>

Minified! – 611.65 {371}

<p h><p c><p d><p b><style>*{background:#293462}body{margin:100 65;position:relative}p{margin:0;position:absolute}[h]{border:10px solid#FFF1C1;inset:0 0 40px;border-radius:1in}[c]{background:#FFF1C1;inset:0 60px;border-radius:0 0 50px 50px}[d],[b]{border-radius:1in;background:#FE5F55}[d]{inset:40px 80px 20px 150px}[b]{inset:20px 150px 70px 80px;box-shadow:0 20px#FE5F55

[meg-gutshall]

The Soupdogmask brought to you by @piotrszymaniec, titled by @curiosdevcookie

[danieltott]

Cut out 19 chars! – 613.96 {352}

<p h><p c><p d><p b><style>*{background:#293462}body{margin:100 65;position:relative}p{margin:0;position:absolute;border-radius:1in}[h]{border:10px solid#FFF1C1;inset:0 0 40px}[c]{background:#FFF1C1;inset:0 60px;border-radius:0 0 53q 53q}[d],[b]{background:#FE5F55;width:40;top:40;left:150;height:40}[b]{top:20;left:80;height:10;box-shadow:0 5vw#FE5F55

[meg-gutshall]

Nesting and positioning – 600.47 {708}

<div id=loops></div>
<div id=mask>
  <div id=vent1></div>
  <div id=vent2></div>
  <div id=circle></div>
</div>
<style>
  body {
    background: #293462;
    position: relative;
    margin: 100 65;
  }
  div {
    position: absolute;
    background: #FE5F55;
    border-radius: 50px;
    width: 40px;
    height: 10px;
  }
  #loops {
    width: 250px;
    height: 40px;
    border: 10px solid #FFF1C1;
    background: #293462;
  }
  #mask {
    background: #FFF1C1;
    width: 150px;
    height: 100px;
    left: 60;
    border-radius: 0 0 50px 50px;
  }
  #vent1 {
    top: 20;
    left: 20;
  }
  #vent2 {
    top: 40;
    left: 20;
  }
  #circle {
    height: 40px;
    top: 40;
    left: 90;
  }
</style>

After golfing it – 610.9 {378}

<i l></i><i m><i v1></i><i v2></i><i c><style>body{background:#293462;margin:100 65}i{position:absolute;background:#FE5F55;border-radius:1in;width:40;height:10}[l]{width:250;height:40;border:10px solid #FFF1C1;background:#293462}[m]{background:#FFF1C1;width:150;height:100;left:125;border-radius:0 0 50px 50px}[v1]{top:20;left:20}[v2]{top:40;left:20}[c]{height:40;top:40;left:90
</style>