Chris Bolson
Chris Bolson
PostsComments
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
Yes, that is a great tool. However it doesn't hurt to understand how the paths are actually defined as that makes it easier to be able to manipulate them if needed 😉 A couple of demos of mine where I made use of clip-path manipulation https://codepen.io/cbolson/pen/MWNOxvB https://codepen.io/cbolson/pen/GRbzyGJ
56 replies
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
Bear in mind that a lot of this would be simpler with JS. I just like to try to do as much as possible with CSS.
56 replies
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
You can either place the images within the timeline elements itself (like I did in this demo based on the same code) or place them outside the element. However, in this case, to be able to define which one to show you will either have to use JS or use the :has() selector on a global parent element (eg the body) to detect which radio button has been selected to then define which image to show.
56 replies
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
clip-path is basically just a series of points which define what part of the element is visible. I personally like to start from the top left (x=0 y=0) and work my way round clockwise, defining each point where I want to "cut off" the visibility of the element. By defining the height on the parent element you can now adjust that with media queries or whatever method you prefer. I know that generally it is suggested to avoid fixed heights but in this case it has a specific purpose.
56 replies
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
In my original demo clip-path was simply cutting off the bottom half of the circle. Again, fine when there is no content after it. However that would leave a large space below the element as the browser would allow for the full height of the element. So, in this later demo, rather than using clip path I set a fixed height on a parent wrapper and set the over-flow to hidden, effectively chopping off the lower part of the timeline, with the advantage of not messing with the flow.
56 replies
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
As @i_lost_to_loba_kreygasm says, it may be simpler with GSAP but it is still fun (at least in my mind) to try these things with CSS 😆
56 replies
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
I have forked your pen to be able to play around with the timeline within content. As I say, it needed some fine-tuning as I had "cheated" in my original demo by giving the whole element a position "fixed" which fixed it in the center of the viewport - fine when there is no other content but clearly not possible when needing it as part of a larger website. https://codepen.io/cbolson/pen/yyBjKNP
56 replies
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
You will obviously need to fine-tune all the values to fit to your design. The strangest thing that I notice is the jumping around of the whole block according to which "year" is selected. This appears to be due to the focusing on the hidden radio buttons - the browser appears to be tring to bring them into view. A quick fix for this (though not very accesible though I suspect that none of this is overly accesible) would be to replace the code that "hides" the radio button with a much simpler "display: none". This still allows the code to work but doesn't jump around.
56 replies
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
Can you share the link to what you have?
56 replies
KPCKevin Powell - Community
Created by bockster6669 on 1/12/2025 in #front-end
Hover effect
Personal I would avoid changing the width of the button as that may well cause other things to shift around. In this case I would initially center the text and hide the icon with opacity and some horizontal translate. On hover (and focus) I would then reposition the text and reveal the icon, something like this.
5 replies
KPCKevin Powell - Community
Created by Zach on 1/12/2025 in #front-end
list or no list for nav links
I tend to not use lists for nav links or indeed anything that isn’t strictly a list. It creates unnecessary markup. In this case I would use a <nav> container and then flex or grid to define the layout and spacing.
12 replies
KPCKevin Powell - Community
Created by Kivory on 1/9/2025 in #front-end
How do I make an animation where a div goes from height: 0px; to [its regular height]?
https://codepen.io/cbolson/pen/RNbQvNO
22 replies
KPCKevin Powell - Community
Created by Kivory on 1/9/2025 in #front-end
How do I make an animation where a div goes from height: 0px; to [its regular height]?
You could also use a grid row animation to go from 0fr to 1fr
22 replies
KPCKevin Powell - Community
Created by Jelle on 1/6/2025 in #front-end
Fixed background-gradient on menu items
No description
15 replies
KPCKevin Powell - Community
Created by Jelle on 1/6/2025 in #front-end
Fixed background-gradient on menu items
Just make sure you that don't define a color on the menu items themselves
15 replies
KPCKevin Powell - Community
Created by Jelle on 1/6/2025 in #front-end
Fixed background-gradient on menu items
Why do you need to use background-attachment: fixed? You could place the background gradient on your parent item, as per your first example, and apply the text clip directly on that. 
.header .menu ul{
  background: linear-gradient(90deg, red 0%, green 100%);
  padding-block: 30px;
   color: transparent;
  background-clip: text;
}
.header .menu ul{
  background: linear-gradient(90deg, red 0%, green 100%);
  padding-block: 30px;
   color: transparent;
  background-clip: text;
}
15 replies
KPCKevin Powell - Community
Created by Jelle on 1/6/2025 in #front-end
Fixed background-gradient on menu items
If you add more children to your second element you will see how they extend across the viewport and more of your gradient is visible.
15 replies
KPCKevin Powell - Community
Created by Jelle on 1/6/2025 in #front-end
Fixed background-gradient on menu items
In your first container the gradient is limited to the bounds of the element itself. However, when you use background-attachment: fixed the gradient is then defined by the bounds of the body as the attachment is relative to the body.
15 replies
KPCKevin Powell - Community
Created by corizon. on 1/3/2025 in #front-end
Please how do i achieve this?
here is a codepen demo based on this method.
56 replies
KPCKevin Powell - Community
Created by YN20 on 1/5/2025 in #front-end
Landing Page Using Grid Methodology
I personally would only create a container if it is really needed. If the classes/properties can be applied to the parent container, without breaking the design, I wouldn't add it.
5 replies