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):
https://frontendmasters.com/blog/background-patterns-with-css-corner-radius/
#css #backgrounds #effects #examples
I’m excited to share that my session from CSS Day is now live on YouTube 🎥
Ever wondered what a CPU is actually built of? And if it's possible to build one using only #CSS? If so, I think you’ll enjoy it. 👍
Would love to hear your thoughts! 😀
🔗 www.youtube.com/watch?v=PFqt...
Code snippet detailing CSS anchor-scope property values, including single, multiple, and global value examples for web development.
Using CSS Anchor Positioning with repeated components?
anchor-scope is now part of Baseline 2026 🆕
It prevents tooltips/popovers from accidentally attaching to the wrong anchor elsewhere in the DOM.
Check it out 👇
developer.mozilla.org/en-US/docs/...
A <main> element with several nested divs. The two of interest are <div class="screen-blur"> and <div class="scanlines">.
hey! thanks :)
there are a few different effects going on here, and they're all made with vanilla CSS. i'll try to break them down.
this is what the general markup looks like. there's a television wrapper with a few overlay layers: the two we're interested in are .screen-blur and .scanlines!
🚀Do we like scroll-driven animations? yes! Do we want scroll-triggered animations? Also yes! Would it be cool to combine them? Ow hell yes! And that's just what I did in this year's Valentine's article, enjoy! ❤️❤️
It's quite lengthy, but also contains some hot tips 🔥
utilitybend.com/blog/css-ani...
CSS converting the oklch() function to an RGB color with color-mix() that takes a color variable and makes a calculation that returns white or black.
Here's a pretty clever, albeit super math-y, way to approximate the contrast-color() function while we're waiting for full support.
css-tricks.com/approximatin...
Today is the tenth anniversary of Firewatch's release. It remains the thing I'm most proud to have worked on. There's more of me inside of Firewatch than in any other game—and I have no doubt there are others on the team who would say the same about themselves. Thanks to everyone who ever played it.
I’m running my annual Valentine’s Day event again! 💖
If you’ve registered for any of my courses in the past, you’ll find a one-time-use coupon code that has been generated just for you. It’ll provide a 50% discount on either of my courses. 😄
State of the Browser is sold out in-person, but £20 will buy you a whole day of online talks by industry experts.
2026.stateofthebrowser.com
The progress() function is sorta like clamp() but returns 1 or 0. Combine it with calc() and you can get weird with it.
css-tricks.com/almanac/func...
A mock-up of my Web Day Out lanyard – use JOIN_RICH for 10% off.
What’s new in web typography?
This is a question I’ll be answering at this year’s webdayout.com
I'll cover the paved cowpaths and the shiny things that bring expressiveness, fine detail, responsiveness, consistency and efficiency to your work.
Use JOIN_RICH to get 10% off.
#typography #css
I always forget what properties are available now so I've written a quick post to put them all in one place
Underlining links with CSS
www.alwaystwisted.com/articles/und...
#FrontEnd #CSS #WebDev #WebDesign
Someone on reddit posted a demo where CSS truncates text from the middle.
They didn't post the code, so here is my shot at it with Flexbox
border-shape can handle both insets and outsets, so you can do effects like this chevron nav (corner-shape can't do both).
This means you get a perfectly-wrapping focus ring without needing to manage z-index or having it partially covered due to overlap.
Demo: codepen.io/una/pen/ByzY...
Overview of the CSS code from the provided link
💡 CSS Tip!
Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!
css-tip.com/clamp-auto/
The same applies to all the sizing values (min-content, max-content, fit-content, etc.)
A CSS-only elastic hover effect, because why not?
css-tip.com/elastic-hover/
A chrome-only experiment using shape(), sibling-index(), linear(), etc.
An Inverted radius tabs demo which uses anchor-positioning + corner-shape + :target
#cssonly
See the full demo on @codepen.io
codepen.io/cbolson/pen/...
Wild how far you can push "customizable select" with just #CSS
nerdy.dev/nice-select
Could scroll-driven animations update a value used by `box-shadow` to make it look like the shadow is coming from a fixed source of light?
Asks @bell.bz bell.bz/fun-shadow-c...
Answers @kittygiraudel.com kittygiraudel.com/2026/02/01/f...
