#CSSVariables をはじめ #CSS まわりの最近の進化はほんともっと注目されてよいと思っている。
#CSS ってなんか最近のフロントエンドでも「低レイヤーの話」みたいになっちゃってて、目新しいフレームワークっぽいシャレた名前もない「 #CSS の新機能！」っていっても、なんかいまいち盛り上がりきらない感があるような気がするんだけど、 #CSS はいま素で書くだけでもすごい強力になってきている（むしろフレームワークに寄らずに素の CSS 書きたい気持ちすらある
#Misskey 
の中の人が #CssVariables とか #RelativeColorSyntax について書いてくれてとても俺得な記事だった 
最近はここに #oklch 関数も組み込めるので、さらに進化が進んでいる…
CSS Variablesはここまで進化した
https://gihyo.jp/article/2025/04/misskey-19
A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 
Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/
Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao
Also uses container queries, CSS trigonometric functions.
* 
明度・彩度・色相もそれぞれ変数化できる #CssVariables
* 
特定の色を相対的に変化可能な #RelativeColorSyntax
* 
色をより人間の知覚に近い形で扱える #oklch
このあたりは、現存するどのデザインツールよりも、現在のブラウザーで使える #CSS の機能のほうが柔軟で拡張性が高い。
…あれ、ということはやっぱり最強のデザインツールは #CSS なのでは 
Flip card on hover, flip back on hover out...
... but on touchscreens, flip it on click and then flip it back on second click!
A mostly #CSS solution, using #3D transforms, variables, grid, pointer MQ + a little bit of #JS.
Because somebody asked how to do it https://www.reddit.com/r/css/comments/1jm0a7v/comment/mk7zmd5/
Live demo on @codepen: https://codepen.io/thebabydino/pen/MYWPeer
Because I saw a @codepen demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...
Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints https://codepen.io/thebabydino/pen/QwWQqeR
No JS #fluid animation. The animation is created in #CSS, where I'm animating the values of two custom properties back and forth. `feTurbulence` creates the background, `feDisplacement` map uses the CSS-animated input to make it move.
My take on this question https://www.reddit.com/r/webdev/comments/1izlhkw/comment/mfedw8s/
My most popular demo of 2024. By far. My second most hearted @codepen demo ever.
https://codepen.io/thebabydino/pen/WNVPdJg
Pure #CSS, single div, very little code overall; and that's even including layout, prettifying & animation styles. Oh, heavily commented too.
I haven't used style queries much, but just gave them a spin and got an idea (that I've just tested & works) about how we can have ranges in style queries right now. 
That is, red background if --k <= 20, orange background if 20 < --k <= 40 and so on...
Here's a little thing I made for the 1st #CodePenChallenge of '25: pure #CSS tilt & zoom grid on scroll!
Check it out on @codepen
https://codepen.io/thebabydino/pen/jENzprY
Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.
Chromium only.
Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.
As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.
Saw https://www.youtube.com/watch?v=An3QMWg3m1c linked last evening & gave the challenge a quick go myself.
My approach was a mostly #CSS one, with minimal HTML (no extra wrappers) and JS (used only to update top item index, ~200 bytes minified).
While it was working, it wasn't pretty, so today I polished the demo & heavily commented the CSS - check it out on @codepen: https://codepen.io/thebabydino/pen/jENaPjd
Neohtop — это Htop на стероидах
Приложение позволяет мониторить процессы в реальном времени, отслеживать использование CPU и памяти, а также обладает современным интерфейсом с темным и светлым режимами.
Пользователи могут искать процессы по различным критериям, фиксировать важные процессы и управлять ими, включая завершение.
Статистика системы обновляется автоматически, а сортировка доступна по любому столбцу.
Для разработки используется SvelteKit и TypeScript на фронтенде, Rust и Tauri на бэкенде, а также CSS Variables для стилизации и FontAwesome для иконок.
Another @codepen remake: this hover effect menu https://codepen.io/thebabydino/pen/DZpgaZ
Using flexbox instead of floats and CSS variables & mathematical functions so that on hover we have a simple transition and not the abomination that is keyframes at 49.999% and 50%.
Another super old @codepen demo I redid with modern #CSS is this yummy menu https://codepen.io/thebabydino/pen/AoxZQq
CSS grid instead of absolute positioning, clip-path instead of nested skew and un-skew, CSS variables to avoid setting a separate transform chain on each item... and more!
Updated 10+ year old SO answer on how to position items for a circular menu https://stackoverflow.com/a/15185180/1397351
Because #CSS got better in the meanwhile. This remake uses CSS grid instead of absolute positioning, CSS vars to reduce the code and CSS trigonometry for improved maintainability.
Here's another little something from forever ago that I've recently updated on @codepen: a circular menu!
https://codepen.io/thebabydino/pen/nKzaPQ
The code was really outdated, so I redid it to use CSS variables, trigonometry, grid, clip-path, SVG filters for the inner shadow & grain.
Hope you like it!
Someone hearted this circling radial gradients animation, so I updated it to use #CSS trigonometric functions.
https://codepen.io/thebabydino/pen/poKeMZd?editors=0100
This reduced the amount of compiled CSS to about half. It's also cross-browser now - as of this summer Firefox supports animating CSS vars.
What is this dark magic? 
It's pure #CSS horizontal slide on vertical scroll mix!
With scroll-driven animations + `position: sticky`!
Check out the demo on @codepen 
https://codepen.io/thebabydino/pen/WNqJXXa
cc @bramus
