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.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.