capt_uhu
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-shaping26 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
KPCKevin Powell - Community
•Created by Rultar on 12/22/2024 in #front-end
Button with inverted rounded corners + border
sorry didn't see yours
16 replies
KPCKevin Powell - Community
•Created by Rultar on 12/22/2024 in #front-end
Button with inverted rounded corners + border
there's also this generator: https://css-generators.com/custom-corners/
16 replies
KPCKevin Powell - Community
•Created by Rultar on 12/22/2024 in #front-end
Button with inverted rounded corners + border
desperately needs variables but here's my attempt: https://codepen.io/jsnkuhn/pen/OPLmKKE
16 replies
KPCKevin Powell - Community
•Created by usama on 12/21/2024 in #front-end
Complex Figma gradient bgCSS
It depends how specific you are looking to be about the image. It looks like a few overlayed radial gradients can get pretty close: https://codepen.io/jsnkuhn/pen/RNbVdyw?editors=1100
But if you need/want it to be exact then the image is the way to go. That PNG though is almost 1mb which is pretty large for this sort of thing. Would look into a losssy image format like jpg, webp, or avif instead. They'd be MUCH smaller file sizes with very little change to the image.
8 replies
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