CSS Battle #19 - live coding challenge

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[carpediem]

Thank you for you and your channel! You were the reason I quit my old job and attended a bootcamp 👍🏻 Mega ☘️

[sknEK_code_chef]

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

[clevermissfox]

We need an "ughhh Kevvvvinnn" tshirt 😂its so endearing .

Also a "that mucked it" coffee cup

[miledaoun]

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!

[clevermissfox]

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!!!

[chrisbolson]

Great CSS battle!  
it is interesting to see how your thought process works as you work through the problems.  
Thanks for sharing.

[Cuwubiq]

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

<div class="ln" style="--i:0;"></div>
<div class="ln" style="--i:1;"></div>
<div class="ln" style="--i:2;"></div>
<div class="ln" style="--i:3;"></div>
<div class="ln" style="--i:4;"></div>
<div class="ln" style="--i:5;"></div>
<div class="ln" style="--i:6;"></div>
<style>
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;
}
</style>

[muisadinam]

My solution to the second battle with using display: absolute, transform-origin and rotate:

<div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
</div>
<style>
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;
}
</style>

[edwinandrescollazos]

I am also in Canada 🇨🇦 and has been doing a lot of cold

[ascourter]

Enjoyed the stream! Thanks for sharing.

[jfftck]

I know how to do the first one with 1 div, thinking outside of the “box” is the key.

[starsandstripesgamer]

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?

[atlantic_love]

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.

[draganaleksic]

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?

[yawpov]

can you make a tut on text-wrap property and is using text-wrap:pretty; a good idea and where how to use.