capt_uhu
capt_uhu
PostsComments
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
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 l
11 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. 
<link rel="preload" href="flower.avif" as="image" type="image/avif" />
<link rel="preload" href="flower.avif" as="image" type="image/avif" />
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
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
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