CSS Battle #12 - Wiggly Moustache
Tags: css, html, webdev, tutorial
Published: 2019-09-16 06:52:02

When it comes to CSS, I'm still back in the 00s. Have you seen Stack Overflow on the 1st of April? Or do you remember MySpace? Glitter and poisonous colors? Well, that is my level. I'd be even using `<blink></blink>` were I that old. So, when I discovered CSS Battle, I thought I should take it beyond the battle.
I should have fundamentally got better at CSS. Bootstrap based pages were published. New JS frameworks appeared.
But I didn't. Yet.

## 1. Initial Solution

This is how I've made [the last battle][1] to the 100% point. The main idea here is using pseudo classes to make rounded ends.

```css
<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<style>
  body{
    background: #F5D6B4;
    margin: 0;
    position: relative;
  }
  #l, #r, #c{
    width: 60px;
    height: 30px;
    border: 20px solid #D86F45;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  #l, #r{
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top: 0;
  }
  #l{
    margin: 0 0 0 -130px;
  }
  #r{
    margin: 0 0 0 30px;
  }
  #c{
    margin: -50px 0 0 -50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom: 0;
  }
  #l:before, #r:after{
    content: "";
    width: 20px;
    height: 10px;
    position: absolute;
    background: #D86F45;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    top: -10px;
  }
  #l:before{
    left: -20px;
  }
  #r:after{
    left: 60px;
  }
</style>
```

## 2. Borders

Let's unify all borders to be single `border-radius` with four values.

```css
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
```

This becomes a single value.

```css
border-radius: 0 0 50px 50px;
```

## 3. Positioning

We can position everyhing as fixed, remove `top` and `left` properties which had 50% and replace them with more precise margins.

```css
<div id="l"></div>
<div id="c"></div>
<div id="r"></div>
<style>
  *{
    background: #F5D6B4;
    position: fixed;
  }
  #l, #r, #c{
    width: 60px;
    height: 30px;
    border: 20px solid #D86F45;
  }
  #l, #r{
    border-radius: 0 0 50px 50px;
    border-top: 0;
  }
  #l{
    margin: 142px 0 0 62px;
  }
  #r{
    margin: 142px 0 0 222px;
  }
  #c{
    margin: 92px 0 0 142px;
    border-radius: 50px 50px 0 0;
    border-bottom: 0;
  }
  #l:before, #r:after{
    content: "";
    width: 20px;
    height: 10px;
    position: absolute;
    background: #D86F45;
   	border-radius: 20px 20px 0 0;
    top: -10px;
  }
  #l:before{
    left: -20px;
  }
  #r:after{
    left: 60px;
  }
</style>
```

At this point I can probably leave it for you. You know what to do. I hope you enjoyed as I did. I learned a ton of CSS, which I am using in daily work. The whole point was learn together. And since the [content I've found online][2] usually only scratches the surface, I decided to contribute myself.
When it comes to the competitive part of it, you can [ask others][3], [lint your code][4] and [minify][5] it. But I'd rather recommend to watch a [positioning tutorial][6]. And of course, never forget - [less is more][7].

And this is it.
Currently I am 72nd out 21780 people who played the game. I solved 37 out 44 battles. My handle is @pheeria.
See you later, I guess?

[1]: https://cssbattle.dev/play/12
[2]: https://www.sarthakbatra.com/blog/getting-started-with-css-battle
[3]: https://spectrum.chat/css-battle?tab=posts
[4]: https://stylelint.io/user-guide/rules/declaration-block-trailing-semicolon/
[5]: https://www.minifier.org/
[6]: https://www.youtube.com/playlist?list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh
[7]: http://www.folklore.org/StoryView.py?story=Negative_2000_Lines_Of_Code.txt