Am I Good Enough To Solve These CSS Battles?

In this video I attempt to solve multiple CSS Battles live. This is a great video for seeing my thought process when tackling complex CSS problems.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:47 - Battle #1
17:50 - Battle #2

#CSSBattle #WDS #CSS

[jfftck]

You can do the Deadpool with one div, ::before, ::after, border, and linear-gradient; it shouldn’t take so many elements, plus it would be easy to insert multiple copies on a page.

[Dariansweb]

cool man i did not even know there was a css battle page. that was lots of fun, thanks brother.

[gregtasi]

I'm really glad you are making a video like this again! I love CSSBattle! :D

[zackfoster]

This was a lot of fun. Especially doing it differently and still getting a good result. I only created one circle for the black circles and simply worked with gradients to color the middle red. this is the class for the div

(note that i only looked at the video, the size might be a bit off cause i couldn't compare exactly)

.black-circle {
background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(159, 51, 51, 1) 40%, rgba(159, 51, 51, 1) 60%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
height: 166px;
width: 166px;
border-radius: 100%;
position: absolute;
top: 50%;
left: 17px;
translate: 0 -50%;
}

[ar-jun]

Lets try making a circle with bg black border 5px solid red and border radius 50%

Add before and after element for eyes and place a absolute div for the middle line

[programmingpillars]

wow, im stunned how big this channel became ..

[brendenwardle]

good video you have one of the best channels for css

[kopilkaiser]

You are the best in explaining complex CSS 😁

[harag]

Not bad... but it would be better if they would be scalable so not to use px settings so at the size defined it matches, but change the resolution and it should still look the same.

[AJCrowley]

Would have been a golden opportunity to explorer content-box and border-box to control your overflows.

[pratikthorat]

Hey this is amazing video. But honestly, I am not sure if I can use these techniques to debug how to have a hairstyle like you. 😢

[dand]

Love your stuff Kyle, just feels like you and Kevin Powell need another match... 🤪

[VeitLehmann]

The fun really starts when you try to get the character count down. Sure, you'll end up with crazy hacks, but it's addictive, and there's no way back! I got #204 down to 223 characters (and hope to improve it still, it's an ongoing battle), and #198 down to 195 characters😁

You will also learn a lot, even if you might only use 5% of your learnings in production code.

[kevinbatdorf]

would love to see the first one done by hand as an svg

[binodgurung]

A circle with linear gradient and border with before after I guess...

[kuzestudio]

Always love your content but the deadpool solution makes me cry 😂

[AmandeepSingh-sxke]

Please bring some advanced projects on pure javascript

[Dorgrident]

Your version is very unstable.
1. Use a border. or set the inner circle to inset: 0 and then use a margin to maintain the ratios.
2. Position everything in relation to each other. if stuff is not 100% center, still set it to 50%, and then use calc to move it a few pixels up or down.
3. User clippath to cut the circles in half.
4. copy your left half and use scaleX(-1) to create an exact mirrored copy of your left half.

[GoldenMechaTiger]

Would you actually try to make things like this using css in the real world? Would you not just use an image here?

[yvng]

Guys do not log into Css Battles or else you cant delete your account.