MarkBoots Comments - Answer Overflow

MarkBoots

•Created by marvxkiyi on 3/17/2025 in #front-end

How do i achieve this text particular animation

maybe check out "Franks Laboratory" on youtube . he has some cool interactive particle & text effects (canvas) which may help you get further. He explains everything very well tutorial wise https://www.youtube.com/@Frankslaboratory

2 replies

KPCKevin Powell - Community

•Created by 𝔰𝔶𝔫𝔬𝔦𝔪 on 2/28/2025 in #front-end

Anyone know how to get rid of this? - Custom DuckDuckGo theme

with this you should be able to get rid of it

nav::before,
nav>ul:nth-child(2)::before {
  background: none !important;
}

nav::before,
nav>ul:nth-child(2)::before {
  background: none !important;
}

18 replies

KPCKevin Powell - Community

•Created by 𝔰𝔶𝔫𝔬𝔦𝔪 on 2/28/2025 in #front-end

Anyone know how to get rid of this? - Custom DuckDuckGo theme

18 replies

KPCKevin Powell - Community

•Created by vic on 2/15/2025 in #front-end

border ui issue

has to do with rounding of subpixels and screen pixel density. not much you can do about it. maybe a small box-shadow

14 replies

KPCKevin Powell - Community

•Created by Londonpeteharrison on 1/30/2025 in #front-end

Change colours when required fields complete

it happens, sometimes im way overthinking pseudo selectors too, while form has its on valid state

27 replies

KPCKevin Powell - Community

•Created by Londonpeteharrison on 1/30/2025 in #front-end

Change colours when required fields complete

maybe i'm missing something, but wouldn't the selector form:valid be sufficient here?

27 replies

KPCKevin Powell - Community

•Created by Daniel on 1/18/2025 in #front-end

Using only areas template areas with z index

almost certain that you can not do it with grid-template-area's but you can use the grid-template-columns and grid-template-rows where you define the gridlines

grid-template-columns: 
    [one-start] auto [two-start] auto [one-end] auto [two-end];
grid-template-rows:
    [one-start] 
    auto
    [two-start]
    auto
    [one-end]
    auto
    [two-end];

grid-template-columns: 
    [one-start] auto [two-start] auto [one-end] auto [two-end];
grid-template-rows:
    [one-start] 
    auto
    [two-start]
    auto
    [one-end]
    auto
    [two-end];

9 replies

KPCKevin Powell - Community

•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

44 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 Lua Kenai on 12/28/2024 in #front-end

Hamburger responsive menu not closing