I turn 13 on @codepen in June, so here are my 13 most hearted demos:
1092
#CSS infinite #scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb - my only demo to ever get to 1K
without being in most hearted of the year first
mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)
#CSSVariables をはじめ #CSS まわりの最近の進化はほんともっと注目されてよいと思っている。
#CSS ってなんか最近のフロントエンドでも「低レイヤーの話」みたいになっちゃってて、目新しいフレームワークっぽいシャレた名前もない「 #CSS の新機能!」っていっても、なんかいまいち盛り上がりきらない感があるような気がするんだけど、 #CSS はいま素で書くだけでもすごい強力になってきている(むしろフレームワークに寄らずに素の CSS 書きたい気持ちすらある
#Misskey の中の人が #CssVariables とか #RelativeColorSyntax について書いてくれてとても俺得な記事だった
最近はここに #oklch 関数も組み込めるので、さらに進化が進んでいる…
CSS Variablesはここまで進化した
https://gihyo.jp/article/2025/04/misskey-19
* 明度・彩度・色相もそれぞれ変数化できる #CssVariables
* 特定の色を相対的に変化可能な #RelativeColorSyntax
* 色をより人間の知覚に近い形で扱える #oklch
このあたりは、現存するどのデザインツールよりも、現在のブラウザーで使える #CSS の機能のほうが柔軟で拡張性が高い。
…あれ、ということはやっぱり最強のデザインツールは #CSS なのでは
One of the demos I made years ago on @codepen and it only worked in Chrome back then, as it animated #CSS vars in order to change various parts of a transform chain separately. As well as the background/ opacity, using some of the same CSS vars.
https://codepen.io/thebabydino/pen/XOVJPm
Finally cross-browser!
And here are two more pure CSS demos showcasing animated halftone patterns, while the elements they're on either fill the full viewport or are positioned in 3D.
https://codepen.io/thebabydino/pen/gOpMeWv
https://codepen.io/thebabydino/pen/RwQjpmQ
A couple more such halftone patterns, both of which have a video of me coding them from scratch.
https://codepen.io/thebabydino/pen/LYyNVJQ
https://codepen.io/thebabydino/pen/xxYMOoQ
Animating a custom property* that the gradients used for the effect depend on can also produce cool effects, like in https://codepen.io/thebabydino/pen/wvRVNgv - also an entry for this week's #CodePenChallenge
And a solution to https://mastodon.social/@anatudor/111261576456520013
*not yet in Firefox stable, only in Nightly https://mastodon.social/@anatudor/112157049928865915
```css
--layer-name-a: 100;
--layer-name-b: 200;
--layer-name-c: 300;
.foo {
z-index: var(--layer-name-a);
}
.bar {
z-index: var(--layer-name-b);
}
.baz {
z-index: var(--layer-name-c);
}
```
#CssVariables