capt_uhu
KPCKevin Powell - Community
•Created by cubiq on 2/16/2025 in #front-end
🫨 Fix my crazy blur lags | Advanced
the backdrop-filter blur web platform test shows that Chrome takes 3 to 4 times longer to paint the test than Firefox. So the heart of the problem might just be Chrome's current not so great implementation of backdrop-filters. Hopefully this gets fixed up this year as part of the Interop work: https://wpt.fyi/results/css/filter-effects/backdrop-filter-basic-blur.html?label=master&label=experimental&view=interop&q=label%3Ainterop-2025-backdrop-filter
36 replies
KPCKevin Powell - Community
•Created by oemer on 2/13/2025 in #front-end
How to do a dashed border with a gradient and a border-radius in css?
updated the pen I made above to use the
border-image-* long hands to give a better idea of what's going on. MDN article is probably the best place to find more info: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image44 replies
KPCKevin Powell - Community
•Created by oemer on 2/13/2025 in #front-end
How to do a dashed border with a gradient and a border-radius in css?
also tinkered with your svg a bit to get it to work in
border-image as expected. Needed to remove the viewbox to make it a fixed size: https://codepen.io/jsnkuhn/pen/RNwNYdz44 replies
KPCKevin Powell - Community
•Created by oemer on 2/13/2025 in #front-end
How to do a dashed border with a gradient and a border-radius in css?
For the future take a look at the
border-area value for background-clip. It's only in Safari right now but hopefully Chrome and Firefox will start to play around with it this year. To be honest it's not the best solution for this (it's a bit clunky and hacky to reuse background and set the border to transparent) but it's something we got a browser to actually work on... https://github.com/w3c/csswg-drafts/issues/9456#issuecomment-232527872944 replies
KPCKevin Powell - Community
•Created by oemer on 2/13/2025 in #front-end
How to do a dashed border with a gradient and a border-radius in css?
the radius of the corner is already included in the SVG image so
border-radius wouldn't be necessary. or am i missing something?44 replies
KPCKevin Powell - Community
•Created by oemer on 2/13/2025 in #front-end
How to do a dashed border with a gradient and a border-radius in css?
the responsive squishing and stretching of the corners can be fixed by using
border-image instead of background-image44 replies
KPCKevin Powell - Community
•Created by CodeMoon07 on 2/9/2025 in #front-end
CSS Grid Layout Overflowing and Resizing
Declaring your rows would be a good place to start. If you do want a truly fixed size then you'll need something like
px or em instead of fr
11 replies
KPCKevin Powell - Community
•Created by Code-S ♛ on 2/5/2025 in #front-end
How to achieve this text color
yep yep,
background-clip: text; is the way for this right now. Good on you though for noticing how odd it is. background-clip: text; is a super hacky thing but it's all we have right now. The official way to do this is going to be a "fill" property but no browser supports it yet: https://www.w3.org/TR/fill-stroke-3/#fill-shorthand10 replies
KPCKevin Powell - Community
•Created by Oli_T on 2/2/2025 in #front-end
Image masked with image wrapper in Grid..
have a look at this video from Rachel Andrew on line based positioning: https://www.youtube.com/watch?v=t8GRS-Z3YVI
8 replies
KPCKevin Powell - Community
•Created by Conker on 1/28/2025 in #front-end
Header items not spaced
not sure if this helps but your
class="nav--Links" doesn't match your .nav-links in the CSS. One has a capital L, the other a lower case l11 replies
KPCKevin Powell - Community
•Created by Vinicius on 1/25/2025 in #front-end
CSS Positioning inconsistent across browsers
only had a quick look but it seems that the heart of your problem is your SVG is 84x84 but the design inside it is only about 20x20. This leads to 60 some pixels of white space to the right and bottom of the icon that you are having to work around.
23 replies
KPCKevin Powell - Community
•Created by Dawson on 1/24/2025 in #front-end
Flicker in background transitions using keyframes
preloading the images with
<link> is an option.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload4 replies
KPCKevin Powell - Community
•Created by Dante on 1/21/2025 in #front-end
Inward border-radius on the bottom right of a container
Temani has a generator for this: https://css-shape.com/inverted-radius/
4 replies
KPCKevin Powell - Community
•Created by Dante on 1/21/2025 in #front-end
Inward border-radius on the bottom right of a container
so did you try anything from the video? Is there something we can look at that you've done? Maybe a codepen?
4 replies
KPCKevin Powell - Community
•Created by Bingo Bandit on 1/17/2025 in #front-end
What's the best way to style 45 bevel corners?
here's the link to the video: https://www.youtube.com/watch?v=aW6qEAQSctY
44 replies
KPCKevin Powell - Community
•Created by Bingo Bandit on 1/17/2025 in #front-end
What's the best way to style 45 bevel corners?
unfortunately the mythical answer we all seek for this just doesn't exist yet. Right now it's spec-ed as
corner-shape but is not ready to be implemented in browsers: https://drafts.csswg.org/css-borders-4/#corner-shaping44 replies
KPCKevin Powell - Community
•Created by GeorgeCraft225 on 1/5/2025 in #front-end
Recreate a circle gradient border
unfortunately
border-radius and border-image don't work together and probably never will... but you can recreate this with layered background images with different background-origin values: https://codepen.io/jsnkuhn/pen/LEPePXp15 replies
KPCKevin Powell - Community
•Created by Rultar on 12/22/2024 in #front-end
Button with inverted rounded corners + border
if you're OK with using images for this
border-image can be helpful. The big issue is that you lose control of most styling through CSS: https://codepen.io/jsnkuhn/pen/eYMQmoe16 replies
KPCKevin Powell - Community
•Created by Rultar on 12/22/2024 in #front-end
Button with inverted rounded corners + border
you have touched on the primary problem here: there unfortunately isn't really a "nooby friendly" method for this. There's this mythical CSS property called "border-corner-shape" that's been in a draft spec for 12 years but it has never been implemented by any browsers.... Here's my paintAPI take on what it would be like: https://jsnkuhn.github.io/corner-shape/ it's pretty rough because the paintAPI also has bad support. Looking at it on chrome or edge should give the best results.
16 replies
KPCKevin Powell - Community
•Created by Rultar on 12/22/2024 in #front-end
Button with inverted rounded corners + border
so here's another approach that gets out of the way of
background-image so peeps can use that: https://codepen.io/jsnkuhn/pen/MYgoKOZ16 replies