Yes, CSSBattle is a free to play platform. It only costs you your time 😀
Yes. You can see any target and try replicating it with code. But to submit and get a score, you'll need to login first.
CSSBattle needs you to code in HTML (slightly) and CSS. If you have ever coded in these 2 web technologies, you are all set to play here.
Even if you don't have any experience with HTML and CSS, they are super easy to start with. Open this CSS Reference in another browser tab, and get ready to battle!
A Battle is a collection of unique targets with its own separate leaderboard. Each Battle runs for a set amount of days/weeks and once it's finished, the Battle leaderboard is locked, and the winners are crowned.
The targets in a Battle remain playable even after a Battle is over and changes in target leaderboard rankings still occur. This also affects the rankings in the Global Leaderboard.
Note: Battle names do not hold any relation to any of the targets or the game itself. Any resemblance is mere coincidence. Do not over-think them. 😬
The objective of the game is to write HTML/CSS to replicate the given target image in the least code possible.
In the target page, start coding in the editor area on the left. As you start typing, the output area in the middle will start rendering your code. When you're confident that the output matches the target image, hit the Submit button to see your score.
We also have a growing list of tips and tricks for CSS code-golfing.
Now go and climb the leaderboards!
Our scoring algorithm takes into account 2 things: 1) How closely you have replicated the target image 2) Number of characters in the code. Based on these 2 factors, a score is calculated. Better the match and lesser the characters used, more the score.
Also, it's worth mentioning that when your visual match with the target image is low, reducing character count won't give too much jump in score. Initially focus more on getting the match to 100%. Once you are on 100% match, the points start increasing more rapidly with decreasing character count. This exponential scoring is done to make it more rewarding for those who sweat it all out to get to extreme character counts!
Since this is a game where players can play against each other for better rank, you cannot see the solutions of other players. That said, if you want to learn how other solutions, there are many ways to do so:
First of all, learn the basic tricks of CSS code-golfing on our Tips & Tricks page.
There are a lot of players sharing their solutions on Github, Youtube and our community forum. Just search for "CSSBattle solutions".
There are some "open" targets in each battle (after battle #12) in which top solutions are open for everyone. Eg. Target #62 - Sunset.
Submitted code solutions are rendered in a headless Chromium browser on a Ubuntu 18.04 server.
Your code is rendered as it is without any modification and the browser settings are all set on default.
There might be slight differences in how different browsers render your code in the game preview. Hence till the time we find a way a reliable way to normalize these differences, we recommend playing on Chrome, Chromium, Brave or Safari browser (these are the ones we have tested).
With Friends, you can now choose who you want to see in the leaderboards and see your standings among them (alongside global players).
To add friends:
Note: Adding someone as a friend sends them a notification so they can add you back!
From Battle #23 and onwards, we have implemented a new leaderboard system. Now, there are two types of leaderboards on CSSBattle:
CSS Leaderboard and
You can switch between the two with a toggle which appears next to the leaderboard heading in Battle #23+ and their targets.
Still have a question? Don't hesitate to ask it on our Community forum or tweet out to @css_battle