capt_uhu
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
KPCKevin Powell - Community
•Created by Faker on 10/22/2024 in #front-end
Height of after pseudo-element not matching original height of element acting upon
the margin is the transparent orange-ish color. It looks like you moved it to the li
8 replies
KPCKevin Powell - Community
•Created by Faker on 10/22/2024 in #front-end
Height of after pseudo-element not matching original height of element acting upon
yep, dev tools is how I found it. The margin gets highlighted a different color than the rest of the element when you inspect it.
8 replies
KPCKevin Powell - Community
•Created by Faker on 10/22/2024 in #front-end
Height of after pseudo-element not matching original height of element acting upon
the
margin-bottom on the a is adding to the overall height of the li8 replies
KPCKevin Powell - Community
•Created by Faker on 10/22/2024 in #front-end
Height of after pseudo-element not matching original height of element acting upon
looks like it's from the
margin-bottom: 20px; on your link element?8 replies