capt_uhu
KPCKevin Powell - Community
•Created by mister_simon on 7/3/2024 in #front-end
A "continuous" box shadow on an element
what you've got looks pretty good so far. I'm not sure what you mean by "the shadow must visually connect to the element in a straight line" are you talking about the solid line and dotted line behind the link?
12 replies
KPCKevin Powell - Community
•Created by Olimpio Adolfo on 7/1/2024 in #front-end
How to create a shimmer effect on border
looks like on the page in question they are using a
div but yeah pseudo element is probably a better idea. And the animation is a transform scaleX(); from 0 to 1. With a transform-origin: 0%;3 replies
KPCKevin Powell - Community
•Created by Guie on 6/18/2024 in #front-end
Figma / SVG Mask Path Change
FYI there's a version of this generator that gives you direct control of the 2 points at each corner as well: https://9elements.github.io/fancy-border-radius/full-control.html
11 replies
KPCKevin Powell - Community
•Created by Guie on 6/18/2024 in #front-end
Figma / SVG Mask Path Change
i wonder how close you could get to this shape with the border-radius slash syntax? https://9elements.github.io/fancy-border-radius/
11 replies
KPCKevin Powell - Community
•Created by MarkBoots on 6/16/2024 in #front-end
[brain-breaker] mask-shorthand. Firefox does not like it
@MarkBoots I'm not entirely sure but... I think this might have something to do with the 3 value
mask-position being used in the 3rd mask. The 3 value mask-position doesn't seem to work in either Chrome or Firefox in this pen: https://codepen.io/jsnkuhn/pen/OJYzEVP16 replies
KPCKevin Powell - Community
•Created by althepal78 on 6/3/2024 in #front-end
pirate scroll theme
the slicing of the "background-image" into 3 pieces makes me think that
border-image with the fill keyword might be useful here to avoid that extra div.22 replies
KPCKevin Powell - Community
•Created by edouard on 6/13/2024 in #front-end
Feed layout css
another way to extend a bottom border without a pseudo is with
border-image-outset. No idea if there is a way to do this without a media query. Maybe the same max() idea would apply? https://codepen.io/jsnkuhn/pen/ZENaXoq9 replies
KPCKevin Powell - Community
•Created by o_O on 6/6/2024 in #front-end
Setting radial bg but the radial parts are stretching with the page height. Don't want that
I only see 2 images attached to the post. So I'm not sure exactly what you're going for but I'm guessing that the default ellipse shape of
radial-gradient might be causing your gradients to expand? Try something like radial-gradient(circle at top left, red, blue, green), Unless I'm missing it the generator you linked doesn't allow for this.4 replies
KPCKevin Powell - Community
•Created by octavia0914 on 6/3/2024 in #front-end
Border only in corners
This is also a really good use case for the Paint API for anyone that might be willing to go that route: https://houdini.how/#demo-cornerbox
8 replies
KPCKevin Powell - Community
•Created by octavia0914 on 6/3/2024 in #front-end
Border only in corners
as a side note: Have a vague memory of a working draft "border-clip" property but no browser implements (not even a test implementation yet), so super easy in the future (assuming browser vendors ever bother adding it) but for now it's really annoying to do.
8 replies
KPCKevin Powell - Community
•Created by octavia0914 on 6/3/2024 in #front-end
Border only in corners
here's my 6am attempt: https://codepen.io/jsnkuhn/pen/vYwmEPZ?editors=1100 Added the border as a pseudo element so we can
mask it.8 replies
KPCKevin Powell - Community
•Created by 🌟🦋Amelia💜🌸 on 5/30/2024 in #front-end
choppy animations in Firefox with mask
But if it's just an issue with adding the
mask maybe it's from the compositing of 3 different gradients? You could do the left and right side transparency in one linear gradient then you'd only be compositing 2 images. You might be able to get away with one radial-gradient that looks similar enough to what your trying to accomplish with something like radial-gradient(at bottom, red, #0000). Then you wouldn't need the composite at all.11 replies
KPCKevin Powell - Community
•Created by Å Marlon G on 5/22/2024 in #front-end
... center div 😡
I'd have to play around with it to confirm but I think the 100% happens when you add a
viewbox attr20 replies
KPCKevin Powell - Community
•Created by 🌟🦋Amelia💜🌸 on 5/30/2024 in #front-end
choppy animations in Firefox with mask
I'm not getting any lag issues on FF myself and can't seem to make it lag. But that sure is a lot of generated DOM elements so it wouldn't surprise me to see it lag. It's good that it's animated on a
transform so it is going to the GPU but I think you're really running into the limits here of what CSS is going to be able to handle. I'm guessing you'd probably be better off with a <canvas> for this.11 replies
KPCKevin Powell - Community
•Created by Å Marlon G on 5/22/2024 in #front-end
... center div 😡
this is not specific to the OPs situation
20 replies
KPCKevin Powell - Community
•Created by Å Marlon G on 5/22/2024 in #front-end
... center div 😡
for an inline
<svg> tag if you don't give it a width or height attribute, or a viewbox attribute the SVG will render to the page with a default width of 300px and default height of 150px. Same as the default size of the <video> tag20 replies
KPCKevin Powell - Community
•Created by 🌟🦋Amelia💜🌸 on 5/30/2024 in #front-end
choppy animations in Firefox with mask
not super familiar with astro but it does look like there's an option to "Add Packages" in codpens JS window settings? This might be what you're looking for.
11 replies
KPCKevin Powell - Community
•Created by 🌟🦋Amelia💜🌸 on 5/30/2024 in #front-end
choppy animations in Firefox with mask
A couple of things come to mind but definitely going to need to see the live site or a codepen to know what's going on with this for sure
11 replies
KPCKevin Powell - Community
•Created by Sam on 5/28/2024 in #front-end
CSS 2 Column Layout
Here's Tab talking about it: https://github.com/w3c/csswg-drafts/issues/2806#issuecomment-415843117
30 replies
KPCKevin Powell - Community
•Created by Sam on 5/28/2024 in #front-end
CSS 2 Column Layout
This is more of an FYI than anything but I think that what you're looking for here was being worked on by the CSS Working Group under the name CSS Regions back in the 2010s. Not sure if there was ever even a test implementation started. I think it was abandoned because there wasn't agreement on whether it should be its own new property or if it should be part of
overflow?? https://drafts.csswg.org/css-regions-1/#regions30 replies