Just another clock… but really an excuse to play with CSS anchor positioning to place time labels along expanding clock-hand rings. JS updates a few CSS custom properties, whilst CSS uses and display the values.
The cheese color swapper was just an extra bit of fun.
See the demo on @codepen.io
“The Great CSS Expansion” on turquoise background. Large purple CSS logo tilted over a small yellow JS logo. GitButler logo in the top left.
The great CSS expansion. Pavel Laptev tours CSS features replacing JavaScript libraries like Floating UI, Radix, GSAP, and React Select, cutting up to 322 kB of JavaScript. #css #performance
blog.gitbutler.com/t...
I've proposed a series of changes to popover=hint. If you use web popovers, I'd love to know if the changes in the first post of this issue make sense, or, more importantly, if these changes would break your current usage of popovers.
github.com/whatwg/html/...
A tablet displaying the landing page for 'The Layout Maestro,' a practical CSS course by Ahmad Shadeed. The desk setup includes a cup of coffee, colorful pencils, and LEGO pieces, creating a bright and creative atmosphere.
After a year of building, The Layout Maestro is officially live! 🎹🥳
An interactive CSS course that teaches you how to think in CSS layouts. 70+ lessons, 7 layouts, 150+ interactive demos!
Ready to level up your layout skills? Enroll now👇:
thelayoutmaestro.com
Two framed illustrations show an image without and with an 'object-view-box' CSS property applied, highlighting the cropping effect.
Wouldn't it be great to have native image cropping in CSS?
It actually exists: object-view-box.
This could be the definitive guide to understanding CSS layout methods. From block to subgrid and container queries, this course breaks each layout method down for anyone to understand. It has tons of unique layout walk-throughs. It goes deep and wide enough for a foundation. thelayoutmaestro.com
CSSkit logo surrounded by labels: Format, Lint, Transpile, Bundle, Minify, and Analyze.
CSSkit, a high-performance CSS toolchain written in Rust. Keith Cirkel’s project combines parsing, minification, linting, formatting, and LSP integration into one zero-config tool inspired by oxc. #css #tools
https://csskit.rs
“Folded corner with CSS” title, a cat photo with a folded corner effect, and CSS code with .ImageContainer shadow and clip-path properties.
Folded corner with CSS. Kitty Giraudel breaks down a hover effect where an image corner folds over using clip-path, a white triangle, and shadow elements. Plus CSS transitions for smooth animation. #css #animation
kittygiraudel.com/20...
True, it’s not always WebKit that’s behind!
In fact, here is some data: webstatus.dev/stats#missin...
As of today, the number of features blocked by each browser is:
- Safari: 55
- Firefox: 50
- Chrome: 12
I’ll let you draw your own conclusions…
Hell yeah new @mass-driver.com! MD UI looks awesome. So happy to have backed MD IO on futurefonts.com all those years ago.
mass-driver.com/article/md-u...
CSS snippet detailing the `content-visibility` property with keyword and global values for efficient rendering practices.
Speed up rendering with content-visibility: auto ⚡
This CSS property skips rendering off-screen content until needed, giving massive performance wins on long pages.
⋅ Pairs with contain-intrinsic-size
⋅ Zero-effort lazy rendering
Learn more 👇
developer.mozilla.org/en-US/docs/...
The Big Gotcha of Anchor Positioning: "I thought that one of the benefits of #CSS Anchor Positioning is you can position elements relative to others regardless of where they are in the DOM. But no, you can’t. There are limitations which feel inscrutable at first." frontendmasters.com/blog/the-big...
I've decided to have a dabble into the world of making video content.
If you're interested in HTML/CSS/JS, AI coding tips and tutorials, and just frontend topics in general, subscribe to my new channel, Frontend Guidelines.
www.youtube.com/@FrontendGui...
Building dynamic toggletips using anchored container queries #css
Yay! 🎉 The grid lady (Rachel Andrew) 😉 just announced that subgrid becomes widely available next week! #WebDayOut
TIL about the share_target manifest member, which allows installed Progressive Web Apps to be registered as a share target in the system's share dialog. #WebDayOut
developer.mozilla.org/en-US/docs/W...
A little gem for my typography lover friends: a tool to visually explore glyphs from different typefaces designed by David Jonathan Ross
glyphs.djr.com/
“Everything you never wanted to know about visually-hidden” title and four CSS snippets: .visually-hidden with 11 properties, and three minimal alternatives with 2–3 properties each.
Everything you never wanted to know about visually-hidden. @dbushell.com traces the history of the pattern, tests a minimal CSS approach, and explains why the platform still lacks a native alternative. #a11y #css
dbushell.com/2026/02...
A vertical column of folders with labels on the right fanned out and curving towards the right.
Nice cards fanned out in a subtle arc.
Circular options with icons around another circular item in the center with a star icon.
Curious about custom <select>?
I wrote about some of my recent demos over at @css-tricks.com!
Take a look ✨ css-tricks.com/abusing-cust...
htmxRazor 1.2.0 is out. Toast notifications, pagination, ARIA live regions, CSS cascade layers, View Transitions API support, and hx-on:* attributes for htmx 2.x.
All server-rendered. All Tag Helpers. All ASP.NET Core.
htmxRazor.com
github.com/cwoodruff/htmxRazor
Building a #hash thumbnail navigation using the experimental
:target-before, :target-current & :target-after
With anchor-positioning and animation-timeline thrown in for good measure.
Pure CSS. No JavaScript.
Full demo on @codepen.io
codepen.io/cbolson/pen/...
⌛ Sending an email update about The Layout Maestro course in a few hours including release date, pricing, and more.
If you want to be the first to know (and get a discounted price), subscribe to the newsletter: layoutmaestro.ishadeed.com
This demo doesn't use a single line of JS code to respond to the arrow keys.
Movement of the player is handled 100% by the upcoming `focusgroup` HTML attribute!
Focusgroup was definitely *not* made for this 😅
But, so cool to have this out of the box on the web.
More ➡️ open-ui.org/components/s...
Even if it’s a little cold, when the sun is out - life is good
I must not Tailwind
Tailwind is the style-killer
Tailwind is the little-death that brings class plethora
I'll face Tailwind
I'll permit it to pass over and through my site
And when it's gone past I'll turn the inner eye to see its code
Where Tailwind has gone there'll be nothing
Only CSS will remain
We have a new @piccalil.li homepage!
After lots of research, we determined we were doing a bad job of talking about what we actually do, so this refresh aims to make that *very* clear.
piccalil.li
🦥 A fun update over on the blog: 🦥
Standard HTML Video & Audio Lazy-loading is Coming!
scottjehl.com/posts/lazy-m...
You want lists? You got lists!
In 2017 my Web #Typography book had ~300 words on styling lists. Now, in 2026, I've written 3000 words on the subject!
#CSS sure has moved on...
In graph theory, there are algorithms that find the shortest path between two nodes. I made one with pure CSS (including the graph drawing).
Drag the nodes, and the shortest path will update in real-time!
css-tip.com/graph-theory/
A fun demo powered by all the modern & cool CSS features 🤩
Background Patterns With CSS “corner-radius”, by @preethisam.bsky.social (@frontendmasters.com):
frontendmasters.com/blog/background-patterns...
#css #backgrounds #effects #examples
