Pete (he/him)
KPCKevin Powell - Community
•Created by R.I.P on 10/12/2024 in #front-end
slow animation on corners
You might be able to use
offset-path so that speed appears more consistent when going around corners https://codepen.io/ptrfrncsmrph-the-vuer/pen/dyxNxvb4 replies
KPCKevin Powell - Community
•Created by Pete (he/him) on 7/17/2024 in #front-end
Responsive `clip-path` units?
I think I'll probably just avoid this design altogether, really just wanted to confirm my assumption that this would be tricky to make responsive 🙂
8 replies
KPCKevin Powell - Community
•Created by Pete (he/him) on 7/17/2024 in #front-end
Responsive `clip-path` units?
with the polygonHm, can I make rounded edges with
polygon? I'm currently using arc shapes in the path8 replies
KPCKevin Powell - Community
•Created by Pete (he/him) on 7/17/2024 in #front-end
Responsive `clip-path` units?
Here's the codepen https://codepen.io/ptrfrncsmrph-the-vuer/pen/RwzWvRe
8 replies
KPCKevin Powell - Community
•Created by Pete (he/him) on 6/19/2024 in #front-end
Modal exit animation debugging
Oh nice 👍 that makes my example work, and I see the blog post example does include
allow-discrete on the overlay (but still seems jumpy if you focus outside the <dialog> before closing, maybe there's something else going on there...)4 replies
KPCKevin Powell - Community
•Created by Pete (he/him) on 6/19/2024 in #front-end
Modal exit animation debugging
The example was mostly copied from this post https://developer.chrome.com/blog/entry-exit-animations#animating_elements_to_and_from_the_top-layer and I see that the bug appears there too 😦
4 replies
KPCKevin Powell - Community
•Created by AlekseiArsentev on 4/6/2024 in #front-end
How to create this shadow effect with css?
You can also do a decent job with just CSS, without box-shadows https://codepen.io/ptrfrncsmrph-the-vuer/pen/XWQEWqz
5 replies
KPCKevin Powell - Community
•Created by Pete (he/him) on 4/4/2024 in #front-end
Ephemeral padding when animating grid row height
Adding align-items: start; to the parent grid element
🎯 That works, thanks! I was considering not using this technique even though it's the simplest, just because of that odd behavior. May I ask how you knew that, or how you figured it out?
If you want a true CSS only solution you should use a hidden radio button or checkbox.Good point. The above codepen was just a scratchpad, but ultimately I was going to use something like this for expandable list items, basically an accordion pattern. My first thought was to use
<details> to track expanded state in the DOM, but I don't think I can unfortunately, because the <summary> section contains heading(s). I hadn't considered using checkboxes.11 replies
KPCKevin Powell - Community
•Created by Pete (he/him) on 4/4/2024 in #front-end
Ephemeral padding when animating grid row height
Yeah it does seem like a different timing-function, though I tried using a few different timing-functions on the animation and haven't been able to get it to match the inner animation timing 🤷♂️ it's a mystery...
11 replies
KPCKevin Powell - Community
•Created by Pete (he/him) on 4/4/2024 in #front-end
Ephemeral padding when animating grid row height
Codepen here https://codepen.io/ptrfrncsmrph-the-vuer/pen/poBaoZr
11 replies
KPCKevin Powell - Community
•Created by Pete (he/him) on 4/4/2024 in #front-end
Ephemeral padding when animating grid row height
11 replies