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.
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>
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>
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>
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>
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>
Which one of these solutions would you prefer? Do you know any others?
Top comments (16)
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>
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 : )
Better solution with 54 Characters:
This is a great series; thanks for putting it together
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"
Can anyone look into PILOT BATTLE?
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);}my solution is 249 characters
But i've found some one who did it in way less then that, any idea how?
great solutions. Are there any other sites where I can test my css skills.
Switch the
<img>out for an<a>-tag and you pitch off 2 chars.Thanks for sharing these. My initial answer was the first one. But I worked through the other answers just to see how they work.
Cool!
The more difficult the tasks get, the fewer variations I have. But I still try to find at least the second one.
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
Thanks! Check out the other challenges as well!