There's an easy way to do the last challenge. It's just an illusion of having a centre section. 1. Make three circle divs all the same size, one peach, one red and one the same colour as the background. 2. Position the peach and red circles normally so they overlap. 3. Position the background coloured circle inside one of the other circles with overflow hidden and position it so it appears like it's just "peeking" into the other circle.
Really fun to watch you guys solve the problems in your own way! I missed having some kind of follow up at the end where you went through each others’ solutions or maybe just commented quickly on each others’ performance.
@@jpisello i think he actually kicked her ass so badly that it was embarrasing to show the final score were a non familiar css code dude beats the hell up of a css youtube guru.
I actually googled the last round, how to deal with the color at the circle's intersection, and I think it would have actually worked with propperty "mix-blend-mode: #(color-hex);". I was quite surprised it can be done wtih only one line of code :D
Wow that last one was hard!!! I'm going to look into "clip-path" much more now. I love watching these as I have discovered you William, nice one and I have subscribed now - cheers
After watching this I joined CSS battle just for fun. I was totally unaware of this really cool platform! Make more videos like this please! It's fun watching people compete over stuff xd
The clip-path trick makes my day :). It is great to see how 2 people resolve the same problem, it is amazing how different ways of thinking can both solve the same problem. I think in the first round you both did similar, in the second round I liked more Jessica approach, in the last round I liked more William, so that is a Tie for me !!! hahahah. You must another video to define the winner :)
Wow, thanks for these CSSbattles, now as a total beginner I understand that there is no one way how make website. Everyone is a unique writer for its own website 👌 Thanks 🙏
The last one: two divs, with ::after or ::before pseudo code is possible. When you give overflow:hidden to divs and create same width, height, border-radius property based two circles and their pseudo as well.
Very fun to watch. You guys had a harder time with these than I did, but that doesn't mean I didn't learn anything watching. With the last one, you could have used the top of the two overlapping circles as the clipping box for the inner portion.
I would approach these designs almost the same way Jessica did. The way William did it was really interesting to me. Love these video's it really shows there are more ways to do things.
The trick for staying top 10 in these challenges are usually using lots of gradient backgrounds, box-shadows, styling the default available html and body elements (usually with * and * * selectors), all while minifying the code and exploiting some code omissions that still renders the CSS/HTML in a valid way. I've managed to get some very few top 10 spots, but damn the top 3 is hard af. Also, always the same wizards in those positions in all challenges. I remember that there is one person that is consistently on the top that is actually a maintainer of SVGO, so I guess that's where his magic comes from lol. For anyone interested, check the tips section on the site, it's super cool cssbattle.dev/tips/
That was really fun, I liked it. The latest exercise could be easier creating a class to create 3 div circles at once, and use one of them into a relative space of the pink circle (child) to create that middle space between the others two. And of course, the pink circle will have an overflow: hidden property to move the third (dark blue) to the left inside of it. :D
I’ve been struggling to learn web development for a few years now because I would rather be on an interactive environment versus just watching tutorials on the web that I tend to fall asleep to. This was much more entertaining and engaging as well as an awesome display of friendly competition that shows CSS in action as its being written with real time results. Definitely going to be watching more videos!
if you are lazy like me. when making circle divs, I just make the width and height to 1em and make the border-radius to .5em or 50% ( whichever makes you feel good ) and then you make the font size to whatever the size of the circle you want it to be. so you don’t have have to keep on changing the width and height everytime you have to adjust the circle’s size 😁
@@varri0nschannel840 Well, CSS is not a programming language (nor is HTML) so it shouldn't be considered "programming". I guess you can consider it a part of programming, but in itself I wouldn't be able to say so.
@@varri0nschannel840 CSS is not a programming language and calling css programming would be pretty stupid cause the name itself says that it is a cascade style sheet
So I'm learning front-end plus design in the last two years, self-learner...I got finally a contract for the position of technical designer but the focus will be on front-end development. I was a bit scared but after I watch this video I'm fully secure. If I did all of that in 10 minutes with 100% someone with a few years experience should make it a bit faster I guess :D
Wow, they both made that last Venn diagram challenge 10x harder than it needed to be! The gap is just a nested circle clipped instead the other circle with 'overflow: hidden'. body { display: flex; justify-content: center; align-items: center; background-color: #09042A; } .circle { position: relative; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; } .c1 { left: 30px; background-color: #7B3F61; } .c2 { left: -30px; background-color: #E78481; } .c3 { left: -90px; background-color: #09042A; }
I always learn from coder coder but I don't know exactly why. Now after seeing her side by side with other people I fully understand her code is very clean and noobs friendly you can just look at it and have a general understanding of what she's going to do
I've watched a few CSS battle videos now and I can't figure out why people don't do nesting? Maybe it dosnt work? But in the first challange for example there are 4 circles that all could have radius 50% and there are 3 sticks that look identical besides their rotation. Or am I'm missing something here?
10:00 my first thought on this was to use the ❄ emoji behind the circle, but alas, it doesn't map 1:1. Neither does ❊ (too many lines). Could css clip and shape be used to mask away the additional striations 🤔? I wonder
Nice video..you are doing great..since I also run education channel but also love to see other youtuber who are educating people worldwide. Keep the good work 👍
