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.