CSS Battles #52 – Break the Chain

[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]

box-shadow shenanigans!

Pre-minification Code Source – 603.51 {497}

<p l>
<p t>
<style>
  *{background:#6592CF;position:fixed;color:#243D83;
   --s:45px 0,
      90px 0,
      165px 0,
      210px 0,
      255px 0,
      300px 0;
   }
  p{background: #243D83;}
  [l]{
    width:20;
    height:20;
    top:114;
    left:40;
    border-radius:1in;
    box-shadow:
      var(--s),
      0 0 0 10px #EEB850,
      90px 0 0 10px #EEB850,
      45px -10px 0 20px #EEB850
    ;
  }
  [t] {
    width:10;
    height:54;
    top:120;
    left:45;
    box-shadow:var(--s)
  }

[danieltott]

Did some optimizations and minification!

Minified Code Source – 624.5 {293}

<p y><p l><p t><style>*{background:#6592CF;position:fixed;color:#243D83}p{box-shadow:inset 0 0 0 1in,45px 0,90px 0,55vh 0,70vh 0,85vh 0,75vw 0}[l],[y]{inset:38vh 9cm 142q 5ch;border-radius:1in}[t]{inset:30vw 365q 94px 45px}[y]{color:#EEB850;box-shadow:0 0 0 10px,90px 0 0 10px,45px -10px 0 5vw

[danieltott]

Unminified Code Source for that one!

<p y><p l><p t><style>
* {
  background: #6592cf;
  position: fixed;
  color: #243d83;
}
p {
  box-shadow: inset 0 0 0 1in, 45px 0, 90px 0, 55vh 0, 70vh 0, 85vh 0, 75vw 0;
}
[l],
[y] {
  inset: 38vh 9cm 142Q 5ch;
  border-radius: 1in;
}
[t] {
  inset: 30vw 365Q 94px 45px;
}
[y] {
  color: #eeb850;
  box-shadow: 0 0 0 10px, 90px 0 0 10px, 45px -10px 0 5vw;
}