MarkBoots Comments - Answer Overflow

MarkBoots

•Created by Bingo Bandit on 1/17/2025 in #front-end

What's the best way to style 45 bevel corners?

well, you could also use shape-outside to prevent the content being clipped. I wouldn't say it is impossible, But yea, this is a real hassle, not really something easy to do with the given constraints

26 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 1/14/2025 in #front-end

Can anybody help me place the small images on the edges exactly?

i was playing with this too and took it a bit further. as you are calculating the positions of the corner elements (the images) you could also use that for the clippath polygon. i you want to dynamically create a shape based on the amount of elements inside, you could do something like this. so here there are 8 corners, but it will work for any amount >=3 https://codepen.io/MarkBoots/pen/ogvdQVX?editors=1111

13 replies

KPCKevin Powell - Community

•Created by Jelle on 1/6/2025 in #front-end

Fixed background-gradient on menu items

yea, if we knew that, it would have been so much easier. well at least i found something new that i didn't think could be done before

15 replies

KPCKevin Powell - Community

•Created by Jelle on 1/6/2025 in #front-end

Fixed background-gradient on menu items

15 replies

KPCKevin Powell - Community

•Created by Jelle on 1/6/2025 in #front-end

Fixed background-gradient on menu items

you could do something like this https://codepen.io/MarkBoots/pen/mybpmVJ set the background to the pseudo element of the childs, and make those positioned relative to the parent with the full size of the parent. then hide the excess outside the childs with a clippath

15 replies

KPCKevin Powell - Community

•Created by GeorgeCraft225 on 1/5/2025 in #front-end

Recreate a circle gradient border

you could do both, but i think a border might render more nicely

15 replies

KPCKevin Powell - Community

•Created by louichb22 on 1/5/2025 in #front-end

Inset property vs top/right/bottom/left

4 replies

KPCKevin Powell - Community

•Created by jsolly on 1/4/2025 in #front-end

Nested Checkboxes in Pure CSS. Is it possible?

maybe a bit difficult explained, and im not sure it will work, but maybe you can try

if the group has all checkboxes checked, show an overlaying label on top of the parent checkbox that will toggle a hidden checkbox where the childs can look at. and then visually style them

if the group has all checkboxes checked, show an overlaying label on top of the parent checkbox that will toggle a hidden checkbox where the childs can look at. and then visually style them

unfortunately I don't have time to try it myself. Hope it will help you a bit further In the end (and you already note that in your comments too) you wont be able to check the actual states of the checkboxes. So i wonder if a pure css-solution is a viable one.

7 replies

KPCKevin Powell - Community

•Created by drinking a full jug of fanta on 12/28/2024 in #front-end

Hamburger responsive menu not closing

10 replies

KPCKevin Powell - Community

•Created by drinking a full jug of fanta on 12/28/2024 in #front-end

Hamburger responsive menu not closing

yes, hypens after data- are replaced by camelcasing

10 replies

KPCKevin Powell - Community

•Created by empty on 12/30/2024 in #front-end

how to make flex items stack on each others when the width of items is below a certain width

In your screenshot I see a single div.box is 492px. but it will look at the total width (100%) of the section. when that is < 500px, it will break

5 replies

KPCKevin Powell - Community

•Created by drinking a full jug of fanta on 12/28/2024 in #front-end

Hamburger responsive menu not closing

10 replies

KPCKevin Powell - Community

•Created by ahmd shajmeer on 12/28/2024 in #front-end

Infinite Scroll text behind and infront of a image

https://www.youtube.com/watch?v=iLmBy-HKIAw https://codepen.io/kevinpowell/pen/BavVLra

12 replies

KPCKevin Powell - Community

•Created by NeilVanGotham on 12/26/2024 in #front-end

Animate to just the initals of a name

8 replies

KPCKevin Powell - Community

•Created by NeilVanGotham on 12/26/2024 in #front-end

Animate to just the initals of a name

dont know what kind of effect you're going for, but this could be another way https://codepen.io/MarkBoots/pen/PwYKmKe

8 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 12/25/2024 in #front-end

how to make timeline and this layout as well ? flex or grid ?

5 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 12/25/2024 in #front-end

how to make timeline and this layout as well ? flex or grid ?

this could be a startingpoint for you https://codepen.io/MarkBoots/pen/vEBZvYE

5 replies

KPCKevin Powell - Community

•Created by Rultar on 12/22/2024 in #front-end

Button with inverted rounded corners + border

i thought of border-image too, but if you want a wider line (wherefor you also use the inset shadow), it will start to cover the padding- and content-box as well. i was thinking of adding a transparent border so it creates the space for it, but then the inset shadow won't line up. unfortunately it's not possible to combine multiple border-images so it can also do the horizontal/vertical line It could work with an outline instead of the inset shadow https://codepen.io/MarkBoots/pen/YPKQwbQ?editors=1100

16 replies

KPCKevin Powell - Community

•Created by Rultar on 12/22/2024 in #front-end

Button with inverted rounded corners + border

16 replies

KPCKevin Powell - Community

•Created by Rultar on 12/22/2024 in #front-end

Button with inverted rounded corners + border

you just let me feel really dumb 😁 , offcourse i could have just used the repeating nature of backgrouds/mask. just offset it a bit.... (never code after midnight)

16 replies

Gaming

Programming