DEV Community

loading...
Cover image for CSS Battle #2 - Carrom

CSS Battle #2 - Carrom

pheeria profile image Olzhas Askar ・4 min read

It already happened to me during the first battle, but at least, I knew what was wrong.

Liquid error: internal

This mismatch, when your result looks quite, but not exactly the same, is frustrating. The first one was simple. I thought to myself, hey, I've heard about Responsive Design, I am a Software Engineer after all, I shall not use hardcoded values! But 66vh doesn't equal to 200px out of total 300. So, an engineer as I am, I just boldly typed 200px in and it worked. This time was different.

1. The Almost Correct One

In my previous company, we had a lot of full-stack developers, who preferred to avoid frontend tasks. Fullstack Backend Developers, as one of my colleagues stated. (In this particular case, since the backend was in C#, we couldn't them Backend Frontend Developers)

Scared of CSS

As I found out, while fighting through CSS battles, floats were originally intended to place images within the text. (Just the same way tables were intended to make tables) The better way is to inline-block elements. Or even better is to use Flexbox or Grid. So I decided, screw floats, I will push inline-blocked divisions with the margins where I want to.

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

<style>
  body {
    margin: 0;
    background: #62374e;
  }
  div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
    display: inline-block;
  }
  #a {
    margin-top: 50px;
    margin-left: 50px;
  }
  #b {
    margin-top: 50px;
    margin-left: 200px;
  }
  #c {
    margin-top: 100px;
    margin-left: 50px;
  }
  #d {
    margin-top: 100px;
    margin-left: 200px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

This is when I got a 98.7% score. Eventually, after solving the problem using another way, I learned that for inline-block elements the spaces in HTML matter. There are various ways to resolve this issue, most notably, setting font-size to zero on body element, which would lead to increased character count (sure, I'll not reach the high score with this approach anyway, but still), and just removing the spaces between the divisions. Place all four divs squeezed into one line and it would work like a charm.

2. Fixed Positions

After failing a couple of times trying the first method, I remembered that I am a respectable Software Engineer and decided to go quick and dirty all the way - giving each division a fixed position with exact top and left coordinates.

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

<style>
  body {
    margin: 0;
    background: #62374e;
  }
  div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
    position: fixed;
  }
  #a {
    top: 50px;
    left: 50px;
  }
  #b {
    top: 50px;
    left: 300px;
  }
  #c {
    top: 200px;
    left: 50px;
  }
  #d {
    top: 200px;
    left: 300px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

3. Borders

What if we didn't need the background color for body? What if we could create a massive border around each square? Sure thing! We don't even need ids, we can use even instead (pun intended). font-size is here for educational purposes only.

<div></div>
<div></div>
<div></div>
<div></div>

