As a #CSS amateur, I've always just hard coded my colours the traditional way. While working on a light and dark theme switcher on my Hugo blog, I learnt the proper way to do it using the var() function and defining a css variables, e.g. `var(--light-blue)`. I can easily and happily change colours in my theme in the future!

Plus, I get to clean up my custom.css file which got ugly quick from all the random customizations I've been making.

#Hugo #hugossg #cssvariables #blogging

Because somebody hearted this demo I made 7 years ago on @codepen and it hit me I've never shared it here: pure #CSS 1 div animated 🌈 ∞ logo

https://codepen.io/thebabydino/pen/zRZKxK

#code #coding #frontend #cssGradient #web #dev #webDev #webDevelopment #cssVariables #oneDiv #singleDiv #rainbow #infinity

I turn 13 on @codepen in June, so here are my 13 most hearted demos:

1️⃣ 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 #cssTransforms #coding #code #frontend #cssTransform #3D #web #webDev #webDevelopment #dev #maths #mathematics #geometry #filter

Because someone asked for this on reddit: an image that shows when hovering a nav item, under that nav item, but above all others and follows the pointer motion https://www.reddit.com/r/css/comments/1kgpboo/comment/mr78hfx/

Live on @codepen
https://codepen.io/thebabydino/pen/azzjyMM

Uses a tiny bit of #JS until we can get the pointer position in pure #CSS - see this proposal by @bramus https://github.com/w3c/csswg-drafts/issues/6733

#code #coding #frontend #cssVariables #web #dev #webDevelopment #webDev

#CSSVariables をはじめ #CSS まわりの最近の進化はほんともっと注目されてよいと思っている。

#CSS ってなんか最近のフロントエンドでも「低レイヤーの話」みたいになっちゃってて、目新しいフレームワークっぽいシャレた名前もない「 #CSS の新機能！」っていっても、なんかいまいち盛り上がりきらない感があるような気がするんだけど、 #CSS はいま素で書くだけでもすごい強力になってきている（むしろフレームワークに寄らずに素の CSS 書きたい気持ちすらある

#Misskey :misskey: の中の人が #CssVariables とか #RelativeColorSyntax について書いてくれてとても俺得な記事だった :amaze:
最近はここに #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.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

* 🎨 明度・彩度・色相もそれぞれ変数化できる #CssVariables
* 🧮 特定の色を相対的に変化可能な #RelativeColorSyntax
* 🌈 色をより人間の知覚に近い形で扱える #oklch

このあたりは、現存するどのデザインツールよりも、現在のブラウザーで使える #CSS の機能のほうが柔軟で拡張性が高い。

…あれ、ということはやっぱり最強のデザインツールは #CSS なのでは :vivaldia_1:

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

#cssGrid #cssVariables #JavaScript #css3D #code #coding #frontend #cssLayout #web #dev #webDevelopment #webDev

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

#cssLayout #cssGrid #clipPath #hexagon #cssMaths #containerQueryUnits #code #cssVariables #coding #frontend #webDev #web #dev #webDevelopment

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/

#SVG #svgFilter #filter #cssGradient #code #web #dev #webDev #webDevelopment #coding #frontend #cssVariables

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.

#code #coding #frontend #cssVariables #web #dv #webDev #webDevelopment #cssGradient #filter #cssFilter #glow

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

#CSS #styleQueries #cssVariables #code #coding #frontend #containerQueries #web #dev #webDev #webDevelopment

🥤 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/

🎉 Join our Webinar: CSS Custom Properties – Your Modern Web Dev Superpower!
📅 Date: Thu, Jan 30, 2025
⏰ Time: 3:30 PM - 4:30 PM CET
🚀 Speaker: Nazarii Banakh
🔍 What you'll learn:
✅ CSS variables (syntax, scope, best practices).
✅ Flexible style management & maintainable code.
✅ Dynamic themes & adaptive designs.
✅ Real-world examples for effective implementation.
Perfect for devs & designers looking to upskill!
👉 Register now: https://share-eu1.hsforms.com/1hjk_Mju_Rw2V8OIDMAg8jQ2dgwx1
#CSS #WebDevelopment #CSSVariables

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.

#scroll #scrollAnimation #cssVariables #cssGrid #cssLayout #cssMaths #containerQueryUnits #svgFilter #SVG #filter #code #coding #frontend #webDev #webDEvelopment #web #dev

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.

#CSS #code #coding #frontend #web #webDev #dev #webDevelopment #mask #cssMask #cssGradient #conicGradient #cssVariables #cssAnimation

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

#cssGrid #cssSubgrid #cssMaths #Maths #code #coding #frontend #web #dev #webDev #webDevelopment #cssLayout #cssVariables

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);
}

#UI #CssVariables #zindex

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

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