I must admit that I quite enjoy watching you struggle through these cssbattle challenges - I'm sure the stress of doing them "live" makes them a lot harder than they actually are.
It is encouraging to see in these battles all the guys also make silly errors like mispelling classes, missing spaces, commas, and turning semicolons into colons or vice versa. It makes me feel like less of a dingbat 😂
For a 5 year fireworks/photoshop to html slicer in my youth, i really enjoyed the last one, it made me talk with the screen, screaming and giving you the correct instruction as you do it(like a senior telling the answer of a question in a show)😊last one could be a separate video! Thank you and keep it up!
Thats the definition of resilient job. I watch every video that You made. Love to learn how You aproach to the task from different views and that is awesome Excuse My English, it's not my language. Cheers from argentina.
Wow... I'm learning so much with every video. It's entertaining and informative at the same time! I'm watching more and more videos of you and discovered cssbattle for me to learn it the hard way. I guess I learnt more the last two weeks since I started watching it than the 5 years before. Great great work!!
I am very new but my first thought on the spiral was to make a million dots and just position them all around, but i learned a lot watching you. Love watching these you help me a lot. I like how you teach as you are doing these as well. thank you
man i've been watching most of your videos of challenges, and you're a genius! but that challenge #4, i don't know what was going with you! i'm still new to this field, but as i was watching it i don't know how you couldn't see how simple that was! you just make a square with background white, and then "border-radius: 0 100px;" and you have the element in white! 🤣 had to go to the challenge and do to make sure i did it right, and kept thinking how couldn't he think of that?!! I know after one year if you watch this clip you'll have a good laugh of this.. just sometimes in this field.. we overthink ourselves and the solution is kind of easy😁
well for challenge 4, imagine the shape of a venn diagram with two circles. where one circle is a parent element which has the { overflow: hidden; } . and the second circle is it's child element which has the background color you want, the intersection area should give you the desired shape
Challenge 4: two TIL doing this challenge: box-reflect can be a neat tool for things that are in any way mirrored, like the two brown ones. What I did was: width: 100px, height: 100px; border-radius: 0 100px; -webkit-box-reflect: right 0; then position it right for the browns. For the white one i did the same, but without reflection and rotated around 45deg. Still this would never be possible without everything i learned from you.
The last spiral puzzle best solution takes 160 symbols, and im interested in viewing that code (im free user at the moment, so i cant). For me its not a problem to get 100% identity for any puzzle, the most value is code shortness. I have 600-720 points avg, but top solutions scored by 800+ and at the same time the avg puzzle score is 500-550. I learn some top solutions and i found they very hacky. High score solutions are NO using divs, position, etc.. they using scss, style attributes inside html nodes and so much more very interested combinations. Its nice place to learn or improve skills. Thank you to discover that space for me.
Kevin, I noticed you had a bit of trouble with the shape in the Lotus test. It can be done easily in 6 lines of code. .leaf{ height: 8rem; width: 8rem; background-color: teal; border-top-left-radius: 8rem; border-bottom-right-radius: 8rem; transform: rotate(-45deg); } Hope this is useful. Love watching your videos and I have learnt so much from them. Cheers John
For the second one, you could have just done 4 for white rectangles rounded on the middle side (flat toward the outsiders), then cover with a div superposed to the container with "border: transparent pink" (to create two side triangles hiding the white in excess).
The lampshade could be achieved by using transparent borders and adjusting the bottom border with and color something like this: width:100px; border:60px solid transparent; border-bottom:200px solid pink;
I had an idea for the lotus one after seeing you use rotate. My approach was using border- radius : 100% 0; on the div. Turned out a 100% match with less than 420 characters used.
Oooooooh - I never would have thought to use borders as the base for triangles! GREAT little trick. :D I'd have tried the four white "drops" with four divs with one round side and then "substract" 2 squares in red that are rotated 45°. :)
Watching you do lotus and missing the easy solution... Big transparent circle with overflow hidden. White circle inside offset to the left or right to get the pointy ended oval. Repeat for other two petals with different colour inside circle and offset direction... in fact for the brown petals you can use the same transparent circle container.
I did that cinnamon bun spiral with a bunch of semicircular divs, defining the border radius in pixels rather than %. I think it took me about a half hour, too, and I only got a 99.5% match.
49:01 I have never done clip-path, but would guess something like (25px 0px, 0px 25px, 0px 0px, 0px 0px), with some of the 0px being 100% For the last it looks like a line, na the last one is 2 dots with 3 border-radius on larger circles
You should TOTALLY accept challengers for these occasionally. Solid, simple content opportunity! Vet a few projects to make sure things align, and take ‘em on. Think about it! I’d love to get my butt kicked by you at one of these (though I do OCCASIONALLY) find myself a step ahead of you as I’m following along…but hey, easier said than done!).
I got the solution at 1hr 7s based on your ideas. Making it more rectangular then using pixels to define they border radius. I still don't know what you final solution will be at this point.
For half circles on spiral: Border-radius: 50%; Border-top: 20px solid orange; Border-right: 20px solid orange; Border-left: 20px transparent; Border-bottom: 20px transparent; Transform: rotate(x deg)
For the second challenge could it worked like 2 square divs rotated 45 deg with the same color as background? For the fourth elbow challenge, maybe 2 rectangle divs one smaller than the other in a flex container, justify content and align items end, position absolute with border top left radius ..? 🤔
What about alternating box shadows in two containers with overflow hidden for the last challenge...? Because upper and lower half are both concentric half circles... Would be quite similar to your solution but with only 2 divs and 2 dots... Didn't try it yet... and maybe didn't think it to the end... but worth a shot I guess
On the triangle one, couldve used both before and after, and made 2 triangles. As first one you made plus the second one wouldve been the stuff you needed.
In the spikes challenge, couldn't he use 4 rectangles with the borders curved and then use 2 big triangles the same color of the background to divide them in half? Or put together 2 small triangles at the back of the white halfs? Or even keep that bigger black triangle and curve its border so it fits in the white part?
I almost never use transform now that rotate and translate are their own properties (and use the GPU). It's a bonus that they also give you a higher score.
My solution to challenge 7 was to create 2 divs with a height of 50%, then create a load of circles with borders using position: absolute. Stick the circles inside the 2 divs and use overflow: hidden.
I completed the lotus challenge doing the leafs using borders. I used border: 50px solid then set their colors, after that I used a border radius of 140px to get the shape right. This way I did all the leafs using 1 div for each then rotating them accordingly. I also used a display grid for centering everything then repositioned the elements with position absolute. This way I used only 3 divs total and about 30 lines of css.
in challenge 3rd you can just make background transparent of box, only border of 30px I guess and use border-bottom-color:transparent;border-right-color:transparent; which would be more effective
Challenge 4 (Lotus): I used a repeating radial gradient inside of my first element to create the two background shapes, and a [border radius: 0 100%; rotate: 45deg;] for the foreground shape element. Ended up 88th on the leaderboard with that approach! Challenge 7 (Spiral): I used two elements stacks, with radial gradients with multiple color stops for each arc. Custom variables for the position and the stops so I could apply it to both elements and just adjust the vars for the lower one. Scored 58th doing it this way :D
57:45 At first i was like, dude... It's impossible with CSS only!! And then after few minutes of thinking 🤔: well,, that is kinda possible but I'm not 💯% sure 😄
Just spent another hour on the spiral, now down to 348 characters which got me to #38 on the leaderboard! 😁 But how on earth can you solve this with 160 characters??
When I put display flex, justify content and align items center, the div still sticks to the top. I had to put a margin top to push it down and I have no idea why!
I haven't tried it, but on the challenge with the triangles couldn't you have used linear gradient to cut the box in half at a 45deg angle and have another box next to it with the corners rounded? Would that work?
I followed along the first challenge with you and somehow even though I typed display: flex, justify-content: center; align-items: center; it doesn't center my divs, but when I put height 100vh in body it centered the divs. What is the issue here?
I must admit that I quite enjoy watching you struggle through these cssbattle challenges - I'm sure the stress of doing them "live" makes them a lot harder than they actually are.
Knowing how knowledgeable he is I find his struggles to complete some of these comforting
It's useless to scream at my screen to helps you :) Thanks you to share this with us. I have fun with CSSBattle today ! BORDER-BOTTOM:NONE!!!
Challenge 4 - The leaf shapes are actually just squares with border radius on opposite corners. Just rotate them.
cool content man😎 keep the css battle series alive. can learn a lot of things from this🤯
man I enjoyed a lot watching you struggle. Just made me a bit sane though, if you are struggling, then its ok for me to struggle. 😂
It was painful to see you struggle with the triangle after you had half the triangle at 9:50 and the other half at 10:09.
agreeee
These videos are so awesome, I'm learning CSS and I saw that and i was like BLACK BLACK!
Scrolled down here to look for this comment and it was the first one I saw 😅
What a great Video! As always :) Thank you!
It is encouraging to see in these battles all the guys also make silly errors like mispelling classes, missing spaces, commas, and turning semicolons into colons or vice versa. It makes me feel like less of a dingbat 😂
Kevin the last one was really amazing i really love your work. Man you are legend of CSS
For a 5 year fireworks/photoshop to html slicer in my youth, i really enjoyed the last one, it made me talk with the screen, screaming and giving you the correct instruction as you do it(like a senior telling the answer of a question in a show)😊last one could be a separate video! Thank you and keep it up!
Thats the definition of resilient job. I watch every video that You made. Love to learn how You aproach to the task from different views and that is awesome Excuse My English, it's not my language. Cheers from argentina.
Wow... I'm learning so much with every video. It's entertaining and informative at the same time! I'm watching more and more videos of you and discovered cssbattle for me to learn it the hard way. I guess I learnt more the last two weeks since I started watching it than the 5 years before.
Great great work!!
The #137 (Elbow) only needs a single div and a pseudoelement. You got really tangled up with that one! It's just a box on top of another.
no pseudo element, could just set border-bottom and border-right to 0px
Can also be done with one div and border on top and left only
@@axelkarlsson6580nope, for the same reason the triangle thing works. The junction between borders is a diagonal.
I will never not hear "Hello my friend and friend". This challenge was nuts! Lots of good learnings
SAME i only recently realised he was saying front end friends not friend and friends
Same, thought it was friemd and friends 😂
I am very new but my first thought on the spiral was to make a million dots and just position them all around, but i learned a lot watching you. Love watching these you help me a lot. I like how you teach as you are doing these as well. thank you
Couldn’t you have done border: black transparent transparent black; for the second challenge
Nice noticing but it will be: black black transparent transparent
@@KevalMiistry I was shouting this at the screen. 🙂
@@fraaank Honestly Mee too man! 😭
I was like how the hell this person The Kevin Powel can't see what I'm seeing
@@fraaank hahahaha Same...
You can use #0000 for transparent fyi
Love it! I was just showing my students the spiral one
How is it done
I'm so happy to watch more and more your tutorials, and I love the way that you think for founding solution.
You know it's a toughie when KP has frazzled hair at the end.
The spiral can be made using box-shadow and a lot of them, that would allow for a single div to draw it.
1:02:20 That Imposter Syndrome Kicking In.
I love CSS battle videos!!
man i've been watching most of your videos of challenges, and you're a genius! but that challenge #4, i don't know what was going with you! i'm still new to this field, but as i was watching it i don't know how you couldn't see how simple that was! you just make a square with background white, and then "border-radius: 0 100px;" and you have the element in white! 🤣 had to go to the challenge and do to make sure i did it right, and kept thinking how couldn't he think of that?!!
I know after one year if you watch this clip you'll have a good laugh of this.. just sometimes in this field.. we overthink ourselves and the solution is kind of easy😁
well for challenge 4, imagine the shape of a venn diagram with two circles. where one circle is a parent element which has the { overflow: hidden; } . and the second circle is it's child element which has the background color you want, the intersection area should give you the desired shape
target 22 just a cheeky tip, use .outer .inner and styly inner to get one leg, refect it once to get 2 legs, then reflect outer to get all 4 legs
New to the channel. Love the content!
For the spiral challenge, I used clip-path:polygon(0px 0px, 0px 50%, 100% 50%, 100% 0%); instead of a pseudo-element.
Real ones use clip-path: path()
Challenge 4: two TIL doing this challenge: box-reflect can be a neat tool for things that are in any way mirrored, like the two brown ones. What I did was: width: 100px, height: 100px; border-radius: 0 100px; -webkit-box-reflect: right 0; then position it right for the browns. For the white one i did the same, but without reflection and rotated around 45deg. Still this would never be possible without everything i learned from you.
#138
can easily be done with corner radius on 2 corners x 3, rotate the white one
The last spiral puzzle best solution takes 160 symbols, and im interested in viewing that code (im free user at the moment, so i cant). For me its not a problem to get 100% identity for any puzzle, the most value is code shortness. I have 600-720 points avg, but top solutions scored by 800+ and at the same time the avg puzzle score is 500-550.
I learn some top solutions and i found they very hacky. High score solutions are NO using divs, position, etc.. they using scss, style attributes inside html nodes and so much more very interested combinations.
Its nice place to learn or improve skills. Thank you to discover that space for me.
The other tip for these is to have a border of 0 or none for the side you don’t want instead of adding a pseudo element to cover it.
This is both painful and amazing.
23:33 you could have done the #elbow challenge with just 2 divs and tweaking the border radius for four corners
maybe with a one div. we can pseudo element like :before and :after.
Kevin, I noticed you had a bit of trouble with the shape in the Lotus test. It can be done easily in 6 lines of code.
.leaf{
height: 8rem;
width: 8rem;
background-color: teal;
border-top-left-radius: 8rem;
border-bottom-right-radius: 8rem;
transform: rotate(-45deg);
}
Hope this is useful.
Love watching your videos and I have learnt so much from them. Cheers John
There was a cleaner and hackier way to do the elbow
Container div with overflow hidden + enormous rounded rectangle :)
For the second one, you could have just done 4 for white rectangles rounded on the middle side (flat toward the outsiders), then cover with a div superposed to the container with "border: transparent pink" (to create two side triangles hiding the white in excess).
The lampshade could be achieved by using transparent borders and adjusting the bottom border with and color something like this:
width:100px;
border:60px solid transparent;
border-bottom:200px solid pink;
44:10 for the fourth challenge you can get the results with:
border-radius: 100% 0;
rotate: -45deg;
I had an idea for the lotus one after seeing you use rotate. My approach was using border- radius : 100% 0; on the div. Turned out a 100% match with less than 420 characters used.
Oooooooh - I never would have thought to use borders as the base for triangles! GREAT little trick. :D I'd have tried the four white "drops" with four divs with one round side and then "substract" 2 squares in red that are rotated 45°. :)
For the 44:28 you should of done it with squares. Giving diagonal corners a radius of 100% then rotating it.
I'd love to see an episode of this where you do an unoptimised solution speedrun
This spiral was crazy!
Watching you do lotus and missing the easy solution... Big transparent circle with overflow hidden. White circle inside offset to the left or right to get the pointy ended oval. Repeat for other two petals with different colour inside circle and offset direction... in fact for the brown petals you can use the same transparent circle container.
I did that cinnamon bun spiral with a bunch of semicircular divs, defining the border radius in pixels rather than %. I think it took me about a half hour, too, and I only got a 99.5% match.
49:01 I have never done clip-path, but would guess something like (25px 0px, 0px 25px, 0px 0px, 0px 0px), with some of the 0px being 100%
For the last it looks like a line, na the last one is 2 dots with 3 border-radius on larger circles
Challenge 4:
3 divs that take in: width: 100, height 100, border-radius: 100% 0;
Then you have the shapes. Position them nicely and done. :)
Thank you Wiz for giving the exact solution. A lot of people describe what to do but I got confused. Your answer is much more clear.
You should TOTALLY accept challengers for these occasionally. Solid, simple content opportunity! Vet a few projects to make sure things align, and take ‘em on. Think about it! I’d love to get my butt kicked by you at one of these (though I do OCCASIONALLY) find myself a step ahead of you as I’m following along…but hey, easier said than done!).
I got the solution at 1hr 7s based on your ideas. Making it more rectangular then using pixels to define they border radius. I still don't know what you final solution will be at this point.
For half circles on spiral:
Border-radius: 50%;
Border-top: 20px solid orange;
Border-right: 20px solid orange;
Border-left: 20px transparent;
Border-bottom: 20px transparent;
Transform: rotate(x deg)
This guy because of that King Of Css. You're definitely a Css legend already.
For the second challenge could it worked like 2 square divs rotated 45 deg with the same color as background?
For the fourth elbow challenge, maybe 2 rectangle divs one smaller than the other in a flex container, justify content and align items end, position absolute with border top left radius ..? 🤔
In challenge no. 7 sprial if you see, those are just half circles, but some is up facing and some are down face or rotated.
Love your videos..
10:00 border: black black transparent transparent;
I was screaming😭😭
What about alternating box shadows in two containers with overflow hidden for the last challenge...? Because upper and lower half are both concentric half circles... Would be quite similar to your solution but with only 2 divs and 2 dots... Didn't try it yet... and maybe didn't think it to the end... but worth a shot I guess
On the triangle one, couldve used both before and after, and made 2 triangles. As first one you made plus the second one wouldve been the stuff you needed.
OMG I had *never* noticed the "Diff" checkbox that gives you the "x-ray vision" - so useful when you try pixel push a value 😅
In the spikes challenge, couldn't he use 4 rectangles with the borders curved and then use 2 big triangles the same color of the background to divide them in half? Or put together 2 small triangles at the back of the white halfs? Or even keep that bigger black triangle and curve its border so it fits in the white part?
I almost never use transform now that rotate and translate are their own properties (and use the GPU). It's a bonus that they also give you a higher score.
Your videos are the best 😊. Can you please make a video on drag and drop?
My solution to challenge 7 was to create 2 divs with a height of 50%, then create a load of circles with borders using position: absolute. Stick the circles inside the 2 divs and use overflow: hidden.
For second challenge you can use border-radius: 100vmax for pill shape, then use clip-path: polygon (0 0, 0 100%, 100% 100%, 50% 100% )
Kevin's hair says it all for the last one! It was tough! 😊
Kevin, thanks for your video. challenge 4. width:100, height:100, border-radius:100 0 100, rotate -45deg :)
Looking at 36:00, aren't this 2 circles with same radius intersecting?
44:17
div {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 100% 0;
rotate: -45deg;
}
I completed the lotus challenge doing the leafs using borders. I used border: 50px solid then set their colors, after that I used a border radius of 140px to get the shape right. This way I did all the leafs using 1 div for each then rotating them accordingly. I also used a display grid for centering everything then repositioned the elements with position absolute. This way I used only 3 divs total and about 30 lines of css.
I commented before watching the last challenge. I laughet out loud when you discovered the border thing
I Love this kind of Videos
in challenge 3rd you can just make background transparent of box, only border of 30px I guess and use border-bottom-color:transparent;border-right-color:transparent; which would be more effective
Nice one 🎉🎉🎉🎉
Lotus: border-radius: 200px 0 200px 0; width: 100px; height: 100px;
Challenge 4 (Lotus): I used a repeating radial gradient inside of my first element to create the two background shapes, and a [border radius: 0 100%; rotate: 45deg;] for the foreground shape element.
Ended up 88th on the leaderboard with that approach!
Challenge 7 (Spiral): I used two elements stacks, with radial gradients with multiple color stops for each arc. Custom variables for the position and the stops so I could apply it to both elements and just adjust the vars for the lower one. Scored 58th doing it this way :D
Challenge 3 - use borders top and left
div {
width: 250px;
height: 150px;
background: #6592CF;
border-top: 50px solid #060F55;
border-left: 50px solid #060F55;
border-radius: 100px 0 0 0
}
For that second one giving you trouble with the triangles, my first thought went to clip-path.
And for elbow, a dark blue div with one rounded corner, and then either inside or on top of that, a light blue div with one rounded corner.
Just solved the spiral at 100% with 475 characters in about 1 hour, now let's see how you did it!
might help full! that was a right angled triangle !!
I was yelling BLACK BLACK TRANSPARENT TRANSPARENT at the screen haha! Imagine all the times the answer has been right there when we hit a wall in CSS.
I took a nap with autoplay on, and now I've woken up and signed up for CSSBattle...
Two Battles down, 140+ to go!
1:15:43 I thought it was just me struggling like that huashuashuas. looks like Im not alone.
57:45 At first i was like, dude... It's impossible with CSS only!!
And then after few minutes of thinking 🤔: well,, that is kinda possible but I'm not 💯% sure 😄
wow that last one is mind blowing
Just spent another hour on the spiral, now down to 348 characters which got me to #38 on the leaderboard! 😁 But how on earth can you solve this with 160 characters??
Please do more of these long videos!
Spending my days learning to become a web dev for 2025. My go to choice of procrastination has now become watching Kevin do CSS battle challenges.
1:03:15 - screaming in my head - border-bottom, border-bottom, border-bottom
1:14:37 it started to look kinda sus
OMG that spiral.... Jigsaw )) My solution: screenshot and background-image :D
that final one gave me so much anxiety XD
Great video CSS king. I wonder if there's `JavaScript` battle or not.
Isnt that the Dreamcast logo thing? Guess I should wait as you havent got there yet in my viewing 😂
Awesome 😍
And here is me screaming at the screen from the top of my lungs black black transparent transparent 🤣🤣
When I put display flex, justify content and align items center, the div still sticks to the top. I had to put a margin top to push it down and I have no idea why!
now i'm @ 1:02:36 and i'm crying of laughter 🤣
I haven't tried it, but on the challenge with the triangles couldn't you have used linear gradient to cut the box in half at a 45deg angle and have another box next to it with the corners rounded? Would that work?
this gave me a 100% on the lamp:
body{
background:#E38F66;
}
.a {
position:absolute;
top:90px;
left:136px;
border-bottom: 120px solid #FFFBDA;
border-left: 32px solid #E38F66;
border-right: 33px solid #E38F66;
height: 0px;
width: 63px;
}
.b{
position: absolute;
width:10px;
height:90px;
background:#62306D;
top:210px;
left:195
}
You could had used mix-blend-mode in that flower type problem
when Kevin said e a my mind immediately went to e a sports it's in the game 😂🤣
I followed along the first challenge with you and somehow even though I typed display: flex, justify-content: center; align-items: center; it doesn't center my divs, but when I put height 100vh in body it centered the divs. What is the issue here?
I actually figured this one out. I tried using Chrome and guess what? The same code centers the divs. But firefox won't. The hell?
how do people get that spiral down to 160 characters? O.o the lowest I got was 339