Kevin Powell - Community•2y ago

CSS Battle 19 - Curtain

Was playing with one of the css battles Kevin did in his stream. Maybe overdoing it a bit, but just for fun. Can we find a shorter solution? This is what I have so far (works best in chrome)

<style>
  * { 
    background: 
      linear-gradient(135deg, transparent 41%, #191919 0),
      radial-gradient(#F6E59C 46.5%, #191919 0) 2px 2px / 60px 60px

<style>
  * { 
    background: 
      linear-gradient(135deg, transparent 41%, #191919 0),
      radial-gradient(#F6E59C 46.5%, #191919 0) 2px 2px / 60px 60px

https://cssbattle.dev/play/109

14 Replies

~MARSMAN~•2y ago

This is witch craft 🫣 A link for it please? I need to understand how this works 🫣

MarkBoots•2y ago

link is there. open it in chrome. and paste that code

~MARSMAN~•2y ago

Oh ok 👌i thought it's on YT, never watched any of these battles 😬 I guess i should start doing so lol

MarkBoots•2y ago

Kevin did a stream today https://www.youtube.com/watch?v=L1BnNl3hw7E

Kevin Powell

YouTube

CSS Battle #19 - live coding challenge

✅ CSS Battle #19 - https://cssbattle.dev/battle/19 👨‍🎓 Get a course: https://www.kevinpowell.co/courses ✅ State of CSS survey - https://survey.devographics.com/survey/state-of-css/2022?source=kevin_powell #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ h...

~MARSMAN~•2y ago

I'll check it, thanks!

Kevin Powell•2y ago

My solutions are much longer 😛

MarkBoots•2y ago

haha, yea, but they make more sense in the real world. I saw the top players did it in only 77 chars. I only managed 127

Kevin Powell•2y ago

I donno, for this one I've seen a lot of bg decoration type things that are dot grids... just make a psuedo-element that has that radial-gradient and perfection.

MarkBoots•2y ago

true, this one could. But in the end, css battles is just flexing your "skills". Most battles are just visual elements that in most cases we would just use an svg

Kevin Powell•2y ago

well, yeah 😄

MarkBoots•2y ago

here the other one btw, strange thing. position: fixed is 99.9%, position: absolute 100%

Kevin Powell•2y ago

I hate when those little things muck it up

capt_uhu•2y ago

for what it's worth transparent can be replaced with #0000. That would be 5 less characters

MarkBoots•2y ago

good shout!

Gaming

Programming

CSS Battle 19 - Curtain