#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.

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/

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...

Pure CSS Mixin for Displaying Values of Custom Properties
by Roman Komarov @kizu
#CSSVariables #CSSCounters #CSSLayers #Experiment #Practical #CSS #webdev #CSSMixin

https://kizu.dev/preview-mixin/

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

applying a flexible #CSS z-index stack fixed a lot of messy legacy layering issues for me. There might be better ways, but this is very readable when applied, some examples:

.is-sticky {
position: sticky;
z-index: var(--above-page-z);
}

.notification {
z-index: var(--alert-z);
}

#TailwindCSS の設定が #JS ではなく #CSS からできるようになるらしい。
#OpenProps とかで見慣れた #CSS変数 #CSSVariables で設定を上書きするスタイル。

https://tailwindcss.com/docs/v4-beta#css-first-configuration

CSS-Variablen sind ein hilfreiches und inzwischen gut einsetzbares Feature. Mit @property haben sie außerdem kürzlich noch eine nützliche Erweiterung bekommen. Allerdings verhalten sie sich etwas anders als gewohnt, wenn es darum geht, wann sie ungültig werden. Alles wichtige habe ich in diesem kurzen Video zusammengefasst:
https://youtu.be/wEdSfCQJX8M

Neohtop — это Htop на стероидах

Приложение позволяет мониторить процессы в реальном времени, отслеживать использование CPU и памяти, а также обладает современным интерфейсом с темным и светлым режимами.

Пользователи могут искать процессы по различным критериям, фиксировать важные процессы и управлять ими, включая завершение.

Статистика системы обновляется автоматически, а сортировка доступна по любому столбцу.

Для разработки используется SvelteKit и TypeScript на фронтенде, Rust и Tauri на бэкенде, а также CSS Variables для стилизации и FontAwesome для иконок.

src: https://github.com/Abdenasser/neohtop

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.

@codepen demo https://codepen.io/thebabydino/pen/nLNRYx