capt_uhu
KPCKevin Powell - Community
â˘Created by CDL on 10/29/2024 in #ui-ux
Figma designs -> CSS code. Linear-fill background?
what you have mostly looks fine to me. You can probably get rid of the
0deg,. linear-gradients default to starting at the top and working down so there's no need to declare that. Are you asking whether there's a way to mirror the gradient? Or whether you should use a variable for the 15% at the top and bottom?4 replies
KPCKevin Powell - Community
â˘Created by Faker on 12/8/2024 in #front-end
Why image appears "pixelated" despite object-fit cover used
Fun Spec Fact: we're suppose to have
image-rendering: smooth; and image-rendering: high-quality; to help with situations like this. ...but as i'm sure you can guess there's pretty much no support for them. đŠ16 replies
KPCKevin Powell - Community
â˘Created by é˛çąłčŤžćŻ Lumynous on 12/4/2024 in #front-end
Aligning icons (fontawesome)
just as a follow up FYI, There's a spec-ed property set to help us deal with this problem: https://github.com/jantimon/text-box-trim-examples?tab=readme-ov-file
Currently in Safari and close to ready in Chrome. Maybe will make Interop this year đ¤
12 replies
KPCKevin Powell - Community
â˘Created by smackalpha on 11/24/2024 in #front-end
Creating a custom shape
getting your gray "border" element to have the rounded line joins with
clip-path is going to be difficult. Would suggest instead either just using the image for this or positioning a 45deg rotated square div (or pseudo element) with the border-color and border-radius for the element side3 replies
KPCKevin Powell - Community
â˘Created by Jono Lewarne on 11/14/2024 in #front-end
Could these scalable backgrounds be made with css?
While these generators are great and I appreciate all the work Temani has put into them I've never been able to use them in practice for anything. Maybe the designers I work with are just more picky than the rest but with this one in particular: https://css-generators.com/custom-borders/ The issue is always the corners not working well. Not matching up as expected. But if it works for you in your use case than by all means have at it.
11 replies
KPCKevin Powell - Community
â˘Created by Jono Lewarne on 11/14/2024 in #front-end
Could these scalable backgrounds be made with css?
SVG would definitely be the better way to go to create these images than a bunch of presentation-al divs. You could use the SVGs as
border-image or mask-border/-webkit-mask-box-image. Or this looks like a potentially use case for the PainAPI.11 replies
KPCKevin Powell - Community
â˘Created by Bighealspls on 11/11/2024 in #front-end
Why does a drop-shadow get cutoff when applying it to the path of an svg?
re-downloaded webkitForWindows last night for something so checked
overflow quick on the pen and overflow was a no go. I'm not super confident that this means for sure it wont work on Safari on an actual apple device though. Probably worth confirming on real hardware if you're looking to use.
Looks like overflow on SVG is part of SVG 2.1 which is in an editors draft so wouldn't a surprise if not everyone supported it yet: https://svgwg.org/svg2-draft/render.html#OverflowAndClipProperties11 replies
KPCKevin Powell - Community
â˘Created by Bighealspls on 11/11/2024 in #front-end
Why does a drop-shadow get cutoff when applying it to the path of an svg?
Works across Chrome and Firefox. Not sure why this would be a bug. Default for SVG is
overflow: hidden; just change it to visible to show the overflow. Here's the SVG overflow attribute article that also mentions CSS overflow: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow11 replies
KPCKevin Powell - Community
â˘Created by Bighealspls on 11/11/2024 in #front-end
Why does a drop-shadow get cutoff when applying it to the path of an svg?
I remember getting something like this to work once by playing with CSS
overflow on the SVG11 replies
KPCKevin Powell - Community
â˘Created by EasyToKill_ (long break) on 11/7/2024 in #front-end
Cursor Pointer on transparent image
I think you can do this with
pointer-events if the image is an SVG: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
there's also <map> but honestly I haven't used it in forever so I've long forgotten the details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map28 replies
KPCKevin Powell - Community
â˘Created by lamoo7 on 11/3/2024 in #front-end
Need Help: Combining Gradient and Image Backgrounds on a Single Element
as long as you don't need to add a
border or a border-radius you can do this with border-image: https://frontendmasters.com/blog/quick-trick-using-border-image-to-apply-and-overlay-gradient/
another way is to use a pseudo element with the gradient background but that requires more set up5 replies
KPCKevin Powell - Community
â˘Created by R.I.P on 11/2/2024 in #front-end
help making a code better
my initial thought was that the gradient rotation wasn't going to be running on the GPU because you're not using
transform: rotate(); for it. But turns out it's already on the GPU as is in both chrome and FF for me. Might still be worth trying the rotate though, maybe it will be a bit less of a performance hit?
I noticed the canvas has a thing were it shows a black background for a bit when I resize the screen. Might be a place to start but...
The reality is that if you really want/need this much movement on the screen ya might be better off making a video.12 replies
KPCKevin Powell - Community
â˘Created by R.I.P on 11/2/2024 in #front-end
help making a code better
Usually when you have that repeating issue from top to bottom across the whole page it's because your html has no height. Which is common when there's no content on the page yet.
12 replies
KPCKevin Powell - Community
â˘Created by Sylvia on 11/1/2024 in #front-end
Changing flex box width according to flex wrap
maybe
display: inline-flex; instead of flex?19 replies
KPCKevin Powell - Community
â˘Created by Sylvia on 11/1/2024 in #front-end
Changing flex box width according to flex wrap
try a
filter: drop-shadow(); instead19 replies
KPCKevin Powell - Community
â˘Created by sillyrabbit on 10/30/2024 in #front-end
Grid-based hierarchy for multi-line elements
this doesn't seem on the surface that it would be that tricky but i'm wondering what is going to go in the white boxes? Will they always be 1/1 aspect like that?
4 replies
KPCKevin Powell - Community
â˘Created by Sylvia on 11/1/2024 in #front-end
Changing flex box width according to flex wrap
if I'm understanding correctly what you want I'd start by making the pseudo elements use borders instead of the text characters. So the first one would have a top, bottom and left border but no right. Then set them to 100% height so they can grow with the wrapping. And absolute position them on the sides?
19 replies
KPCKevin Powell - Community
â˘Created by Dovah on 10/27/2024 in #front-end
Changing "accent-color" on radio button, changes color of space between border and inner circle?
so it's specifically the use of the
var() as an accent color?13 replies
KPCKevin Powell - Community
â˘Created by PriYaashh!! on 10/27/2024 in #front-end
is there a plug in for finding unused css class in visual code?
Chrome dev tools has a panel for finding unused JS and CSS: https://developer.chrome.com/docs/devtools/coverage/
6 replies
KPCKevin Powell - Community
â˘Created by đŚđđđđ˘đŞ on 10/23/2024 in #front-end
How apply this border gradient?
can you show us what you've done so far? A codepen link?
26 replies