Post

💡 CSS Tip! Two circles, one arrow, and CSS magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 css-tip.com/connected-ci... The shape and position of the arrow are fully controlled using CSS (Yes, there is a collision detection).

Si Kelly

@si-kelly.bsky.social

16 Dec 2025

I mean I love the declarative approach that css brings and the slickness of the final result but this.... I will never be clever enough for this

CSS by T. Afif

@css-only.dev

You don't need to be "clever" for that part. It's my "behind the scene" work that you don't need to touch or understand. All you need is to update a few variable above. You can see it as an API (similar to those heavy JS library most people use) btw, I will be writing an article like I always do.

16/12/25, 12:48 pm0 reposts1 like

Si Kelly

@si-kelly.bsky.social

16 Dec 2025

Yes I love the demo- and your css work is always awesome 😎 I just mean that its so neat to be able to encode that behaviour declaratively with these CSS features but it is very hard actually when you pull back the curtain!