Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jdegand/cssbattle

CSS Battle Solutions
https://github.com/jdegand/cssbattle

css css-battle css-battle-solutions cssbattle cssbattle-solutions

Last synced: about 1 month ago
JSON representation

CSS Battle Solutions

Awesome Lists containing this project

README

        

# CSS Battle Solutions

## Thoughts

- With these solutions, you should get close to the Top 100 when you incorporate all the optimized open solutions.
- I don't care about the leaderboard, as I knew I didn't want to dedicate the time necessary to be in the top 50.
- If you look at the `pro` users, you can see how many times they verify solutions, and the attempts can be quite high for most of the top scorers.
- The daily CSS battle is good for engagement, but it is tough to keep up with, and I try to limit the time I spend to 15 minutes max. This can create problems when some daily battles are too difficult for such a time limit. Also, I avoid trying newer techniques to just get the battle done as quickly as possible.
- I feel like the harder main battles typically require 30-45 minutes to achieve 100%.
- The best solutions from the earliest battles relied on `clip-path` and `unicode`. I feel `gradient` properties have become the preferred approach to achieve a top solution. Also, `border` and `box-shadow` can be important to duplicate items.
- [CSS Nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting) is pretty much required for the best solutions.
- Using `clip-path` for triangles is a gamble and can be time-consuming to adjust.
- There have been a few battles that were unsolvable. `Abstract Plate` seemed impossible to solve, and it appears to have been adjusted (or someone posted a solution). The design of `Negative Box` was changed to allow easier completion. A daily battle was unsolvable, and they adjusted the stats so 100% completion for daily battles was retained for eligible users.
- It is important to note that the battles are designed in Figma. The creators can't verify all battles are solvable ahead of time.
- To get the best solutions, you need to incorporate tools and use generators and online editors. AI is not much help to CSS golfing.
- You need to use the `Chrome` browser to ensure accurate verification. Even then, the preview is slightly off, and it can be helpful to use the `CSS Battle Previewer 2.0` to improve your solution. However, the previewer is only updated for the main battles.

## Useful Resources