<style>
  body {
    margin: 0;
    font-size: 0;
  }
  div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
    border: 50px solid #62374e;
    display: inline-block;
  }
  div:nth-of-type(even){
    border-left: 150px solid #62374e;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

As you may have noticed, since our canvas is not a perfect square, I am adding an exception for every even div to have a larger on the left side, non-square border.

4. Pseudo Elements

Four divisions and we are only styling them based on even and odd? This sounds like duplication to me. Can we cut it in half? Yes, if we use pseudo elements. Let's say we have two regular divs having their shapes duplicated with ::after. We first style divs and their ::afters and then lay them out separately.

<div></div>
<div></div>

<style>
  body {
    background: #62374e;
  }
  div, div::after {
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
  div:nth-of-type(odd) {
    margin: 50px 42px;
  }
  div:nth-of-type(even) {
    margin: 100px 42px;
  }
  div::after {
    content: "";
    display: inline-block;
    margin-left: 250px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

By the ways, all of these 42px appear here and there because 42 is the answer to Life, the Universe and Everything 50px - 8px, the default margin. Also, you can safely replace the body tag with * if you are not setting margin or padding.

5. Box shadow

Is there something more elegant? What if we didn't need four divisions? Can't we try to replicate one three times? Do you remember paper staples? box-shadow? Actually, we can specify multiple shadows separated by commas. Here is how it looks like.

<div></div>

<style>
  body {
    background: #62374e;
  }
  div {
    margin: 50px 42px;
    width: 50px;
    height: 50px;
    background: #fdc57b;
    box-shadow: 250px 0 #fdc57b, 250px 150px #fdc57b, 0 150px #fdc57b;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Do you see what I see? Does anything bother you? #fdc57b. Four freaking times! Shouldn't there be something like box-shadow-color? Unfortunately, no. But! Box shadow defaults to color value. So here we go again.

<div></div>

<style>
  body {
    background: #62374e;
  }
  div {
    margin: 50px 42px;
    width: 50px;
    height: 50px;
    background: #fdc57b;
    color: #fdc57b;
    box-shadow: 250px 0, 250px 150px, 0 150px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Did I miss anything significant?

Discussion (9)

pic
Editor guide
Collapse
yashptel profile image
Yash Patel • Edited

best I can think of. 166 char.

<p><p><p><p> <style> body { display: grid; grid-template: "p p"; background: #62374e} p { margin: 42px 158px 58px 42px; width: 50px; height: 50px; background: #fdc57b
Enter fullscreen mode Exit fullscreen mode

or 147 char if space removed

<p><p><p><p><style>body{display:grid;grid-template:"p p";background:#62374e}p{margin:42px 158px 58px 42px;width:50px;height:50px;background:#fdc57b
Enter fullscreen mode Exit fullscreen mode
Collapse
bohemme profile image
Bohemme • Edited

Just a few less characters (143) and other approach, but I can't think of anything more to remove, but the best results are half that number. :O

<p><p b><p a><p a b><style>*{background:#62374e;padding:21}p{background:#fdc57b;width:8;height:8;position:fixed;top:34}[a]{top:184}[b]{right:50

Collapse
ankitecd profile image
Ankit Gupta

Tried same method as 1st one and got done in 129 chars
<i style=color:#fdc57b;box-shadow:.7in+.7in+0+.26in,3.3in+.7in+0+.26in,.7in+2.26in+0+.26in,3.3in+2.26in+0+.26in,0+0+0+5in#62374e>

Collapse
zebra66796773 profile image
Zebra • Edited

Tried Grid and got 100% correct answer.

Great post!

Love the CSS battle site as well!

I've been working lightly in html/css the last few years and this is the first time I've looked up the CSS Grid feature to get this puzzle done.

PS you have to remember to scrape all the white space and carriage returns before submitting your answer, because every extra character gets you a lower score.


Tried attaching the image to this post but it's not working, here's the link:
thepracticaldev.s3.amazonaws.com/i...

Here's the code itself:
All the code is in the style tags. You leave the four div's alone.

body {
margin:50;
display:grid;
grid-template-columns:auto auto;
grid-column-gap:200px;
grid-row-gap:100px;background:#62374e;
}

div {
width:50px;
height:50px;
background:#fdc57b;
}

Collapse
pheeria profile image
Olzhas Askar Author

This is really elegant!

Collapse
chetan11dev profile image
Chetan • Edited

How about enhanched version of @zebra with 100% match with css grid 264 char

<p></p>
<p></p>
<p></p>
<p></p>
<style>
    body {
    margin:34 50;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-column-gap:200px;
    grid-row-gap:68px;
    background:#62374e;
    }

    p {

     width:50px;
    height:50px;
    background:#fdc57b;
    }
</style>
Enter fullscreen mode Exit fullscreen mode
Collapse
vsnegovik profile image
Vladimir Kashutin • Edited

My 214 character solution

<style>html{background-size:250px 250px;background-image:linear-gradient(to right,#62374e 50px,transparent 0 100px,#62374e 100px),linear-gradient(to bottom,#62374e 50px,#fdc57b 0 100px,#62374e 0 200px,#fdc57b 50px)
Enter fullscreen mode Exit fullscreen mode
Collapse
chinchang profile image
Kushagra Gour • Edited

woah! I like your different solutions!! Thanks for sharing :) Looking forward to your next one.

Collapse
tomek24 profile image
tOmek24

This is my 140 character solution.

<body bgcolor=#62374e><img i><img><img i><img><style>img{border:25px solid #fdc57b;margin:42;float:right}img[i]{float:none;margin-bottom:58}