Post

💡 CSS Tip! Want to see some magic using the new attr() function? Here is a trick to create a progress element with a dynamic coloration based on the progression! css-tip.com/custom-progr... ⚠️ Chrome-only for now ⚠️

Andrew Bone

@link2twenty.bsky.social

26 Mar 2025

Thought I'd have a play with this concept and make some step markers. codepen.io/Link2Twenty/... It doesn't line up quite right but I think the concept works

codepen.iousing attr for step markers...

CSS by T. Afif

@css-only.dev

You need to consider the width of thumb to correctly align the gradient. here is an example: codepen.io/t_afif/pen/J... (you can use no-repeat if you don't want the small part at the edges)

26/3/25, 1:30 pm0 reposts1 like

No replies yet.