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
If you've looked into using #CSS style queries, you may have stumbled onto this article by @Una (it's the first search result) https://developer.chrome.com/blog/style-queries/
One thing that stood out to me was a note about not having range queries yet.
Well... maybe we do! min() and max() to the rescue!
