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.
@rockokaine3186
Жыл бұрын
Knowing how knowledgeable he is I find his struggles to complete some of these comforting
@cristianzwierzynski1305
Жыл бұрын
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.
@stbausms
Жыл бұрын
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!!
@d.l.3807
Жыл бұрын
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. :)
@MsAnnieHuang
Жыл бұрын
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.
@BunkerD
Жыл бұрын
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).
@julesfadel
Ай бұрын
now i'm @ 1:02:36 and i'm crying of laughter 🤣
@ahmedkhabar
Жыл бұрын
9:49 In this moment, just do border-color: #d9d9d9 #d9d9d9 transparent transparent;
@AnmAtAnm
Жыл бұрын
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.
@hussein-alemam
Жыл бұрын
agreeee
@adamisonfiree
11 ай бұрын
These videos are so awesome, I'm learning CSS and I saw that and i was like BLACK BLACK!
@GabrielMolterIO
10 ай бұрын
Scrolled down here to look for this comment and it was the first one I saw 😅
@oruaromukoro5072
Жыл бұрын
Couldn’t you have done border: black transparent transparent black; for the second challenge
@KevalMiistry
Жыл бұрын
Nice noticing but it will be: black black transparent transparent
@fraaank
Жыл бұрын
@@KevalMiistry I was shouting this at the screen. 🙂
@KevalMiistry
Жыл бұрын
@@fraaank Honestly Mee too man! 😭 I was like how the hell this person The Kevin Powel can't see what I'm seeing
@royhyde8842
Жыл бұрын
@@fraaank hahahaha Same...
@UPLYNXED
Жыл бұрын
You can use #0000 for transparent fyi
@simonjohn7259
Жыл бұрын
Challenge 4 - The leaf shapes are actually just squares with border radius on opposite corners. Just rotate them.
@iamavegetable1936
Жыл бұрын
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!!!
@clevermissfox
Жыл бұрын
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 😂
@AThousandTales
Жыл бұрын
For the spiral challenge, I used clip-path:polygon(0px 0px, 0px 50%, 100% 50%, 100% 0%); instead of a pseudo-element.
@alekz112
9 ай бұрын
Real ones use clip-path: path()
@casesensitive9744
Жыл бұрын
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.
@adamuk73
Жыл бұрын
You know it's a toughie when KP has frazzled hair at the end.
@programingwithali2461
Жыл бұрын
Long time ago I good in css battle now I good but before is better
@fagol1236
Жыл бұрын
23:33 you could have done the #elbow challenge with just 2 divs and tweaking the border radius for four corners
@prafuldeoghare1904
10 ай бұрын
maybe with a one div. we can pseudo element like :before and :after.
@catalinbanici3357
Жыл бұрын
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 ..? 🤔
@thoresommerfeld6962
Жыл бұрын
.T-Shirt {padding:10% ! important;} 😊
@KevinPowell
Жыл бұрын
😂😂
@MixbOOsted
Жыл бұрын
lmao
@CristianKirk
Жыл бұрын
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.
@youtubeforcinghandlessucks
10 ай бұрын
no pseudo element, could just set border-bottom and border-right to 0px
@axelkarlsson6580
8 ай бұрын
Can also be done with one div and border on top and left only
@HenriqueErzinger
2 ай бұрын
@@axelkarlsson6580nope, for the same reason the triangle thing works. The junction between borders is a diagonal.
@CodeCraftStudio
Жыл бұрын
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. 😂
@VeitLehmann
Жыл бұрын
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??
@ColeNOXyd2nd
Жыл бұрын
#138 can easily be done with corner radius on 2 corners x 3, rotate the white one
@nbot3000
Жыл бұрын
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.
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
@jfftck
Жыл бұрын
The spiral can be made using box-shadow and a lot of them, that would allow for a single div to draw it.
@XanderStoot
Жыл бұрын
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 }
@casesensitive9744
Жыл бұрын
Kevin Powel please you can use border for some sides and leave the other sides. I see Its seems you don't know that is possible. Because only be covering the other sides with pseudos. Even with the elbow. You could had done $ border-left: 1rem; border-top: 1rem; border-radius: 1rem 0; or even shadow
@JulianColeman03
Жыл бұрын
I will never not hear "Hello my friend and friend". This challenge was nuts! Lots of good learnings
@lifeisfakenews
Жыл бұрын
SAME i only recently realised he was saying front end friends not friend and friends
@clevermissfox
Жыл бұрын
Same, thought it was friemd and friends 😂
@jfftck
Жыл бұрын
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.
@widevader
Жыл бұрын
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.
@Acaykath
Жыл бұрын
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.
@JlHAD
Жыл бұрын
44:10 for the fourth challenge you can get the results with: border-radius: 100% 0; rotate: -45deg;
@grugbrain
Жыл бұрын
This is both painful and amazing.
@Im-mustafa-saeed
Жыл бұрын
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
@Pixcellworld
Жыл бұрын
For the 44:28 you should of done it with squares. Giving diagonal corners a radius of 100% then rotating it.
@eldrago3140
Жыл бұрын
Your videos are the best 😊. Can you please make a video on drag and drop?
@ChrisMochinskiMusic
Жыл бұрын
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!).
@fagol1236
Жыл бұрын
10:00 border: black black transparent transparent; I was screaming😭😭
@百さん-x6v
Жыл бұрын
background-voice : dog;
@VeitLehmann
Жыл бұрын
Just solved the spiral at 100% with 475 characters in about 1 hour, now let's see how you did it!
@ako1129
Жыл бұрын
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?
@_abdul
Жыл бұрын
1:02:20 That Imposter Syndrome Kicking In.
@dirkczaja7227
Жыл бұрын
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
@NathanHedglin
Жыл бұрын
Love it! I was just showing my students the spiral one
@markthepianist6577
Жыл бұрын
There was a cleaner and hackier way to do the elbow Container div with overflow hidden + enormous rounded rectangle :)
@JDalmasca
Жыл бұрын
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.
@NenadoDyadya6
Жыл бұрын
Kevin the last one was really amazing i really love your work. Man you are legend of CSS
@simonswiss
8 ай бұрын
OMG I had *never* noticed the "Diff" checkbox that gives you the "x-ray vision" - so useful when you try pixel push a value 😅
@beresteanugeorge
Жыл бұрын
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% )
@chrisbolson
Жыл бұрын
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;
@nekocari
Жыл бұрын
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.
@Queue88
Жыл бұрын
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.
@BlockCylinder
Жыл бұрын
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.
@zaidyt8565
8 ай бұрын
cool content man😎 keep the css battle series alive. can learn a lot of things from this🤯
@elmalleable
Жыл бұрын
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
@SEWebDesign
Жыл бұрын
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.
@julesfadel
Ай бұрын
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😁
Hello, I did this on challenge 4 and it was a 100% match. Though its still a lot of codes. body{ display:flex; align-items:center; justify-content:center; background:#926927; } #a{ position:relative; width:200px; height:140px; } .b { position:absolute; width: 100px; height: 100px; background: #6D480A; border-radius: 200px 0; bottom:0; } .c{ right:0; } .d{ left:0; rotate:90deg; } .e{ background:#FFFFFF; rotate:-45deg; left:50px; bottom:20px; }
I'd love to see an episode of this where you do an unoptimised solution speedrun
@AndrewMolodushko
10 ай бұрын
Kevin, thanks for your video. challenge 4. width:100, height:100, border-radius:100 0 100, rotate -45deg :)
@finnalandem
7 ай бұрын
These battles are cool with what you can do with CSS, but you'd never actually do that in the real world. You'd design a logo or something of the sort in another program, then import it. This is really just `fun exercises`. So other than fun, I don't see a point in doing them other than to showcase your knowledge of CSS. Am I missing something?
@glinda_rose
2 ай бұрын
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.
@andylunatic3174
10 ай бұрын
I solved 134 using -webkit-box-reflect property. My solution was 144 chars totally so I'm happy for that😊😊
@PowerfulJayKay
5 ай бұрын
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.
@_tanzil_
Жыл бұрын
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 😄
@mellowmarvin
Жыл бұрын
What a great Video! As always :) Thank you!
@MrKOHKyPEHT
Жыл бұрын
OMG that spiral.... Jigsaw )) My solution: screenshot and background-image :D
@Memer09157
6 ай бұрын
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..
@XeonXR6
8 ай бұрын
Shouting at the screen on challenge 2.... board black black trans trans!!!!!111!1!!111
@necastiv11
7 ай бұрын
You have great skill, but these should be SVG icons. Please make some courses with SVG-s?
@MdFaruk-jp4zq
Жыл бұрын
My dear teacher... take my love, I am finishing your html and css beginners tutorial now which of your tutorials is better to do please tell me
@Renegade192
8 ай бұрын
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?
@haythamkenway1561
Жыл бұрын
Great video CSS king. I wonder if there's `JavaScript` battle or not.
@UPLYNXED
Жыл бұрын
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
@dharmendrasiddhpura969
Жыл бұрын
Hey kevin can you pls give me your github account link as I wanna built a web on the teachers who teached me. And in footer I want the link ,thats y
@bernardoramalhete8015
Жыл бұрын
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.
@bernardoramalhete8015
Жыл бұрын
I commented before watching the last challenge. I laughet out loud when you discovered the border thing
@andradegilmar
Жыл бұрын
This spiral was crazy!
@yassinezanina
6 ай бұрын
And here is me screaming at the screen from the top of my lungs black black transparent transparent 🤣🤣
@gamertag8721
Жыл бұрын
me at 13m min mark yelling border-color: black black transparent transparent 🤣
@Debargha16
Жыл бұрын
You could had used mix-blend-mode in that flower type problem
@edwinandrescollazos4258
Жыл бұрын
I love CSS battle videos!!
@issussov
11 ай бұрын
Looking at 36:00, aren't this 2 circles with same radius intersecting?
@ComeCaramelos_
Жыл бұрын
border-color: black black transparent transparent; =) Nice video
@razor-4eg
4 ай бұрын
1:03:15 - screaming in my head - border-bottom, border-bottom, border-bottom
@MeekoEdits
Жыл бұрын
how do people get that spiral down to 160 characters? O.o the lowest I got was 339
@rodbrowning
Жыл бұрын
1:15:43 I thought it was just me struggling like that huashuashuas. looks like Im not alone.
@lingonsylten
7 ай бұрын
9:50 all i did was color color transparent transparent and i got 100%
@PunkSage
10 ай бұрын
You will be much quicker with scaleX(-1)
@IntothePastwithAI-zk3bu
7 ай бұрын
9:52 border-color: black black transparent transparent'
@charliesretrocomputing
Жыл бұрын
Is “html battle” a thing? I suck at css but I am pretty good at html
@the_BetaDev
Жыл бұрын
I used clip-path with challenge 2 (battle 22).
@marsovac
7 ай бұрын
You can speedrun these with SVG :D
@svetsec
Жыл бұрын
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?
@svetsec
Жыл бұрын
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?
Пікірлер: 170