Tok124 (CSS Nerd) Comments - Answer Overflow

Tok124 (CSS Nerd)

•Created by Samson Ameh on 11/14/2024 in #front-end

What approach can I use to achieve this using tailwindcss in my react project?

Kevin has already made a video about this https://www.youtube.com/watch?v=khjVPkO35F0 If you have experience with tailwind you should be able to follow along even if you use tailwind

3 replies

KPCKevin Powell - Community

•Created by ℳ𝒽𝓮𝓮𝓉𝓾 ✔ on 11/12/2024 in #front-end

Radial Progressbar w/Rounded Square Caps?

inkscape is great tool for svg

11 replies

KPCKevin Powell - Community

•Created by ℳ𝒽𝓮𝓮𝓉𝓾 ✔ on 11/12/2024 in #front-end

Radial Progressbar w/Rounded Square Caps?

Yeah, i believe SVG is the best option here

11 replies

KPCKevin Powell - Community

•Created by ℳ𝒽𝓮𝓮𝓉𝓾 ✔ on 11/12/2024 in #front-end

Radial Progressbar w/Rounded Square Caps?

you can make a pseudo element for like a start cap and end cap. So you can round the corners on the pseudo elements. Or you can make it full rounded. then you can just use a radial-gradient. I did something like that here https://codepen.io/tok124/pen/NWQjrJq

11 replies

KPCKevin Powell - Community

•Created by Faker on 11/7/2024 in #front-end

How to make varying labels width and input-fields take same horizontal space

Yeah hahaha 😂 That's far worse honestly xD

74 replies

KPCKevin Powell - Community

•Created by Faker on 11/7/2024 in #front-end

How to make varying labels width and input-fields take same horizontal space

haha

74 replies

KPCKevin Powell - Community

•Created by Faker on 11/7/2024 in #front-end

How to make varying labels width and input-fields take same horizontal space

They must be using a very strange browser in this case. I have never seen any browser that applies a padding to body. But well, I have not tried every single browser out there. But most of them is just based of chromium so yeah... Most of them are basicly the same

74 replies

KPCKevin Powell - Community

•Created by Faker on 11/7/2024 in #front-end

How to make varying labels width and input-fields take same horizontal space

I also see a lot of people doing something like

body {
  margin:0;
  padding:0;
}

body {
  margin:0;
  padding:0;
}

Like seriously... Come on ! Why would you do that. Body does not even have a default padding in the first place. Why would you set padding to 0 when body doesnt have a padding xD hahaha

74 replies

KPCKevin Powell - Community

•Created by Faker on 11/7/2024 in #front-end

How to make varying labels width and input-fields take same horizontal space

You can use margin:0; on body, thats fine

74 replies

KPCKevin Powell - Community

•Created by Faker on 11/7/2024 in #front-end

How to make varying labels width and input-fields take same horizontal space

What i have done is to take CSS Reset from Meyerweb and then i have customized it to my own preference. And added some additional stuff. But it resets some user agent styles

74 replies

KPCKevin Powell - Community

•Created by Faker on 11/7/2024 in #front-end

How to make varying labels width and input-fields take same horizontal space

I agree on that, but it was not added by Zeshan, it was in Faker's original codepen. I would much rather use a CSS Reset

74 replies

KPCKevin Powell - Community

•Created by Faker on 11/7/2024 in #front-end

How to make varying labels width and input-fields take same horizontal space

i would rather do grid-template-columns:auto 1fr; So the first columns width is based on the width of the label with the most text. And for button i would rather do grid-column:1/-1; so it will always span full width no matter how many columns you have

74 replies

KPCKevin Powell - Community

•Created by Faker on 11/3/2024 in #front-end

What is the difference between using aspect-ratio and setting width: 100% and height: 100%

Btw, if you really wanna know all about aspect ratio, you can read the wiki post about aspect ratio https://en.wikipedia.org/wiki/Aspect_ratio_(image) Yeah, that's not CSS Related. But it works the same as it does in CSS. So if you just understand how aspect ratio works, you understand what it does in CSS

4 replies

KPCKevin Powell - Community

•Created by Faker on 11/3/2024 in #front-end

What is the difference between using aspect-ratio and setting width: 100% and height: 100%

Hopefully this helps to explain aspect ratio. You can see at first a have a fixed height of 700px. As screen gets smaller, the width of element gets smaller, but the height remains the same. but when we use aspect-ratio property. the height changes as the box gets smaller to always maintain the same aspect ratio

4 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/11/2024 in #front-end

animation with gradiants

No problem 🙂

9 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/11/2024 in #front-end

animation with gradiants

Btw, if you want multiple radial-gradients that spins around a circular path, you can do this https://codepen.io/tok124/pen/rNXwqBK Still no pseudo element. Just a single div with multiple radial-gradients

9 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/11/2024 in #front-end

animation with gradiants

@R.I.P https://codepen.io/tok124/pen/MWNoqOm Here you have a rotating radial gradient. No rotating pseudo element or anything like that here. Just a single div with a ball that spins around a circular path inside the element

9 replies

KPCKevin Powell - Community

•Created by R.I.P on 10/11/2024 in #front-end

relative div and button

37 replies

KPCKevin Powell - Community

•Created by Muhammad Awais on 10/6/2024 in #front-end

Issue With Layout

You cannot span 1.5

8 replies

KPCKevin Powell - Community

•Created by clevermissfox on 10/4/2024 in #front-end

Gradient Border Animation

and no problem 🙂

40 replies

Gaming

Programming