Build Flow Charts with #CSS Anchor Positioning

CSS view transitions + anchor positioning now let you... easily build smooth SPA-like navigation on a good old static website!show more

In case you missed it, I wrote about the... basics CSS Anchor Positioning. 🔗show more

magnetic bento hover effect w/ css anchor positioning .bento... { li:hover article { anchor-name: --a; } .indicator { position-anchor: --a; inset: anchor(inside); transition: inset var(--dur) var(--ease); } }show more

💡 CSS Tip! Two circles, one arrow, and CSS... magic. 🪄 A cool demo packed with modern features (anchor positioning, attr(), container queries, shape(), and more!) 🤩 The shape and position of the arrow are fully controlled using CSS.show more

progressive css-only pagination indicators w/ anchor positioning 👨‍🍳 nav::before... { position-anchor: --h; } nav::before { left: anchor(left); } a:hover { anchor-name: --h; } use the nav pseudoelements, ::before for intent, ::after for current 🤙show more

A fun CSS-only experimentation using modern features (anchor positioning,... @​property, :has(), and more!) for this week #codepenchallenge Demo: via CodePen.IOshow more

Responsive magnetic link effect using CSS anchor positioning 🧲... nav li:nth-of-type(2) { anchor-name: --i2; } nav:has(li:nth-of-type(2) a:hover) { --a: --i2; } ul::before { /* indicator */ left: anchor(var(--a) left); width: anchor-size(var(--a) width); }show more

TradingView doesn't let you build custom order flow charts... natively. With Percept, tick-level footprint rendering comes natively. Just stream your own data into it. > Render ultra-smooth order flow with our native engine > 3 display modes for tick-level footprint charts out of the boxshow more

💡CSS Tip! Create a tooltip that follows an anchor... with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!show more

table of contents marker w/ modern css 🧑‍🍳 .toc... { scroll-target-group: auto; } a:target-current { anchor-name: --active; } .toc::after { position-anchor: --active; top: anchor(top); } fun progressive enhancement, no js 🤙show more

✨ Build Next.js, Tailwind CSS & shadcn UIs with... a visual editor. Export the code with one click. Link below.show more

✨ Build Next.js, Tailwind CSS & shadcn websites with... drag and drop. And yes, you can export the code. Link below.show more

How to create a Simple Sushi 🍣 Restaurant Landing... Page. I’ll provide you with the HTML, CSS, and JavaScript code snippets to build it step by step.show more

Sigma BF - Rebuilt with CSS

To all the devs telling me my button style... was impossible to build with code. I did it in Webflow in 10 minutes using only HTML/CSS. No SVGs.show more

LiveCharts2 lets you build charts and graphs that work... across phones, desktops, and web browsers with one design, fixing the limitations of its earlier version.show more