capt_uhu
capt_uhu
PostsComments
KPCKevin Powell - Community
Created by capt_uhu on 4/22/2025 in #help
2025 want list (Interop 2025)
Not sure if I just missed this or if there really hasn't been any mention of this before but Webkit seems to be prototyping CSS random(). There's a note in the Technology Preview 218 blog post about a change to the implementation: https://webkit.org/blog/16861/release-notes-for-safari-technology-preview-218/
17 replies
KPCKevin Powell - Community
Created by capt_uhu on 4/22/2025 in #help
2025 want list (Interop 2025)
An update: The jxl-rs folks worked all week last week and are back at it again this week. No idea how close any of this is to being handed over to the browsers for implementation but it's great so see things happening on this: https://github.com/libjxl/jxl-rs/pulls?q=is%3Apr+is%3Aclosed
17 replies
KPCKevin Powell - Community
Created by capt_uhu on 4/22/2025 in #help
2025 want list (Interop 2025)
No description
17 replies
KPCKevin Powell - Community
Created by capt_uhu on 4/22/2025 in #help
2025 want list (Interop 2025)
Think I may have mentioned CSS fit-width before but now Chrome has an "Intent to Prototype: CSS fit-width text" https://groups.google.com/a/chromium.org/g/blink-dev/c/I3aG24t4bwI/m/xLBLyAJKDwAJ
17 replies
KPCKevin Powell - Community
Created by DoContra on 4/5/2025 in #help
How to make a input range
wouldn't accent-color cover a lot of this these days?
7 replies
KPCKevin Powell - Community
Created by jake on 3/10/2025 in #ui-ux
Website Background
for background images you'll need the background-size property instead of object-fit which only works with the <img> tag. Probably what you'll want specifically is background-size: cover;: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size. on file size: yes it's definitely a concern. Off the top of my head bing is the first site that comes to mind that does this sort of thing. So i went too have a look and today's image for me is 234k which isn't bad for what they are doing. They have the background image reference in the HTML through a style attribute. And then are using this in the css file: 
background-position: center;
background-size: cover;
background-position: center;
background-size: cover;
22 replies
KPCKevin Powell - Community
Created by jake on 3/10/2025 in #ui-ux
Website Background
not qualified to answer about the design side of images like this but those definitely look like non-content images so should at least in theory be done through CSS background-image. These types of images are often referred to as "hero images"
22 replies
KPCKevin Powell - Community
Created by Romoy on 3/6/2025 in #front-end
Does anyone have any idea how this shape is made?
border-area went live in stable Safari 18.2 and Jen Simmons wrote a nice blog post about it at the time https://webkit.org/blog/16214/background-clip-border-area/ Unfortunately not as much enthusiasm from the other browsers yet.
10 replies
KPCKevin Powell - Community
Created by Romoy on 3/6/2025 in #front-end
Does anyone have any idea how this shape is made?
so this is very cursed but here it is with gradients: https://codepen.io/jsnkuhn/pen/xbxrRda?editors=1100 this would be a lot easier with corner-shape and background-clip: border-area; crossing fingers that they become real at some point
10 replies
KPCKevin Powell - Community
Created by Narigo on 2/21/2025 in #front-end
Is rotating a radial gradient in CSS background property possible?
you wouldn't need transforms on elements for this. We can make these kind of shapes with something like border-radius: 25% 75%;. But nope I can't think of anyway to do it with gradients either.
32 replies
KPCKevin Powell - Community
Created by cubiq on 2/16/2025 in #front-end
🫨 Fix my crazy blur lags | Advanced
what "deeper functionalities of backdrop filters" are you talking about that are limited on Firefox?
51 replies
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
51 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-image
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?
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/RNwNYdz
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?
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-2325278729
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 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-image
44 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 
grid-template-rows: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
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-shorthand
10 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