CSS Battle #19 - live coding challenge
HTML-код
- Опубликовано: 17 окт 2022
- ✅ CSS Battle #19 - cssbattle.dev/battle/19
👨🎓 Get a course: www.kevinpowell.co/courses
✅ State of CSS survey - survey.devographics.com/surve...
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Thank you for you and your channel! You were the reason I quit my old job and attended a bootcamp 👍🏻 Mega ☘️
We need an "ughhh Kevvvvinnn" tshirt 😂its so endearing .
Also a "that mucked it" coffee cup
I made the border and rotated it inside of another div. then squished that parent with scaleY. the parent div is also easier to place absolutely since it itself is not rotated
Hey man, love your content. just wanted to point out that you could have done the first challenge using a grid with one parent and 10 direct children and then position the last 3 elements which would have cleaner!
.grid {
display: grid;
grid-template-columns: repeat(4, 40px);
gap: .25rem;
}
.grid > * {
width: 40px;
aspect-ratio: 1;
background: blue;
border-radius: 50%;
}
.grid > :nth-child(8) {
grid-row: 3;
}
.grid > :nth-child(9) {
grid-row: 3;
grid-column: 2;
}
.grid > :nth-child(10) {
grid-row: 4;
}
Keep up the good work brother!
Also , love these css battle videos. Cant wait for a new one! The halloween battles have been a little challenging. The cat esp gave me issues, could not get the eyes correct!!!
Great CSS battle!
it is interesting to see how your thought process works as you work through the problems.
Thanks for sharing.
loved the stream as a vod
my approach for the second battle
602 (556 chars)
I did use the position absolute and with the i variable and simple math with calc i have been able to score 100% in 13 mins.
the way how i'm using both translate and transform translate is a bit sketchy and with a bit more time i'd do it differently but im quite proud of myself xd
i first align it in the center, then tilt it and after that offset it with the second transform. that way all did was changing the rotation. fortunately i was in luck :D
body {
background: #D25B70
}
.ln {
position:absolute;
left:50%;
top:65%;
translate: -50%;
rotate:calc(30deg*var(--i));
transform:translate(-70px,0px);
border-radius:50px;
width: 100px;
height: 10px;
background: #F2E09F;
}
you just need to assume that there is an invisible 20px radius circle at the bottom and set the transform-origin to 120px center and you could have made it with only rotation css. Other than that, good thinking mate!
Enjoyed the stream! Thanks for sharing.
I am also in Canada 🇨🇦 and has been doing a lot of cold
My solution to the second battle with using display: absolute, transform-origin and rotate:
body { background-color: #D25B70; position: relative;}
div {
position: absolute;
translate: 36px 93.5px;
}
div div {
position: absolute;
width: 100px;
height: 10px;
border-radius: 100vh;
background: #F2E09F;
transform-origin: 120px center;
}
.b {
rotate: 30deg;
}
.c {
rotate: 60deg;
}
.d {
rotate: 90deg;
}
.e {
rotate: 120deg;
}
.f {
rotate: 150deg;
}
.g {
rotate: 180deg;
}
yeah... that's what I was thinking I'd be able to do and just failed miserably, lol. Nice stuff :D
I made styles much shorter by nesting divs. You can watch it on my channel.
@@KevinPowell I'm so impressed seeing you do all that live in front of countless people and recording simultaneously. Only imagining me in that situation makes me wanna run away. Keep up the fantastic work. I love your content.
My solution is similar, except for the main div:
body{background: #D25B70;}
.bar {
position: absolute;
margin: 187px 72px;
width: 100px;
height: 10px;
border-radius: 5px;
transform-origin: 120px center;
background: #F2E09F;
}
.b {
rotate: 30deg;
}
(...)
thx for the video
Bro is next level CSS wizard
Kevin, can you please do some tutorials on Using Forms to input radio buttons that act more like tabs- being able to do display:none to create tabs through CSS with no java, in order to create somewhat of a clickable/hidden profile page with nothing but HTML and css using radio buttons, check boxes, ect. I can only find really terrible tutorials out there for Radio Buttons and Checkboxes to make non-javascript toggleable layouts for Tabs
I need this because there is TONS Of websites that DO NOT ALLOW Javascript or even Iframe. So we can only use Checkbox / radio hacking, can you please do a tutorial on it?
I know how to do the first one with 1 div, thinking outside of the “box” is the key.
You rock
Hey Kevin, thanks for putting out so mush amazing videos. I need your opinion. Do you think container queries will eventually replace css frameworks like bootstrap?
Replace? No. I do think as CSS gains new features that are harder to "generalize", libraries and frameworks will start to feel more and more limiting though. We're already seeing it with grid, and with things like :has(), container queries, style queries (on the way), and more, it'll only create a bigger gap
nice
Hope you get better from the covid!
I think that CSS battles are boring after you've seen a few. I'd like to see you do some JavaScript/CSS battles, that would be a bit more practical.
can you make a tut on text-wrap property and is using text-wrap:pretty; a good idea and where how to use.