Lmst

#CssVariables

Pure #CSS #3D demo on @codepen: polyhedra morphing sequence https://codepen.io/thebabydino/pen/abmNveW

Absolutely no magic numbers, everything computed.

See Pen description for the how behind 😼

#transform #cssTransform #polyhedron #cssTransforms #polyhedra #octahedron #tetrahedron #cube #Maths #geometry #cssVariables #code #coding #frontend #web #dev #webDev #webDevelopment

A little @codepen demo: resizable panels with draggable panel separators https://codepen.io/thebabydino/pen/gbPBxJP

Hopefully at least more accessible than the alternatives. The description has info about my testing this thing.

#CSS #a11y #cssLayout #JS #draggable #cssGrid #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables

Demo screenshot. Shows three panels, two at the top, separated by the bottom one using one separator and separated between them using another separator.

Live demo on @codepen: https://codepen.io/thebabydino/pen/VYaJBoj

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

It is ok to say "CSS variables" instead of "custom properties"

https://blog.kizu.dev/css-variables/

#HackerNews #CSSVariables #CustomProperties #WebDevelopment #FrontEndDesign #CodingTips

I have a new article out!

Super Simple Full-Bleed & Breakout Styles
https://frontendmasters.com/blog/super-simple-full-bleed-breakout-styles/ - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier told me to be proud of it 😛

#CSS #cssLayout #cssGrid #cssVariables #containerQueries #containerQuery #code #web #webDev #webDevelopment #dev #coding #frontend #Halloween

#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filter

#CSS #cssGradient #cssVariables #code #web #dev #webDevelopment #webDev #frontend #coding #cssMaths

There are n equally sized items arranged in half a circle on the left, from top to bottom, with the same gap g in between. How do you do it? Cross-browser, same #CSS (≤20 declarations) should work when changing their number/ gap.

Try to code it yourself before checking my solution https://www.reddit.com/r/Frontend/comments/1oi4dfe/comment/nlzvlry/

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

#Maths #geometry #trigonometry #code #cssMaths #coding #frontend #cssLayout #webDev #webDevelopment #web #dev #cssGrid #cssTransform #cssVariables

Screenshot. Shows 20 equally sized items arranged in half a circle (from 12 o'clock to 6 o'clock) on the left viewport side. The very first touches the left and top viewport edges. The very last touches the left and bottom viewport edges. There is a little gap in between them, exact same gap between all of them.

For all Ko-fi/ Patreon supporters...

First off, thank you for supporting my work and helping me stay afloat!

And second, something new dropped today...

✨ https://ko-fi.com/post/Blobby-reveal-on-hover-E1E31KKI57

✨ https://www.patreon.com/posts/blobby-reveal-on-137845036

PS: hope you like SVG filters because there's more cooking/ coming soon. Next thing *very* soon because it's functional (even if not pretty yet) & dying to share it.

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

そしてこうなってくると、#Tailwind はもう #CSSVariables だけでいいんじゃない？という気持ちにもなって、だったら #OpenProps のほうが使いやすいんだよなーという気持ちがある

Open Props: sub-atomic styles
https://open-props.style/

Wie verwendet man CSS Variablen (CSS & HTML & Javascript - Anleitung / Tutorial]

https://video.maechler.cloud/w/c8AkMdkXY7EDz9nop8N9Q4

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

https://starbeamrainbowlabs.com/labs/shinycard.html

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

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

Set the #CSS gradient as one with two end stops and no steps and apply a super simple #SVG #filter (same idea as here https://mastodon.social/@anatudor/114703583973454917 ) that makes it stepped.

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

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

Different types of gradients (linear, radial, conic) turned stepped via a simple SVG `filter`.

Using CSS variables solves both these problems, but we cannot use #CSS variables inside the #Sass `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 https://codepen.io/thebabydino/pres/bNdjKwJ

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

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

A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV

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

#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables

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

#CssVariables

Client Info