CSS Battle – smallest possible CSS code (Getting Started with CSS Battle)

CSS Battle is a easy to use web application that given a custom design, you should implement it just using CSS code + HTML code.

What is CSS Battle? And why you should try it?

Custom Battles Use your CSS skills to replicate targets with smallest possible source code. There are 15 levels in CSS battle each with a target you have to replicate using HTML code and CSS code.

Types of the CSS Battle

  • Battle #1 – Pilot Battle
  • Battle #2 – Visibility
  • Battle #3 – Cursor
  • Battle #4 – Display
  • Battle #5 – Inline
  • Battle #6 – Conic
  • Battle #7 – Backface
  • Battle #8 – Transition
  • Battle #9 – Margin
  • Battle #10 – Block
  • Battle #11 – Overflow
  • Battle #12 – Blend
  • Battle #13 – Clip
  • Battle #14 – ZIndex
  • Battle #15 – Filter

<img style=box-shadow:0+0+0+2in#c60000,0+0+0+5in#3d3d3d>

1. Absolute Values

<div></div>
<style>
  body {
    margin: 0;
    background: #3d3d3d;
  }

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

2. Relative Values

<div></div>
<style>
  body {
    margin: 0;
    background: #3d3d3d;
  }

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

3. Border

<div></div>
<style>
  div {
    margin: -8px;
    width: 200px;
    height: 200px;
    background: #c60000;
    border-right: 200px solid #3d3d3d;
    border-bottom: 200px solid #3d3d3d;
  }
</style>

4. Box Shadow

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

White-space removal

before

<style>
	div {
		color: green;
	}
</style>

After

<style>div{color:green;}</style>

Omit the last semi-colon

before

<style>
	div {
		background: green;
		height: 200px;
	}
</style>

After

<style>
	div {
		background: green;
		height: 200px
	}
</style>

Omit the closing tags

before

<div></div>
<style>
	div {
		color: green;
	}
</style>

After

<div>
<style>
	div {
		color: green;
	}

Remove Double Quotes

before

<div style="border:1px solid blue"></div>

After

<div style=border:solid+10px#00f></div>

Shorten selectors with made-up attributes

before

<p><p><p><p><p>
<style>
	p:nth-child(3){
		background: green;
	}
</style>

After

<p><p><p i><p><p>
<style>
	p[i]{
		background: green;
	}
</style>

position:fixed beats position:absolute, mostly

before

<style>
	div{
		position: absolute;
	}
</style>

After

<style>
	div{
		position: fixed;
	}
</style>

Play with the units

before

<style>
	div{
		width: 100px;
	}
</style>

After

<style>
	div{
		width: 25vw;
	}
</style>

You don’t always need to add an HTML element to style!

before

<div>
<style>
	div{
		background: green;
	}
</style>

After

<style>
	body{
		background: green;
	}
</style>

Omit the ‘px’ unit

before

<div>
<style>
	div {
		width: 200px;
		margin: 6px;
	}
</style>

After

<div>
<style>
	div {
		width: 200;
		margin: 6;
	}
</style>

css battle i scored 100 % number 2 code example

Example 1: css battle i scored 100 % number 2

<body>
<div class="first"></div>
<div class ="B"></div>
<div class ="last"></div>
<div class ="queue"></div>
<style>
  .first {
    height: 100px;
    width: 50px;
    background: #F9E492;
    border-radius:0 90px 90px 0;
    transform: rotate(-90deg);
    position:absolute;
    top:75;
    left:125;
  }
  .B {
    height: 100px;
    width: 50px;
    background: #4F77FF;
    border-radius:0 90px 90px 0;
    transform: rotate(-0deg);
    position:relative;
    top:-50;
    left:50;
  }
  .last {
    height: 100px;
    width: 50px;
    background: #F9E492;
    border-radius:0 90px 90px 0;
    transform: rotate(90deg);
    position:relative;
    top:25;
    left:25;
  }
  .queue {
    height: 100px;
    width: 50px;
    background: #4F77FF;
    border-radius:0 90px 90px 0;
    transform: rotate(180deg);
    position:absolute;
    top:150;
    left:150;
  }
  body{
    background-color:#191919;
    display: flex;
    justify-content:center;
    align-items:center;
  }
</style>
</body>

Example 2: css battle i scored 100 %

<body>
<div class="first">
  <div class="mege">
  <div class="last"></div>
  </div>
  </div>
 
 
<style>
  .first {
    width: 150;
    height: 150;
    background: #4F77FF;
    border-radius:105px;
    position: absolute;
    top:50;
    left:125;
    display:flex;
    justify-content:center;
    align-items:center;
    
    ;
    
  }
  .mege{
    width:75px;
    height:125px;
    background-color:#F9E492;
    position:relative;
    top:62;
    left:-38;
    
    
    
    
  }
  .last{
    width:75px;
    height:75px;
    background-color:#9AD5FF;
    border-radius: 0 0 0 90px ;

    
  }
  body{
    background-color:#19191A;
    display:flex;
	justify-content:center;
    align-items:center;
    
  }
</style>
</body>

Don’t Miss : Government free online courses with certificates

I hope you get an idea about css battle.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.