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).

16/12/25, 11:21 am18 reposts94 likes

JauntyWunderKind

@jauntywunderkind.bsky.social

17 Dec 2025

nodes & edges / flow based computing potential here is awesome. so rad that CSS can just take car of this for us. awesome CSS tip!

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

16 Dec 2025

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.

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!