DEV Community

loading...
Cover image for CSS Battle #12 - Wiggly Moustache

CSS Battle #12 - Wiggly Moustache

pheeria profile image Olzhas Askar ・3 min read

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 to the 100% point. The main idea here is using pseudo classes to make rounded ends.

<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>
Enter fullscreen mode Exit fullscreen mode

2. Borders

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

border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
Enter fullscreen mode Exit fullscreen mode

This becomes a single value.

border-radius: 0 0 50px 50px;
Enter fullscreen mode Exit fullscreen mode

3. Positioning

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

<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>
Enter fullscreen mode Exit fullscreen mode

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 usually only scratches the surface, I decided to contribute myself.
When it comes to the competitive part of it, you can ask others, lint your code and minify it. But I'd rather recommend to watch a positioning tutorial. And of course, never forget - less is more.

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?

Discussion (1)

pic
Editor guide
Collapse
dpaine20 profile image
David Paine20

I love the line that you said, "The whole point was to learn together"
The battles show your hard work. Best of luck with your future work.
I think, you must check that link url-decode.com/cat/ that link has several tools, that might help you.
Regards