xilli
KPCKevin Powell - Community
•Created by Philosoph on 10/1/2024 in #front-end
modern Layout
Nice layout but I would give the elements more space (like the nav buttons). According your problem: you could place the background over the whole place and place the lower right button on top to create the effect of the corner radiuses.
This is not the final solution but it could be a good start.
3 replies
KPCKevin Powell - Community
•Created by xilli on 8/6/2024 in #front-end
Custom Radio Button with Animation
Hey. I've found out, that having both ::before and ::after caused some issues at my codepen. One of the Pseude Elements overlapped the other.
I've simplified the example here and it works great: https://codepen.io/maxkuhlmay/pen/xxoLREL
I removed the after Pseudo class and moved the css for changing the background directly to the input, when its checked. I also dont need a cubic bezier to match our figma desings.
Thanks and Cheers 🙂
8 replies
KPCKevin Powell - Community
•Created by Witcher on 8/7/2024 in #front-end
Screen issue
First, try to move box sizing, margin and padding to * {}
If this doesn’t fix it, we have to deep dive into your code.
I would also try to avoid overflow hidden and especially important 🙂
7 replies
KPCKevin Powell - Community
•Created by naewhip on 8/8/2024 in #front-end
Nav issue
How does your index.html look like? What kinda project setup do you have? Native HTML or angular / react?
10 replies
KPCKevin Powell - Community
•Created by xilli on 8/6/2024 in #front-end
Custom Radio Button with Animation
Thanks for the site. It’s awesome.
And Lea Verou is amazing. I’ve met her at the css day 🙂
8 replies
KPCKevin Powell - Community
•Created by xilli on 8/6/2024 in #front-end
Custom Radio Button with Animation
I guess I have to figure that out.
Another problem is: I found a position fixed on my pseudo element. This positions it fixed on the site, not relative inside the input.
When I change to absolute, it’s hidden by the border. Is there any way, to position a pseudo element before the border?
I know, I’m overcomplicating things but we are building a design system and our design team wants us to use all the tokens even if I don’t need them.
I love the first solution but this is not accepted 😦
8 replies
KPCKevin Powell - Community
•Created by xilli on 8/6/2024 in #front-end
Custom Radio Button with Animation
Hey. The first solution was my attempt but our design system uses tokens for background, border color and width, foreground color, and so on.
I have to use those tokens, even if I don’t need them.
In the second example there is a background fading from white to turquoise.
This is missing from the first example and was acchieved by the before.
There is also an animation of the border width.
In the second example there is an after element which has the dot. This increases in size to generate a bouncing effect, which i tried to achieve in the first example with cubic bezier.
It’s complicated, right?
8 replies
KPCKevin Powell - Community
•Created by xilli on 8/6/2024 in #front-end
Custom Radio Button with Animation
Thanks 🙂
The animation in the second example is hard to see.
If you check the radio, there should be an animation of a background from white to turquoise and the border width.
You could set the animation speed to 10% to see it.
I personally didn’t see the animation in Figma but our design team wants this animation 😀
8 replies
KPCKevin Powell - Community
•Created by empty on 7/3/2024 in #front-end
truncate style does not work
Im not good at react but your flex is causing this issue. Removing display: flex made it work.
That’s not the solution but that’s what i found out so far.
Maybe it helps solving the issue.
https://semicolon.dev/tutorial/css/text-overflow-ellipsis-doesnt-work
Maybe this helps?
7 replies
KPCKevin Powell - Community
•Created by empty on 7/3/2024 in #front-end
truncate style does not work
It looks like your p is wider than it should be. So it cannot clip the text.
I would have a look at the parent containers first. Maybe are wider too.
I guess I’ll have a look
7 replies
KPCKevin Powell - Community
•Created by reeee on 7/2/2024 in #front-end
i have a container that contains 6 items and i want 3 items of the exact same size in each row
I was about to write: Wait for Kevin’s response. He loves grid.
Btw we have a similar person at work. He’s like: flex is better than grid. Grid is too complex 😀
28 replies
KPCKevin Powell - Community
•Created by xilli on 6/24/2024 in #front-end
focus-visible not properly working on inputs
I tried 🙂 If we listen to the TAB key, we might remove accessibility for other input devices.
Thanks all for your answers
13 replies
KPCKevin Powell - Community
•Created by xilli on 6/24/2024 in #front-end
focus-visible not properly working on inputs
Thanks. We have to discuss this with our design team. This is not a perfect solution for me to be honest 😦 this will only work with keyboards, not other devices right?
13 replies
KPCKevin Powell - Community
•Created by pavan.1. on 6/25/2024 in #front-end
I need help with media-queries for Responsive Web layout
What kind of problems do you have? Have you ever heard of container queries? They are quite similar to media queries and might help with some problems too.
5 replies
KPCKevin Powell - Community
•Created by xilli on 6/24/2024 in #front-end
focus-visible not properly working on inputs
I hope so 🙂
13 replies
KPCKevin Powell - Community
•Created by xilli on 6/24/2024 in #front-end
focus-visible not properly working on inputs
Well, we are a big insurance company which mostly uses input elements on the website. Maybe around 30-50?
The most simple form fields have a minimum of 10 inputs.
13 replies
KPCKevin Powell - Community
•Created by xilli on 6/24/2024 in #front-end
focus-visible not properly working on inputs
I know what you mean and that was my point too. It’s an intentional behavior.
But the design team doesn’t want to change the design-system 😦
13 replies
KPCKevin Powell - Community
•Created by tototriou on 6/23/2024 in #front-end
not working on apple
Didn’t know that . Thanks
18 replies
KPCKevin Powell - Community
•Created by xilli on 6/24/2024 in #front-end
focus-visible not properly working on inputs
Thanks but isn’t it bad for performance, when I’m adding lots of event listeners to lots of inputs?
13 replies
KPCKevin Powell - Community
•Created by tototriou on 6/23/2024 in #front-end
not working on apple
This issue isn’t a browser issue, right? I’ve doubt out, that it looks weird on any browser on my iPhone.
18 replies