DEV Community

Cover image for CSS Battle #1 - Simply Square
Olzhas Askar
Olzhas Askar

Posted on • Updated on

CSS Battle #1 - Simply Square

I am one of those people, who like to think that knowing only HTML and CSS is not enough. I know, it is unfair and I don’t even need to prove anything to myself. CSS is extremely difficult. At least, for me. So, I decided to try to get my hands dirty with it. Luckily, there is a nice interactive website with CSS challenges. And who doesn’t like challenges?

You are supposed to recreate the stylesheet only given an image. You get a percent approximation of how much your output matches and extra points if you achieve it with as few characters as possible.

Simply Square

After seeing the shortest solution to the first problem, I decided not bothering myself with the high score and to concentrate on the learning part instead. If you wonder why, well here is that solution:



<img style=box-shadow:0+0+0+2in#b5e0ba,0+0+0+5in#5d3a3a>


Enter fullscreen mode Exit fullscreen mode

Because the score requires the solution to be correct in the first and be short in the second, I’d prefer to concentrate on correctness. And since CSS is very powerful in providing with alternatives, I’ll try to come up with different answers to the same questions.

1. Absolute Values

The first one is pretty straightforward. We create a square division of 200 by 200 pixels and give it a background color. Since the normal document flow is from top to bottom and left to right the square should be at the top left corner of the screen. Except that it isn’t. We’d need to remove the browser default margin.
Removing browser defaults is called normalizing and there is a splendid library which does exactly that (there is a library for everything). I recommend to read through the source code – it is short and has descriptive comments. Since we are only concerned about the margin, we will set it to zero in for the body tag, which also gets a background color.



<div></div>
<style>
  body {
    margin: 0;
    background: #5d3a3a;
  }

  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }
</style>


Enter fullscreen mode Exit fullscreen mode

2. Relative Values

In order not to bind ourselves to hardcoded values, we can replace width with calc(100vw / 2) and height with calc(100vh * 2 / 3).



<div></div>
<style>
  body {
    margin: 0;
    background: #5d3a3a;
  }

  div {
    width: calc(100vw / 2);
    height: calc(100vh * 2 / 3);
    background: #b5e0ba;
  }
</style>


Enter fullscreen mode Exit fullscreen mode

calc() allows us to mix different units within the same computation. Or because the width is obvious, you can write it directly as 50vw. 66vh for height will not be accepted as the correct answer. 66.6vh however will be.

3. Border

So far the solutions were following pretty much the same logic, differing only in the size computation. Here is another approach. What if we could have placed the same square, but this time instead of coloring body background, we’d create a border instead?



<div></div>
<style>
  div {
    margin: -8px;
    width: 200px;
    height: 200px;
    background: #b5e0ba;
    border-right: 200px solid #5d3a3a;
    border-bottom: 200px solid #5d3a3a;
  }
</style>


Enter fullscreen mode Exit fullscreen mode

Setting margin here to a negative value is done only to remove the impact of the default margin and avoid styling two tags.

4. Box Shadow

The last one is inspired by the shortest solution. Apparently, it is possible to duplicate existing objects to create shadows. box-shadow, as it is called, is used to create a staple effect. There is even a generator for that! The first two values are X and Y offsets, which can be negative. The third one is a blur radius. And the last before the color is spread radius, which is responsible for scale, which in our case I arbitrarily set to a big enough value to cover up the whole 400 x 300 screen.



<div></div>
<style>
  div {
    margin: -8px;
    width: 50vw;
    height: 66.6vh;
    background: #b5e0ba;
    box-shadow: 0 0 0 200px #5d3a3a;
  }
</style>


Enter fullscreen mode Exit fullscreen mode

Which one of these solutions would you prefer? Do you know any others?

Top comments (16)

Collapse
 
aklevansky profile image
Anton Klevansky

Clever trick with box shadows. I tried to make shorten the code with linear gradients:
body{background:linear-gradient(90deg,rgba(0,0,0,0) 50%,rgb(93,58,58)0),linear-gradient(rgb(181,224,186)200px, rgb(93,58,58)0)}</p>

Collapse
 
lance2k profile image
lance2k

CSS is extremely difficult. At least, for me. So, I decided to try to get my hands dirty with it. Luckily, there is a nice interactive website with CSS challenges. And who doesn’t like challenges?
Because the score requires the solution to be correct in the first and be short in the second, I’d prefer to concentrate on correctness.

Lol it's 2023 and I'm currently in the same boat (I just recently started my web dev journey). I like your post and will be following you and this series : )

Collapse
 
christophwessels profile image
Christoph Weßels • Edited

Better solution with 54 Characters:

Collapse
 
caseyeee profile image
Casey Echternacht

This is a great series; thanks for putting it together

Collapse
 
tomek24 profile image
tOmek24 • Edited

My first solution is 80 Characters:
body bgcolor=#5d3a3a><div style="width:0;margin:-8;border:100px solid #b5e0ba"

when using img instead of div you can do without the "width" attribute.
72 Characters solution.

body bgcolor=#5d3a3a><img style="margin:-8;border:100px solid #b5e0ba"

Collapse
 
systemx profile image
Mohammed Fellak

Can anyone look into PILOT BATTLE?
my solution is 249 characters

body {background:#E3516E;display:flex;place-items:center;justify-content:center;}div {padding: 100px;border-radius: 50%;background: conic-gradient(#FADE8B 90deg,#E3516E 90deg 180deg,#F7F3D7 180deg 270deg,#51B5A9 270deg 360deg);}

But i've found some one who did it in way less then that, any idea how?

Collapse
 
lakshayasood profile image
Lakshaya Sood

great solutions. Are there any other sites where I can test my css skills.

Collapse
 
verheyenkoen profile image
Koen Verheyen

Switch the <img> out for an <a>-tag and you pitch off 2 chars.

Collapse
 
tuxhedoh profile image
Tuxhedoh

Thanks for sharing these. My initial answer was the first one. But I worked through the other answers just to see how they work.

Collapse
 
pheeria profile image
Olzhas Askar

Cool!
The more difficult the tasks get, the fewer variations I have. But I still try to find at least the second one.

Collapse
 
sagarrth profile image
Sagar Rout

When i started with the 1st challenge, my instinct was solution 2. After going through the other variations, it really opened my eyes. I got to improve a lot.
Appreciate your article a lot

Collapse
 
pheeria profile image
Olzhas Askar

Thanks! Check out the other challenges as well!