@@heliusuniverse7460 off cource it is, you can do all sorts of stuffs in website by mastering CSS well, and these stuffs are one the best way to do it.
Yeah I can't wait to see you do these challenges... Your css and Javascript videos is doing a magic for me outhere... I'm a better web developer cos of you. .. Thanks so much... Waiting for your css battle challenge tho
Kevin: let's see the z-index; Me: the pain is finally over; Kevin: *selects z-index; -1; still not a clue*; Me: *screams*; Best thriller movie of the year
It's really great to see that even the pros make mistakes from time to time. It shows us that nobody knows everything there is to CSS at all times and the learning never really stops
hi, I'm still a noob :D, but I think I came up with an interesting way to cut the border without using additional boxes: border-top: 30px solid #F7EC7D; border-bottom: 30px solid #F7EC7D; border-left: 30px solid transparent; border-right: 30px solid transparent; transform: rotate(45deg);
Actually you can set the border-color instead for a minimal clean-up like in the way how you could do it with border-radius! border:30px solid; border-color: #F7EC7D transparent; transform: rotate(45deg);
And you could do it with just one div :-) this is the shortest I came up with: .thing, .thing::after { position: absolute; border-radius: 50%; } .thing { background: #aa445f; width: 190px; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); } .thing::after { content: ""; inset: 30px; border: 30px solid; border-color: #f7ec7d transparent; }
It's weird tho. I thought they would be painting a canvas of the design and compare colors to a canvas of the original pixel by pixel to arrive at a score
Didn't expect you to make such hard work of the first challenge. Initial thought was to go from the inner/smaller circle and go outwards using a border (two sides transparent and rotated 45deg) and then a box-shadow to complete the shape.
This was again a really fun challenge to watch, Kevin! Thanks for doing this! And the amazing designs you generated while experimenting with border-radius in the 3rd round - Priceless! 😊🙌🏼
@@inkedcoder it could be an edge case behaviour thing and the evaluation engine could be using a different rendering engine that generates something different from what you see in the browser.
@@inkedcoder THis video was probably shot long back...our scoring engine at that time might not be the latest one supporting these new universal properties. It should work as of today.
Great site, really fun, thanks. I really want to see how people got the top scores on the latest battles though. Their code has 50% less characters than mine and I don't see how that's possible!? 🤯
For the first challenge, we could just use a SINGLE div. Set background to maroon color, border-left border-right to yellow, outline again to maroon. Then rotate 45 degree.
no matter what you do, no matter how much css gets easier, this at 17:07 happens to everyone. Even to Kevin. The moment when your happy smile fades away and you wonder, what is happening :D :D
I used to watch these and had no clue what you guys were doing at all. now I am actually understanding and even finding different (sometimes better) approaches myself. This happened only by watching and following you Kevin, so thank you so much for this.
SE here. I did some full stack before, but seeing you knock out these challenges and some of your other videos makes me want to brush off my CSS again. Good stuff!
I found all of these to be really easy if you take a second to look them over at the start. The last task was a centered square with 4 squares inside, each square then has a :before inserted in them (as you did) that displays half a circle, and then using the :nth-child selector you'd turn them around as needed... most often, any CSS problem is fixed by that kind of initial thinking and not figuring it out as you go, because if you get stuck you either/often fall into the sunk cost fallacy, or have to redo it all anyway...
positioning is the biggiest issue followed by the shapes for all the battles, centered images occur the most and you the normal centering tricks to get those positions then work on the shapes.
This is really fun to watch apart from the mic issue of Frank. I love battles especially when Kevin does typoes and pissed off :p --ps:You are the King Kevin. There is nothing convince me otherwise
As somebody who is just starting out with TOP, I understand alot of what happened through the episode (of course not all the definitions) but seeing it come to life was like a lesson in itself, and actually really fun to watch, thanks!
Woooow...Kevin is a monster. How he used those pseodo-elements in 3rd challenge in order to cut those circles. He is very talented in my opinion. Thx for the great battle! Had a lot of fun. 😅
For the first one an element of the size of the circle with appropriate border-width and border-radius along with border-left-color and border-right-color: transparent would give the desired effect. Then just rotate -45deg with transform.
Thanks Kevin, I had also tried the lock up challenge, and would love to share my approach... I do this stuff, by keeping only the top and bottom border as yellow color and rotating it to - 135deg... This will save some extra line of code in our css..
Fwiw, y'all should have tried using `border-left-color: transparent`, `border-right-color: transparent`, & `transform: rotate(45deg)` on the inner circle, with a chunky border.
To solve the issue of the first problem, the one they solved by overflow hidden, I put a circle above that region , and used a box shadow. I made the circle color transparent, and the box shadow was yellowish like the background. This helped hide the bit of the box that was getting out of the circle.
Round one where everything works and look perfect, but the program deducts points for your choice of code. That is how my teachers would grade me. I learn a lot watching someone else code, mostly because I know barely anything about css. It is super nice to see how someone else thinks through the problem.
In the third challenge, what I think would be a better approach is to make two halfs of the circle on one color, and positioning it, then duplicating it and applying rotation to make them go the other way & chang the color
Interesting fact, if you using border-radius and need to get only two of visible borders like in the first battle you just can make other two transparent and it will work
1st one was very easy all we needed was a div which is purple located in the center and we needed border with different colors for 4 sides as well as border-radius after all we needed box-shadow with purple it would take like 3 minutes max but great video thank you.
I duuno whether I'm over simplifying things, but for the last challenge why not just have four boxes ('outer' as two rows of two) positioned 'absolute' and an overflow of 'hidden', within each place another nested box inside each ('inner', also positioned as 'absolute') and apply a border-radius, then position 50% either left, right, top or bottom (depending on the direction and the inner shape) so half the div will be filled and the other hidden. Either way brilliant to watch!
For the first challenge I feel like maybe you could use a yellow border on the center circle, but only on the bottom and top side, then rotate it 45°. I haven't tried it personally though
15:16 I think you could also just provide multiple entries for box-shadow, but I think you'd need a bunch of them to avoid having a kind of "caterpillar" effect. The div is probably the way to go.
Ive just done the challenge and i used outer div, and inner div, and used border-top-color, border-bottom-color, and a border of 15px solid tranparent, then used roate of 45deg.
First one I had to pause and try myself. Ended up using clip-path: polygon() to individually shape the boxes within the outer circle. Def should've just made my square's smaller and align them more towards the center of the circle instead of keeping them big and over engineering the problem.
Thanks again Kevin for the battle! Rematch sometime?
Thank you, it was a blast, and we will definitely need to have a rematch one of these days!
Awesome battle!
congrats Sir, nice approaches!!!
I enjoyed the different approaches. This was awesome
fun to watch, painful to live through your positioning struggles struggles. Kevin you do great work
Me: "I'll never understand people who sit around and watch other people play video games."
Also me: (Watches 33 minutes of CSS battles.)
probably cuz this one is useful
@@MerthanMerter ah yes, drawing images using css is useful of course
@@heliusuniverse7460 its educational
@@multiarray2320 indeed. Im taking notes of some new code parts n explanation of what it does as i watch
@@heliusuniverse7460 off cource it is, you can do all sorts of stuffs in website by mastering CSS well, and these stuffs are one the best way to do it.
Great... i'll also try these three challenges.
*oot*
Ur vids helped me a lot man. Thanks
Yeah I can't wait to see you do these challenges... Your css and Javascript videos is doing a magic for me outhere...
I'm a better web developer cos of you. .. Thanks so much... Waiting for your css battle challenge tho
Done, I completed all these three challenges, it was a lot of fun doing it
You can do a Playlist for all the battles you've done.. Wll be so exciting to watch how you go about them
@@benjamintettehnartey7937 yours too chairman
Kevin: let's see the z-index;
Me: the pain is finally over;
Kevin: *selects z-index; -1; still not a clue*;
Me: *screams*;
Best thriller movie of the year
same 😨
Literally screaming at the guy and I couldn't even make a circle in the first place but I know that ; is fuckin wroooong
I was literally screaming too, 'KEVIN!!!! Z-INDEX!!!!!' OCD came to the play lol.
Yeah dude
Minute 2: aspect-ratio: 1, I just learned the thing of the day
Thank you Kevin :)
Same I learned bro now.. 😊😊👍
@@madara_uchiha_WB Yeah I learned the same thing in the second minute. This is Crazy.
@@programmingwithraahim yeah be too, as you can see even the cssbatlle interface couldn't recognise it it wasnt colored normally....
It's really great to see that even the pros make mistakes from time to time. It shows us that nobody knows everything there is to CSS at all times and the learning never really stops
7:12 I'm dying 😂😂😂. I don't think Kevin expected that either although that's a really cool shape he got
Was about to comment the same thing haha
His face was absolutely priceless $$
That made my day! 😂.😂.😂.
Yess I love the shape!
the semi-colon part killed me when you finally noticed it. 😂 i recently experienced the same thing on a project.
hi, I'm still a noob :D, but I think I came up with an interesting way to cut the border without using additional boxes:
border-top: 30px solid #F7EC7D;
border-bottom: 30px solid #F7EC7D;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(45deg);
Actually you can set the border-color instead for a minimal clean-up like in the way how you could do it with border-radius!
border:30px solid;
border-color: #F7EC7D transparent;
transform: rotate(45deg);
Task: name a button, that if you click a nuclear war starts
Everybody else: ultraimportant-btn
Kevin: a
you know that you could use border-bottom-color: transparent; border-top-color: trasparent; and make it transform: rotate(45deg); , it's some logic
totally spot on. everyone tackles the problems from a different angle
I was sitting here thinking the same thing. :)
And you could do it with just one div :-) this is the shortest I came up with:
.thing, .thing::after {
position: absolute;
border-radius: 50%;
}
.thing {
background: #aa445f;
width: 190px;
aspect-ratio: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.thing::after {
content: "";
inset: 30px;
border: 30px solid;
border-color: #f7ec7d transparent;
}
@@niner8275 I'm positive you can use px values for left and top and remove the translation
@@niner8275 ? it takes less characters :)
22:24 when semicolon haunts you even on the front-end
The face of Kevin when it went to 7x% to 100% using Flex is a poem, like a really sad poem, Edgar Allan Poe level of sadness poem.
It's weird tho. I thought they would be painting a canvas of the design and compare colors to a canvas of the original pixel by pixel to arrive at a score
Didn't expect you to make such hard work of the first challenge. Initial thought was to go from the inner/smaller circle and go outwards using a border (two sides transparent and rotated 45deg) and then a box-shadow to complete the shape.
Was searching for this comment lmao
My thoughts exactly.
This was again a really fun challenge to watch, Kevin! Thanks for doing this!
And the amazing designs you generated while experimenting with border-radius in the 3rd round - Priceless! 😊🙌🏼
Any comment on why place items: center gave a different score than using flex?
@@inkedcoder it could be an edge case behaviour thing and the evaluation engine could be using a different rendering engine that generates something different from what you see in the browser.
@@inkedcoder THis video was probably shot long back...our scoring engine at that time might not be the latest one supporting these new universal properties. It should work as of today.
Great site, really fun, thanks. I really want to see how people got the top scores on the latest battles though. Their code has 50% less characters than mine and I don't see how that's possible!? 🤯
@@_moore lookout for the open targets
For the first challenge, we could just use a SINGLE div. Set background to maroon color, border-left border-right to yellow, outline again to maroon. Then rotate 45 degree.
I paused the video and started the battle with you too, so much fun... thanks Kevin! 😀
👍 - did you beat me?
@@KevinPowell I am not sure that I can beat you but I did the whole in about 10 minutes.. :)
I really loved this challenge. The z-index typo had me in stitches lol was funny to watch as this happens to the best of us all the time.
no matter what you do, no matter how much css gets easier, this at 17:07 happens to everyone. Even to Kevin. The moment when your happy smile fades away and you wonder, what is happening :D :D
I used to watch these and had no clue what you guys were doing at all. now I am actually understanding and even finding different (sometimes better) approaches myself. This happened only by watching and following you Kevin, so thank you so much for this.
Samething
Watching Frank get 100% then Kevin moving the slider frantically to see the difference was hilarious, lol. I knew you would get it right soon enough.
That was good. Frank's last one was impressive.
I raged when I saw your z-index typo, Kevin.
SE here. I did some full stack before, but seeing you knock out these challenges and some of your other videos makes me want to brush off my CSS again. Good stuff!
Love the content, and its really helping me. Good energy and super chill vibe ☺️
You confused face @ 7:13 is so good ♥️
Finally, something that I understand! CSS may be my calling!
This is a great watch! I love thinking along and seeing what solutions you guys come up with.
for first one:
.inner {
width: 78px;
height: 78px;
border-radius: 50%;
border: 31px solid #F7EC7D;
border-left-color: transparent;
border-right-color: transparent;
transform: rotate(45deg);
}
better than adding other classes/divs/overflows, got 99.9% from first try
You could totally solve it without even adding any html element. Just use Css. The output window is an with an html and body element in it by default.
@@tinmancode bruh
I found all of these to be really easy if you take a second to look them over at the start. The last task was a centered square with 4 squares inside, each square then has a :before inserted in them (as you did) that displays half a circle, and then using the :nth-child selector you'd turn them around as needed... most often, any CSS problem is fixed by that kind of initial thinking and not figuring it out as you go, because if you get stuck you either/often fall into the sunk cost fallacy, or have to redo it all anyway...
positioning is the biggiest issue followed by the shapes for all the battles, centered images occur the most and you the normal centering tricks to get those positions then work on the shapes.
Man, this was a blast to watch!
u too
This is really fun to watch apart from the mic issue of Frank. I love battles especially when Kevin does typoes and pissed off :p --ps:You are the King Kevin. There is nothing convince me otherwise
Nothing against Frank but for me Kevin is always the best.
As somebody who is just starting out with TOP, I understand alot of what happened through the episode (of course not all the definitions) but seeing it come to life was like a lesson in itself, and actually really fun to watch, thanks!
Cool battle.Learnt some things 😃.
Good to see that even fully fledged front end devs sometimes wonder about weird behaviours
Man, i'm in so much of awe of how fast you go through these. Incredible.
17:39 This is how I always end up when working with CSS 😂
22:20 the semicolon reveal, is being a developer to a T, I feel so seen
Woooow...Kevin is a monster. How he used those pseodo-elements in 3rd challenge in order to cut those circles. He is very talented in my opinion. Thx for the great battle! Had a lot of fun. 😅
great watch, guys... more of this, Kevin, please! thank you sir.
For the first one an element of the size of the circle with appropriate border-width and border-radius along with border-left-color and border-right-color: transparent would give the desired effect. Then just rotate -45deg with transform.
That look on your face after the second challenge, priceless. I know the feeling when messing up with a typo.
Thanks Kevin,
I had also tried the lock up challenge, and would love to share my approach...
I do this stuff, by keeping only the top and bottom border as yellow color and rotating it to - 135deg...
This will save some extra line of code in our css..
Fwiw, y'all should have tried using `border-left-color: transparent`, `border-right-color: transparent`, & `transform: rotate(45deg)` on the inner circle, with a chunky border.
Exactly what I thought. This works like a charm. I got a score of 607 for this solution, which is pretty decent I guess.
To solve the issue of the first problem, the one they solved by overflow hidden, I put a circle above that region , and used a box shadow. I made the circle color transparent, and the box shadow was yellowish like the background. This helped hide the bit of the box that was getting out of the circle.
Round one where everything works and look perfect, but the program deducts points for your choice of code. That is how my teachers would grade me. I learn a lot watching someone else code, mostly because I know barely anything about css. It is super nice to see how someone else thinks through the problem.
In the third challenge, what I think would be a better approach is to make two halfs of the circle on one color, and positioning it, then duplicating it and applying rotation to make them go the other way & chang the color
The semicolon after freakin z index dude...
Thank you both of you for participation and sharing that with us!
Superb ...kevin and Frank.👍
Need more battle content keep it up! Hella fun to watch
Interesting fact, if you using border-radius and need to get only two of visible borders like in the first battle you just can make other two transparent and it will work
1st one was very easy all we needed was a div which is purple located in the center and we needed border with different colors for 4 sides as well as border-radius after all we needed box-shadow with purple it would take like 3 minutes max but great video thank you.
22:18 That site should have a CSS linter for situations like this. 🤦♂
Just some better syntax highlighting would make me so happy 😂
Totally. I think that's a feature when you have a paid account
Those half circles can be archived with gradient background. I think it's a more elegant solution.
These are great. I like pausing the video and trying to solve the challenges myself (with unlimited time hehe).
Pls pls make more challenges of like this , they are really awesome 😎
Thanks for exposing me to CSS battles! Will definitely keep me busy
I played along and was surprised at how well I did. Maybe there's a css showdown in our future, should I ever become a patron >:)
That was great! Different approach the same result!
thank you very much for this video, I have a learned a lot. it seems to be flex is going to be preferable technology for the web layouts :)
I duuno whether I'm over simplifying things, but for the last challenge why not just have four boxes ('outer' as two rows of two) positioned 'absolute' and an overflow of 'hidden', within each place another nested box inside each ('inner', also positioned as 'absolute') and apply a border-radius, then position 50% either left, right, top or bottom (depending on the direction and the inner shape) so half the div will be filled and the other hidden. Either way brilliant to watch!
For the first challenge I feel like maybe you could use a yellow border on the center circle, but only on the bottom and top side, then rotate it 45°. I haven't tried it personally though
This was great fun to watch, even though I was screaming at my monitor about the z-index semicolon!
For the 1st object in the Inner Circle you could have used border top bottom radius as transparent and then use rotate property.....
That z-index issue you had there; I have that all the time as well.
Kevin is to smart and is using not ordinary ways thus getting punished :D. And pro tip always use 100% browser scale
border radius 100% no border left and right, rotation 45deg
I don't even know css... but this was really fun! Going to try to create a website with CSS and JS once I finish my Flutter project
The other guy sounds like a robot sinking in the ocean
17:32 O no you put a semicolon instead on colon in line 27 that is why it is now working.
This is so much fun, thank you Kevin.
I tried the first challenge by myself - you can do it with just 2 DIVs. Make the second one without background-color - use border only
Battle #2 took me 11min :) It's so fun to challenge myself with you :)
Purely HECKED by a semi-colon; the real struggle LOL
15:16 I think you could also just provide multiple entries for box-shadow, but I think you'd need a bunch of them to avoid having a kind of "caterpillar" effect. The div is probably the way to go.
It’s my Fav series!
5:00
It’s simple, man))
body{
background:#000;
}
.outer{
display:flex;
align-items:center;
justify-content:center;
width:100px;
height:100px;
background:#f2f2f2;
border-radius:50%;
}
.inner{
width:30px;
height:30px;
background:#f2f2f2;
border-top:15px solid black;
border-bottom:15px solid black;
border-left:15px solid #f2f2f2;
border-right:15px solid #f2f2f2;
border-radius:50%;
transform:rotate(45deg);
}
This was awesome, great tool.
It's actually nice to see the experts fumble a bit 😃
Man that z-index; -1; typo sent me wild. Never yelled at a screen before.
Kevin always picks the hardest solutions
I've been coding emails too long..... this looks much more fun!
Oh my goth, random stranger, I really feel for you.
Ive just done the challenge and i used outer div, and inner div, and used border-top-color, border-bottom-color, and a border of 15px solid tranparent, then used roate of 45deg.
for the inner div to make the two yellow sections
1st Battle is actually simpler than I thought, Linear gradient does the job very easily.
Best battle ever, love it!
First one I had to pause and try myself. Ended up using clip-path: polygon() to individually shape the boxes within the outer circle. Def should've just made my square's smaller and align them more towards the center of the circle instead of keeping them big and over engineering the problem.
My idea about #27 is only one div with border + shadow for the 3 layers border top and bottom transparent and rotate at 135deg
frank's border radius idea was my first approach. I was horrified seeing Kevin choose another path.
yeah the semicolon on the z-index is funny :D
Battle #1
-100% match
body {
display: grid;
place-items: center;
background: #E38F66;
}
div {
width: 200px;
height: 200px;
background: #AA445F;
border-radius: 50%;
display: grid;
place-items: center;
}
span {
height: 80px;
width: 80px;
border-radius: 50%;
border: 30px solid #F7EC7D;
border-right-color: #AA445F;
border-left-color: #AA445F;
transform: rotate(45deg)
}
👍🏻 better
This was so nice!
the second I saw z-index; -1
I was like, damn, I'm gonna be screaming at my screen for a while
yayy!!
Battle 1 : Couldn't you use a dashed border for the small circle ?
yep, i stayed through the whole video like i totally understood everything.
Frank needs a new microphone. LOL!
Oh my! That was so dope! 😍
26:04 Lol that oww hit hard
Yo dude is so fast and I am impressed.
I swear i had been looking at that semicolon and just waiting for you to find out 😭