#CSSvariables

Starbeamrainbowlabssbrl@fediscience.org
2025-07-08

It's definitely not perfect but I made a thing! It's a shiny card effect 🎴 with 3d perspective, done in mostly-pure CSS with a bit of Javascript for cursor positions etc.

📱 Doesn't work very well on mobile at the moment though - it's on my todo list.

In other news, CSS container queries are both fun, useful, and confusing. 📦📦📦

starbeamrainbowlabs.com/labs/s

#HowDoITag #IDontEvenKnowIJustPostHere #Noodling #WebNoodling #NoodlingAround #CSS #CssVariables #WereUsed #AndAbused #CSS3D

Ana Tudor 🐯anatudor
2025-06-24

So what else could we do? Use an SVG filter!✨

Set the gradient as one with two end stops and no steps and apply a super simple (same idea as here mastodon.social/@anatudor/1147 ) that makes it stepped.

Works for all gradient types - see this @codepen demo codepen.io/thebabydino/pen/raV 😼

Different types of gradients (linear, radial, conic) turned stepped via a simple SVG `filter`.
Ana Tudor 🐯anatudor
2025-06-24

Using CSS variables solves both these problems, but we cannot use variables inside the `mix()` function, we have to use the CSS `color-mix()`. This means the compiled output looks way uglier.

You can check it out in this @codepen demo codepen.io/thebabydino/pres/bN

Screenshot of the modified Sass mixin using CSS variables and `color-mix()`. On the right, we also have a DevTools panel open, showing the changing one of the end steps changes all intermediary ones this way.```
@use 'sass:math';

// $n: number to round to a certain precision
// $p: rounding precision, how many decimals to keep
@function round-to($n, $p: 2) {
	@return round($n*math.pow(10, $p))*math.pow(10, -$p)
}

// $c0: gradient start
// $c1: gradient end
// $n: number of steps
// $p: rounding precision, how many decimals to keep
@function stop-list($c0, $c1, $n, $p: 2) {
	$l: (); // list of stops
	
	@for $i from 0 to $n {
		$l: $l, 
				if($i > 0, 
					if($i < $n - 1, 
						color-mix(in srgb, $c1 round-to($i*100%/($n - 1), $p), $c0), 
						$c1), 
					$c0) 
		// 1st stop position for each stop
		// not set (empty '') for very first stop
		    if($i > 0, 0, unquote('')) 
		// 2nd stop position for each stop
		// not set (empty '') for very last stop
		    if($i < $n - 1, round-to(($i + 1)*100%/$n, $p), unquote(''))
	}
	
	@return $l
}

p {
	background: linear-gradient(90deg, stop-list(var(--c0), var(--c1), 10))
}
```

```
p {
	background: linear-gradient(90deg, 
			var(--c0) 10%, 
			color-mix(in srgb, var(--c1) 11.11%, var(--c0)) 0 20%, 
			color-mix(in srgb, var(--c1) 22.22%, var(--c0)) 0 30%, 
			color-mix(in srgb, var(--c1) 33.33%, var(--c0)) 0 40%, 
			color-mix(in srgb, var(--c1) 44.44%, var(--c0)) 0 50%, 
			color-mix(in srgb, var(--c1) 55.56%, var(--c0)) 0 60%, 
			color-mix(in srgb, var(--c1) 66.67%, var(--c0)) 0 70%, 
			color-mix(in srgb, var(--c1) 77.78%, var(--c0)) 0 80%, 
			color-mix(in srgb, var(--c1) 88.89%, var(--c0)) 0 90%, 
			var(--c1) 0)
}
```
Ana Tudor 🐯anatudor
2025-06-18

A little something on @codepen: pure icosphere of spheres codepen.io/thebabydino/pen/poY

Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.

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

Ana Tudor 🐯anatudor
2025-05-13

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

codepen.io/thebabydino/pen/zRZ

Ana Tudor 🐯anatudor
2025-05-13

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

1️⃣ 1092 ♥️ infinite gallery codepen.io/thebabydino/pen/XJr - 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)

Ana Tudor 🐯anatudor
2025-05-09

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 reddit.com/r/css/comments/1kgp

Live on @codepen
codepen.io/thebabydino/pen/azz

Uses a tiny bit of until we can get the pointer position in pure - see this proposal by @bramus github.com/w3c/csswg-drafts/is

2025-04-22

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

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

2025-04-22

#Misskey :misskey: の中の人が #CssVariables とか #RelativeColorSyntax について書いてくれてとても俺得な記事だった :amaze:
最近はここに #oklch 関数も組み込めるので、さらに進化が進んでいる…

CSS Variablesはここまで進化した
gihyo.jp/article/2025/04/missk

Ana Tudor 🐯anatudor
2025-04-15

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 reddit.com/r/css/comments/1jyu

Live on @codepen codepen.io/thebabydino/pen/dPP

Also uses container queries, CSS trigonometric functions.

2025-04-14

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

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

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

Ana Tudor 🐯anatudor
2025-03-28

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 solution, using transforms, variables, grid, pointer MQ + a little bit of .

Because somebody asked how to do it reddit.com/r/css/comments/1jm0

Live demo on @codepen: codepen.io/thebabydino/pen/MYW

Ana Tudor 🐯anatudor
2025-03-17

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 grid + clip-path + mathematical functions responsive version with no breakpoints codepen.io/thebabydino/pen/QwW

Screenshot of linked demo with DevTools open, highlighting the main grid and showing there are no media queries at play.
Ana Tudor 🐯anatudor
2025-03-04

No JS animation. The animation is created in , 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 reddit.com/r/webdev/comments/1

Ana Tudor 🐯anatudor
2025-02-24

My most popular demo of 2024. By far. My second most hearted @codepen demo ever.

codepen.io/thebabydino/pen/WNV

Pure , single div, very little code overall; and that's even including layout, prettifying & animation styles. Oh, heavily commented too.

Screenshot of the details page on CodePen, showing it hearted 999 times and viewed 19824 times.
Ana Tudor 🐯anatudor
2025-02-22

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

Screenshot of a basic test for ranges n style queries.
pablolarahpablolarah
2025-02-06

🥤 Pure CSS Mixin for Displaying Values of Custom Properties
by Roman Komarov @kizu

kizu.dev/preview-mixin/

Red text "Pure CSS Mixin for Displaying Values of Custom Properties" with medium pink background on light pink background with illustrated magnifying glass on bottom right
2025-01-21

🎉 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: share-eu1.hsforms.com/1hjk_Mju
#CSS #WebDevelopment #CSSVariables

Ana Tudor 🐯anatudor
2025-01-13

Here's a little thing I made for the 1st of '25: pure tilt & zoom grid on scroll!

Check it out on @codepen

codepen.io/thebabydino/pen/jEN

Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.

Chromium only.

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst