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~
~MARSMAN~ā€¢3y ago
This is witch craft šŸ«£ A link for it please? I need to understand how this works šŸ«£
MarkBoots
MarkBootsā€¢3y ago
link is there. open it in chrome. and paste that code
~MARSMAN~
~MARSMAN~ā€¢3y ago
Oh ok šŸ‘Œi thought it's on YT, never watched any of these battles šŸ˜¬ I guess i should start doing so lol
MarkBoots
MarkBootsā€¢3y ago
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~
~MARSMAN~ā€¢3y ago
I'll check it, thanks!
Kevin Powell
Kevin Powellā€¢3y ago
My solutions are much longer šŸ˜›
MarkBoots
MarkBootsā€¢3y 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
Kevin Powellā€¢3y 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
MarkBootsā€¢3y 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
Kevin Powellā€¢3y ago
well, yeah šŸ˜„
MarkBoots
MarkBootsā€¢3y ago
here the other one btw, strange thing. position: fixed is 99.9%, position: absolute 100%
Kevin Powell
Kevin Powellā€¢3y ago
I hate when those little things muck it up
capt_uhu
capt_uhuā€¢3y ago
for what it's worth transparent can be replaced with #0000. That would be 5 less characters
MarkBoots
MarkBootsā€¢3y ago
good shout!
Want results from more Discord servers?
Add your server