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

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

💡 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

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

Pretty amazing that we can now implement swipeable Tabs... with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉show 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

How I build with Claude Fable 5 1. CSS... position sticky = how a product follows you down the page 2. Monospace fonts = instantly signal raw and authentic 3. CSS object-fit cover = full bleed photography fills any screen 4. GSAP ScrollTrigger = pins product while background scrolls position fixed + transform = floating centered label 5. CSS grid + z-index = editorial depth flat sites lack Save this 🏔️show more

a pixelating logo carousel made with css