DEV Community

Prakhar Tandon
Prakhar Tandon

Posted on

CSSBattle Target#2

Hey everyone,
This article is over the Target#2 on CSSBattle

The Target2 of CSSBattle

The first approach I could come up with uses linear gradient to produce the required result.

<style>
  *{background:#62374e}
body{margin:50;
background:linear-gradient(
  to right,
  #fdc57b00 50px,#62374e 50px,
  #62374e 250px,#fdc57b00 250px),
linear-gradient(
  to bottom,
  #fdc57b 50px,#62374e 50px,
  #62374e 150px,#fdc57b 150px)
Enter fullscreen mode Exit fullscreen mode

This condenses down to 220 characters after removing white spaces.
If you want to learn more about linear gradients, you can refer to MDN over here.

The next approach is stated below

<p></p>
<p id="a">
</p><p style="right:0">
</p><p style="bottom:0"></p>
<style> 
*{margin:0;background:#62374e}
#a{right:0;bottom:0} 
p{margin:50;
width:50;height:50;
background:#fdc57b;
position:fixed
Enter fullscreen mode Exit fullscreen mode

This one was by far, my shortest solution condensing to 192 characters.
The code is quite self explanatory.

Although the top solution was just 69 characters, I wonder how they were able to do it in such small amount of code!

Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.

Want to connect?

You can connect with me here

Discussion (2)

Collapse
sam99 profile image
Sam99

By using css grid? I am a noob in web development but I think may be css grid can do or not, i don't know.

Collapse
prakhart111 profile image
Prakhar Tandon Author

Yeah sure, we can also do the same with CSS grids.
Here's the code:

<div id="cont"><p id="i1"><p id="i2"><p id="i3"><p id="i4">
<style>
*{background:#62374e;margin:0}
#cont{
display:grid;
grid-template-columns:repeat(9,50px);
grid-template-rows:repeat(7,50px)
}
p{background:#fdc57b}
#i1{grid-area:2/2/3/3}
#i2{grid-area:2/7/3/8}
#i3{grid-area:5/2/6/3}
#i4{grid-area:5/7/6/8}
Enter fullscreen mode Exit fullscreen mode

Cheers Sam!