- [CSS Battle](https://www.cssbattle.dev)
- [CSS Battle Previewer 2.0](https://tc70f3.csb.app/)
- [Github](https://github.com/cssbattle/forum) - CSS Battle Forum
- [Github](https://malcolmkiano.github.io/clip-path-generator/) - clip path generator
- [Github](https://yqnn.github.io/svg-path-editor/) - SVG path editor
- [CSS Tricks](https://css-tricks.com/the-shapes-of-css/) - shapes of CSS
- [Shark Coder](https://sharkcoder.com/visual/shapes) - CSS shapes
- [Paulund](https://paulund.co.uk/how-to-create-different-shapes-in-css) - CSS shapes
- [Stack Overflow](https://stackoverflow.com/questions/22406661/how-to-make-one-circle-inside-of-another-using-css) - circle inside another circle
- [Stack Overflow](https://stackoverflow.com/questions/30711203/how-do-i-create-a-teardrop-in-html) - teardrop
- [Stack Overflow](https://stackoverflow.com/questions/56864210/how-to-change-intersection-color-in-venn-diagram) - intersection color in venn diagram
- [CSS Portal](https://www.cssportal.com/css-clip-path-generator/) - clip path generator
- [Stack Overflow](https://stackoverflow.com/questions/15938933/creating-a-chevron-in-css) - CSS chevron
- [Stack Overflow](https://stackoverflow.com/questions/42877961/a-triangle-in-css-that-takes-the-whole-width-with-a-fixed-height) - CSS triangle whole width fixed height
- [Coding Dude](http://www.coding-dude.com/wp/css/create-a-triangle/) - CSS triangle
- [YouTube](https://www.youtube.com/watch?v=6QGOhCZLdhs) - Create Slanted or Razor-Blade Div Shapes with CSS3
- [RipTutorial](https://riptutorial.com/css/example/8071/3d-cube) - 3D cube
- [Codepen](https://codepen.io/ooo/pen/QomVgY) - 3D rectangle shape
- [Stack Overflow](https://stackoverflow.com/questions/22415651/half-circle-with-css-border-outline-only) - half circle with css border
- [CSS Tricks](https://css-tricks.com/forums/topic/how-to-make-curve-line/) - make a curved line
- [JS Fiddle](http://jsfiddle.net/awayF/490/) - CSS checkmark
- [Codepen](https://codepen.io/gliesche/pen/ZQyPeV) - CSS checkmark
- [Stack Overflow](https://stackoverflow.com/questions/40386130/how-to-create-parallelograms-divs) - Parallelograms
- [Stack Overflow](https://stackoverflow.com/questions/26961221/how-to-make-an-oval-in-css) - Oval
- [W3 Schools](https://www.w3schools.com/howto/howto_css_pill_button.asp) - Pill button
- [Stack Overflow](https://stackoverflow.com/questions/8452739/css-inset-borders) - CSS inset borders
- [Stack Overflow](https://stackoverflow.com/questions/10922387/create-an-l-shaped-border-using-html-and-css-is-it-possible) - L shaped border
- [CSS Tricks](https://css-tricks.com/snippets/css/multiple-borders/) - Multiple borders
- [Geeks for Geeks](https://www.geeksforgeeks.org/how-to-draw-a-semi-circle-using-html-and-css/) - semi circle
- [Stack Overflow](https://stackoverflow.com/questions/25939372/css-u-shaped-or-curved-borders) - CSS u shaped or curved borders
- [Codepen](https://codepen.io/seheekim/pen/BKYGZp)- Cylinder
- [Stack Overflow](https://stackoverflow.com/questions/40752681/making-a-smile-horseshoe-half-circle-with-rounded-edges-in-css) - smile horseshoe
- [Stack Overflow](https://stackoverflow.com/questions/52712506/cut-a-circle-into-half) - cut a circle in half
- [Stack Overflow](https://stackoverflow.com/questions/44920224/how-to-bend-a-div-in-css) - how to bend a div in CSS
- [Codepen](https://codepen.io/samc36/pen/KNEOpG) - eye shape
- [1-notes](https://1-notes.com/css-shape-swirl-design/) - CSS swirl design
- [Dev.to](https://dev.to/astrit/css-only-outlined-triangle-1k8j) - CSS only outlined triangle
- [CSS.gg](https://css.gg/shape-triangle) - shape-triangle
- [Coding Dude](https://www.coding-dude.com/wp/css/create-a-triangle/) - create a triangle
- [HashNode](https://nazanin-ashrafi.hashnode.dev/how-to-make-a-moon-with-css) - how to make a moon with CSS
- [Toptal](https://www.toptal.com/developers/cssminifier) - CSS minifier
- [Unused CSS](https://unused-css.com/blog/css-half-circle/) - CSS half circle
- [Stack Overflow](https://stackoverflow.com/questions/39339196/how-to-make-circles-repeat-in-the-background-of-an-element-in-full-css) - how to make circles repeat in the background of an element
- [Stack Exchange](https://codegolf.stackexchange.com/questions/259254/is-there-any-less-code-way-to-make-a-leaf-eye-shape-in-css) - eye shape in CSS
- [CSS Tricks](https://css-tricks.com/how-to-play-and-pause-css-animations-with-css-custom-properties) - play and pause css animations
- [W3 Schools](https://www.w3schools.com/howto/howto_css_loader.asp) - CSS loader
- [Stack Overflow](https://stackoverflow.com/questions/37437141/css-border-shorthand-when-each-border-has-a-different-width) - CSS border shorthand when each border has a different width
- [Codepen](https://codepen.io/rhgksrua/pen/GgbLKM) - CSS alphabet
- [Blog](https://kennethormandy.com/journal/pure-css-lettering-a-bad-and-fun-idea) - pure CSS lettering a bad and fun idea
- [CSS Tricks](https://css-tricks.com/building-progress-ring-quickly) - building progress ring quickly
- [YouTube](https://www.youtube.com/watch?v=mSfsGTIQlxg) - How To Make Circular Progress Bar Using HTML CSS JavaScript | Neomorphism Progress Bar
- [Blog](https://nikitahl.com/circle-progress-bar-css) - circle progress bar CSS
- [Github](https://nikitahl.github.io/svg-circle-progress-generator) - SVG circle progress generator
- [Stack Overflow](https://stackoverflow.com/questions/13059190/html5-css3-circle-with-partial-border) - HTML5 CSS3 circle with partial border
- [Stack Overflow](https://stackoverflow.com/questions/17285514/is-it-possible-to-make-a-squiggly-line) - squiggly line
- [singhak](https://singhak.in/draw-half-and-quarter-circle-with-css/#3_Quarter-Circle_with_CSS) - quarter circle with CSS
- [Stack Overflow](https://stackoverflow.com/questions/50598433/create-a-two-color-circle) - create a two color circle
- [Stack Overflow](https://stackoverflow.com/questions/20803489/draw-a-curve-with-css) - draw a curve with CSS
- [Abobe](https://color.adobe.com/create/image-gradient) - image gradient
- [Colorzilla](https://www.colorzilla.com/gradient-editor/) - gradient editor
- [JS Fiddle](https://jsfiddle.net/joshnh/bKfKm/) - CSS alphabet
- [Stack Overflow](https://stackoverflow.com/questions/41265044/curved-line-css-rounded-border) - curved line CSS rounded border
- [Stack Overflow](https://stackoverflow.com/questions/30044372/how-can-i-make-css-curved-line) - CSS curved line
- [YouTube](https://www.youtube.com/watch?v=wEP1mUuLODQ) - CSS triangle with border - Shape | web zone
- [Dev.to](https://dev.to/alvaromontoro/drawing-a-triangle-with-css-5g31) - drawing a triangle with CSS
- [Stack Overflow](https://stackoverflow.com/questions/16231184/how-to-create-a-transparent-triangle-with-border-using-css) - how to create a transparent triangle with border using CSS
- [Stack Overflow](https://stackoverflow.com/questions/62759278/element-with-border-radius-inside-element-with-border-radius-is-not-consistent) - element with border radius inside element with border radius is not consistent
- [Stack Overflow](https://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css) - draw diagonal lines in div background with CSS
- [Medium](https://medium.com/@miguelznunez/html-css-how-to-split-a-background-into-2-colors-1cdc394deb3d) - HTML CSS how to split a background into 2 colors
- [LogRocket Blog](https://blog.logrocket.com/how-to-create-yin-yang-symbol-pure-css) - yin yang symbol pure CSS
- [Codepen](https://codepen.io/AdamSSenniN/pen/xZpaow) - how to create yin yang symbol pure CSS
- [Blog](https://alvaromontoro.com/blog/67970/drawing-a-triangle-with-css) - drawing a triangle with CSS
- [Useful Angle](https://usefulangle.com/post/333/css-triangle) - CSS triangle
- [Github](https://github.com/w3c/csswg-drafts/issues/7103) - box shadow and border-radius doesn't always look right
- [Stack Overflow](https://stackoverflow.com/questions/22352311/how-do-i-draw-a-diagonal-div) - how do I draw a diagonal div
- [CSS Tricks](https://css-tricks.com/a-css-golfing-exercise/) - a CSS golfing exercise
- [Sitepoint](https://www.sitepoint.com/code-challenge-2-4-tips-for-higher-scores-in-cssbattle-dev/) - CSS battle tips
- [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting) - CSS Nesting
- [Medium](https://kswanie21.medium.com/slanted-background-with-clip-path-css-property-584b5564a533) - slanted background with clip path
- [Stack Overflow](https://stackoverflow.com/questions/18496383/tapered-div-using-css) - tapered div using CSS
- [Play CSS](https://playcss.app/) - CSS Battle Knockoff Play CSS
- [Codepen](https://codepen.io/adamlaki/pen/JxJwwB/) - CSS triangle clip paths
- [Stack Overflow](https://stackoverflow.com/questions/16263358/quarter-of-a-ring-with-css-and-html) - quarter of a ring with css and html