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
1. Absolute Values
2. Relative Values
3. Border
4. Box Shadow
White-space removal
before
After
Omit the last semi-colon
before
After
Omit the closing tags
before
After
After
position:fixed beats position:absolute, mostly
before
After
Play with the units
before
After
You don't always need to add an HTML element to style!
before
After
Omit the 'px' unit
before
After
css battle i scored 100 % number 2 code example
Example 1: css battle i scored 100 % number 2
Example 2: css battle i scored 100 %
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.