DEV Community

Thaísa Vieira
Thaísa Vieira

Posted on

CSS Battles: 100% match at daily target (28/06/2024)

It has been a while since I've used some minutes from my side job to solve daily targets from CSSBattles, it's quite relaxing and fun drawing those different and colorful designs. Usually, I have less than thirty minutes to complete the challenge and today I got a 100% match.

Here's the source code:

<div class='container'>
  <div class=rectangle-1></div>
  <div class='rectangle-2'></div>
  <div class='rectangle-3'></div>
  <div class='rectangle-4'></div>
</div>
<style>
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  .container {
    width: 100%;
    height: 100%;
    background-color: #6592CF;
  }

.rectangle-1, .rectangle-2, .rectangle-3, .rectangle-4{
    background-color:#243D83;
    position: relative;
}

.rectangle-2,.rectangle-4{
    width:110px;
    height:150px;
}

.rectangle-1{
  width:280px;
  height:90px;
  left:60px;
}
  .rectangle-2{
    top:60px;
    left:60px;
  }
  .rectangle-3{
    width:60px;
    height:90px;
    bottom:30px;
    left:170px;
  }
  .rectangle-4{
    left:230px;
    bottom:180px;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

And that's the result I got:

My solution for CSSBattle daily target (28/06/2024)

Since I started looking for other users' solutions I've seen them using properties like box-shadow, as you can see in the video below:

It's important to note that while my solution got almost 800 characters, others who used box-shadow had 200 characters maximum, so my goal for the next week will be to learn how to use box-shadow for drawing shapes and improve my daily target performance.

The CSSBattle site is user-friendly and the code output has the advantage of showing the difference between what you are building and what you need/would like to achieve (target). Also, they provide the hex codes for the colors present in the project and the functionality to share the results on Twitter. Would you like to join?

Top comments (2)

Collapse
 
tpp profile image
Larry • Edited

Very Informative!
I didn't know CSSBattle, I'll give it a try !
Thank you for your post :)

Collapse
 
thaisavieira profile image
Thaísa Vieira

CSSBattle is a good website for understanding what every property does and feeling confident to build things on your own. I hope to see you in the next Frontend Challenge from DEV Community on the CSS Art category. Keep learning and sharing knowledge!