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

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

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

💡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

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

Build Flow Charts with #CSS Anchor Positioning

💡 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

CSS is mind-blowing 🤯 Browser does what it can... to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">show more

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

🚨#BREAKING: CNN’s biggest top news anchor, 77-year-old Chris Wallace,... is leaving and quitting the network after three years.show more

another anchor for the O-line group 😤

Toc toc toc toc

Toc… toc… toc…

Drywall anchor

Hollow drywall anchor

Hollow wall anchor

Anchor being released

Average B site anchor

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

Demonstrating a drywall anchor