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.
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%; }
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
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.
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.
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.
@@ptung90 Which one are you talking about? Let's take #198 as an example: - Remove as much white-space as possible - You can use different units like %, vw, vh, em, ch, in, cm, q etc. - For some properties, especially old ones like margin, padding, width, height, you can omit the units and just put numbers to define pixel values - Use the * selector, and also nest it - Don't write out html and body, they're implicitly there - Use custom properties for repeating things You can also check the solutions of the daily targets to learn all the tricks
@@ithelp-cm5bi That's awesome, almost top 100, keep going! I'm playing this for more than a year already, and over time, you get better and better. So now I'm trying to get into the top 10. I have tried a couple of approaches for this target already, but I have no clue how on earth this can be brought down to less than 200 characters... And I am a front-end dev for more than 20 years now.
The thing about css battles is not that you'll use what you actually do, like the deadpool face. It's more about building confidence to analyze a structure and being able to replicate it. Developing knowledge and learning new css properties along the way is also great
@@GoldenMechaTiger doing a complex little deadpool face can be broken down into steps. Aligning absolute elements, making half a circle, morphing elements along the x and y axis, etc. Are things that you will use in any project
no need to position absolute on the second battle. this is a flex element width skewed divs. incase there are more elements coming in the future, you should not call the elements "element-1,2,3,4,5" and so on, but work with nth-child.
if i need to create a half circle. i always do `border-radius: 0 0 100vw 100vw;` and it automatically turns the border radius to pill shape. and i dont have to play around and guess the px values.
@@justineawunudo1005 No. it's when he's generally talking, not looking at screens. I find it distracting quite a bit, but there isn't anything he can do about it. it's like a nervous twitch or something.
I Love your videos - but dude you need to make things a bit more exciting in your voice and tone ( I realise thats your style, but sometimes I drop off asleep listening along) - There's plenty of UA-cam tutorials on improving your speaking voice, and articulation and to keep the learners attention/retention.
He trying he's best And besides it doesn't even matter, as long as what he's explaining is understood perfectly your opinion on his voice and style is basically invalid 😒
So you don’t love his videos. Criticism, why must he change to accommodate your needs? This style of thinking continues to grow demand on a person until an inevitable breaking point, an unnecessary and unpleasant burden on someone else in exchange for self-interest.
@@redx001-xxx Not complaining at all - Im providng valuable feedback. How else would the presenter learn to why x-amount of the audience disappear or fall asleep. It's knee jerk reactions that anything other than a "WOO ARESOME" is seen as trolling or being a mean ole dude. When in fact, with a bit of healthy honest feedback helps others learn.
@@paulwright4535 yes, valuable feedback indeed Like telling him his videos make ppl sleep isn't hard enough to be labeled criticism or just straight up bullying but I'm the troll, So much for being a jobless cyber bully😒 Better crawl back into that basement you live it at ur parents house👋
cool man i did not even know there was a css battle page. that was lots of fun, thanks brother.
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.
Thanks. I missed the linear-gradient, rest was as I implemented.
I'm really glad you are making a video like this again! I love CSSBattle! :D
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%;
}
wow , im stunned how big this channel became ..
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
Nice!
We want rematch with Kevin 😂😂
😂😂
good video you have one of the best channels for css
Great video brother.
Obviously 😂
Obviously 😂
You are the best in explaining complex CSS 😁
This was a really fun video.
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.
Would have been a golden opportunity to explorer content-box and border-box to control your overflows.
A circle with linear gradient and border with before after I guess...
Great kyle bravo
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. 😢
He has a hair tutorial available... Check the channel
@@atemrandyasong5710 thanks
would love to see the first one done by hand as an svg
Always love your content but the deadpool solution makes me cry 😂
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.
Love your stuff Kyle, just feels like you and Kevin Powell need another match... 🤪
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.
It's really crazy, I've tried everything but can only get 508 characters. What tricks do you usually use?
@@ptung90 Which one are you talking about? Let's take #198 as an example:
- Remove as much white-space as possible
- You can use different units like %, vw, vh, em, ch, in, cm, q etc.
- For some properties, especially old ones like margin, padding, width, height, you can omit the units and just put numbers to define pixel values
- Use the * selector, and also nest it
- Don't write out html and body, they're implicitly there
- Use custom properties for repeating things
You can also check the solutions of the daily targets to learn all the tricks
i have 480 characters with #204, and i have no idea what to improve. But i'm not front-end dev.
@@ithelp-cm5bi That's awesome, almost top 100, keep going! I'm playing this for more than a year already, and over time, you get better and better. So now I'm trying to get into the top 10. I have tried a couple of approaches for this target already, but I have no clue how on earth this can be brought down to less than 200 characters... And I am a front-end dev for more than 20 years now.
Would you actually try to make things like this using css in the real world? Would you not just use an image here?
The thing about css battles is not that you'll use what you actually do, like the deadpool face. It's more about building confidence to analyze a structure and being able to replicate it. Developing knowledge and learning new css properties along the way is also great
@@kresuu3567 But the knowledge won't be very useful if you're never making these complex icons using css in the real world
@@GoldenMechaTiger doing a complex little deadpool face can be broken down into steps. Aligning absolute elements, making half a circle, morphing elements along the x and y axis, etc. Are things that you will use in any project
26.5, Kyle :)
Guys do not log into Css Battles or else you cant delete your account.
Wdym??
@@azusunwr If you change your mind and you want to delete your account, there's no option to delete it. And I'm pretty sure that's illegal.
Why can't just use svg?
It's not allowed in this challenge. In production code, sure, that's what you would probably go for most of the time.
You are lazy 😂
Please bring some advanced projects on pure javascript
Without javascript below video
ua-cam.com/video/SDSbdG09jds/v-deo.html
What Browser is he using?
Arc
Skill issue
😂😂😂
😂😂😂
😂😂😂
😂😂😂
😂😂😂
Now make it responsive 💀
no need to position absolute on the second battle. this is a flex element width skewed divs. incase there are more elements coming in the future, you should not call the elements "element-1,2,3,4,5" and so on, but work with nth-child.
gradients :)
if i need to create a half circle. i always do `border-radius: 0 0 100vw 100vw;` and it automatically turns the border radius to pill shape. and i dont have to play around and guess the px values.
🎉🎉🎉
Hello from 4
if you are not good enough, who is ?
hey why do you shake your head left and right all the time ?
Because he's probably using two screens, one to write code and the other to render the page
@@justineawunudo1005 No. it's when he's generally talking, not looking at screens. I find it distracting quite a bit, but there isn't anything he can do about it. it's like a nervous twitch or something.
Never noticed anything wrong about this channel
it feels like u are soooo frsutrated, and nervous on live...
happy to be first!
CSS people are designers not programmers so idfc
I Love your videos - but dude you need to make things a bit more exciting in your voice and tone ( I realise thats your style, but sometimes I drop off asleep listening along) - There's plenty of UA-cam tutorials on improving your speaking voice, and articulation and to keep the learners attention/retention.
He trying he's best
And besides it doesn't even matter, as long as what he's explaining is understood perfectly your opinion on his voice and style is basically invalid 😒
So you don’t love his videos.
Criticism, why must he change to accommodate your needs? This style of thinking continues to grow demand on a person until an inevitable breaking point, an unnecessary and unpleasant burden on someone else in exchange for self-interest.
@@ibrahimblahblahyapyap tnk you brother
That's my point exactly
Some ppl are just selfish 🧐
Besides he's the only one complaining 😒
@@redx001-xxx Not complaining at all - Im providng valuable feedback. How else would the presenter learn to why x-amount of the audience disappear or fall asleep.
It's knee jerk reactions that anything other than a "WOO ARESOME" is seen as trolling or being a mean ole dude. When in fact, with a bit of healthy honest feedback helps others learn.
@@paulwright4535 yes, valuable feedback indeed
Like telling him his videos make ppl sleep isn't hard enough to be labeled criticism or just straight up bullying but I'm the troll,
So much for being a jobless cyber bully😒
Better crawl back into that basement you live it at ur parents house👋
Хорош 👍