Tok124 (CSS Nerd)
Tok124 (CSS Nerd)
KPCKevin Powell - Community
Created by Helgi on 1/14/2025 in #front-end
how to position arrows
You can replace the ".ciferblat" selector in css with this
.ciferblat {
background-image: url(https://png.pngtree.com/png-clipart/20220705/ourmid/pngtree-clock-face-no-hand-roboto-font-png-image_5683165.png);
background-repeat: no-repeat;
position: relative;
width: min(360px, 100%);
aspect-ratio:1;
position: relative;
}

#arrowForSeconds,
#arrowForHours,
#arrowForMinutes {
position: absolute;
inset:0;
margin:auto;
translate:0 -50%;
}
.ciferblat {
background-image: url(https://png.pngtree.com/png-clipart/20220705/ourmid/pngtree-clock-face-no-hand-roboto-font-png-image_5683165.png);
background-repeat: no-repeat;
position: relative;
width: min(360px, 100%);
aspect-ratio:1;
position: relative;
}

#arrowForSeconds,
#arrowForHours,
#arrowForMinutes {
position: absolute;
inset:0;
margin:auto;
translate:0 -50%;
}
But i don't really see any reason for targeting id's in your CSS, i would recommend giving your "arrows" a class instead. optionally they can keep the id but also give them a class. You should avoid targeting ids in CSS due to the high specificity level, it does not mean you should never do it, but if you do it, you should have a really good reason for it, and i just don't see the reason here in this case.
3 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
Actually, you do win something, you win experience in working with HSL colors because HSL is awesome. by learning how it works, you don't really need to rely on color pickers. So i will use this game to train people to use HSL 🙂 And yeah, oklch is probably a much better color, but i rather use HSL because it is so easy to use, the chroma value on oklch is kinda complicated honestly ^^
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
Thanks for the advice ! 🙂
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
Yupp true 😄
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
Yeah
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
Yeah i could probably do that
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
Aaahh yeah i see what you mean
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
Even if you have opacity, you can still inspect the color in devtools if you just use a regular div. All CSS can be viewed in devtools. So you would need to add a background without using CSS, therefore i used a canvas so i don't add a background using CSS so that there is no way to figure out the color from the devtools. I mean sure... You can still use devtools to figure out the color since the devtools has an eyedropper tool. You can also use extensions to grab the color. no way to make it 100% cheat proof, but using a canvas was the best way that i could possibly find to prevent cheat or at least make it more difficult for anyone who would want to cheat xD
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
No description
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
It was for a game i wanted to make https://codepen.io/tok124/pen/bNbvJqQ
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
The canvas is just going to be filled with a random backgorund color, nothing else
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
I was able to do it without a parent div https://codepen.io/tok124/pen/PwYePQp
44 replies
KPCKevin Powell - Community
Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end
Responsive Canvas in Flexbox Container
I solved the issue myself 🙂 Here is a working example so if anyone ever come across the same issue, you can see here how i managed to solve it 🙂 https://codepen.io/tok124/pen/jENzRJO
44 replies
KPCKevin Powell - Community
Created by Lexi on 1/10/2025 in #front-end
CSS Scalloped Border
Changing the linear-gradient is the only solution i can come up with. It may be possible with clip-path or something else, im not really sure, i rarely use the clip-path property so i don't have a bunch of experience using it. You could also play around with mask-composite that could possibly help.
5 replies
KPCKevin Powell - Community
Created by Lexi on 1/10/2025 in #front-end
CSS Scalloped Border
No description
5 replies
KPCKevin Powell - Community
Created by Lexi on 1/10/2025 in #front-end
CSS Scalloped Border
No description
5 replies
KPCKevin Powell - Community
Created by vic on 1/7/2025 in #front-end
need help with creating marquee type in html css
Have you watched Kevins video about it? https://www.youtube.com/watch?v=iLmBy-HKIAw
3 replies
KPCKevin Powell - Community
Created by Dovah on 12/24/2024 in #front-end
Increment number by holding a button with mouse click or screen tap?
Someone asked me for this very recently so i have a pen ready for this https://codepen.io/tok124/pen/wvVzNrL
28 replies
KPCKevin Powell - Community
Created by noob on 12/24/2024 in #front-end
how to change the default style of selected radio button
But if you just wanna change color for example, you can use the accent-color property
7 replies
KPCKevin Powell - Community
Created by noob on 12/24/2024 in #front-end
how to change the default style of selected radio button
Here is with radio button
7 replies