Lmst
Login

#cssMaths

Ana Tudor 🐯anatudor
2026-01-30

Missed this, made on the 1st of Jan on @codepen:

✨ Sliding border glow on hover for beveled cards, heavily commented codepen.io/thebabydino/pen/Eay

Trivial if we have `corner-shape` support & even simpler with `border-area`. But here it's cross-browser.

Detailed explanation of the Maths behind on Ko-fi/ Patreon. This way, you get to both become smarter and support my work so I can continue coding.

Ana Tudor 🐯anatudor
2026-01-11

Variable aspect ratio cards with conic gradients meeting along the diagonal.

First coded this when we didn't have inverse trigonometric functions in - can you figure out how on your own?

@csstricks post css-tricks.com/variable-aspect

@codepen demo codepen.io/thebabydino/pen/XWp

Ana Tudor 🐯anatudor
2026-01-03

Pure, minimal responsive hex with no breakpoints 🎇

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

Ana Tudor 🐯anatudor
2025-12-20

Exploding triakis octahedron (short pyramids added on top of the faces) turning into an excavated octahedron (short pyramids dug into the faces) with pure - live on @codepen: codepen.io/thebabydino/pen/Dyr

Ana Tudor 🐯anatudor
2025-12-18

Styled native range input with time value display on @codepen: codepen.io/thebabydino/pen/raY

Uses this CSS mathematical functions trick to display time/ decimal numbers via `counter` in pseudo `content` reddit.com/r/css/comments/1pas

Screenshot of time progress slider.
Ana Tudor 🐯anatudor
2025-12-17

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

Ana Tudor 🐯anatudor
2025-10-31


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

Ana Tudor 🐯anatudor
2025-10-29

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 (≤20 declarations) should work when changing their number/ gap.

Try to code it yourself before checking my solution reddit.com/r/Frontend/comments

Live on @codepen: codepen.io/thebabydino/pen/ZYQ

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.
Ana Tudor 🐯anatudor
2025-10-16

Because someone just hearted this... here's one of my earlier @codepen demos using CSS trigonometric functions codepen.io/thebabydino/pen/Exe

Linked demo screenshot: Pure CSS angled sections. Shows a support test and instructions for how to play with the demo.
Ana Tudor 🐯anatudor
2025-10-02

For now, we can use the `tan(atan2())` hack by @JaneOri in order to extend support to Firefox as well: dev.to/janeori/css-type-castin

You can see the Firefox fallback version in action on @codepen codepen.io/thebabydino/pen/ZYG

The `round()` is there to avoid rounding errors in getting the angle via `atan2()` and then going back from an angle to a ratio using `tan()` (see DevTools screenshot).

A mathematical diagram illustrating the relationship between the tangent function, the angle 'a', and the lengths 'w' and 'u' in a right triangle.@supports not (scale: calc(100cqh/3lh)) { @property --w { syntax: '<length-percentage>'; initial-value: 0px; inherits: true } @property --u { syntax: '<length-percentage>'; initial-value: 0px; inherits: true } .grid::before { --f: round(tan(atan2(var(--w), var(--u))), .00001) } }Screenshot of browser developer tools showing a grid layout with items numbered from 1 to 18. The grid has a header indicating the number of auto-fill columns, which is 8. The inspector highlights CSS variables related to grid sizing.
Ana Tudor 🐯anatudor
2025-10-01

... though there are really cool things we could do with it, things that I've been waiting to be able to do ever since mathematical functions were added to the spec nitter.net/anatudor/status/153

You can see more examples in this @csstricks article by Amit Sheen css-tricks.com/css-typed-arith

.grid { --u: 7em; display: grid; grid-template-columns: repeat(auto-fill, var(--u)); container-type: inline-size } .item, .grid::before, .grid::after { --n: max(1, round(down, 100cqw/var(--u))) }
Ana Tudor 🐯anatudor
2025-10-01

Did you know you could get the number of `auto-fit` columns of a grid by dividing the grid width (known to the grid's children/ pseudos as `100cqw` if we make the grid a container) to the unit column width `--u`?

See the live demo on @codepen codepen.io/thebabydino/pen/zxG

No Firefox yet... and the bug 🪲 looks like it's dormant 😿 bugzilla.mozilla.org/show_bug.

Ana Tudor 🐯anatudor
2025-09-01

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

✨ ko-fi.com/post/Blobby-reveal-o

✨ patreon.com/posts/blobby-revea

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.

Ana Tudor 🐯anatudor
2025-08-06

I have a new article out on Frontend Masters: get the number of auto-fit/ auto-fill columns in
frontendmasters.com/blog/count

Check it out, I can assure you you'll probably learn something new. At the very least that some issues have recently been fixed... 😼

Ana Tudor 🐯anatudor
2025-06-01

I made a little thing on @codepen :pure controlled swipe transition codepen.io/thebabydino/pen/azO

Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.

Inspiration x.com/avanderpotte/status/1923
(via @codrops motion highlights roundup)

cc @bramus

Ana Tudor 🐯anatudor
2025-05-02

Someone asked how to create such cross-browser wave dividers that keep the same height as the width changes, so here's my take on it reddit.com/r/css/comments/1kcm

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

`mask` is another option, but needs an extra container and container query units, so not as well supported, plus it wouldn't be exactly the same shape.

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.

Ana Tudor 🐯anatudor
2025-03-24

Simplifying animations with variables and mathematical functions.

Same result, just not writing almost the same `text-shadow` a bunch of times in a bunch of keyframes.

Live test on @codepen codepen.io/thebabydino/pen/MYW


Old CSS ``` .my-elem { animation: glow 5s ease-in-out infinite } /* repeating most of the shadow so many times */ @keyframes glow { 0% { text-shadow: 0 0 5em red /* hsl( 0 100% 50%) */ } 16.7% { text-shadow: 0 0 1em yellow /* hsl( 60 100% 50%) */ } 33.3% { text-shadow: 0 0 5em lime /* hsl(120 100% 50%) */ } 50% { text-shadow: 0 0 1em cyan /* hsl(180 100% 50%) */ } 66.7% { text-shadow: 0 0 5em blue /* hsl(240 100% 50%) */ } 83.3% { text-shadow: 0 0 1em magenta/* hsl(300 100% 50%) */ } 100% { text-shadow: 0 0 5em red /* hsl(360 100% 50%) */ } } ``` New CSS ``` @property --hue { syntax: '<angle>'; initial-value: 0deg; inherits: false } .my-elem { /* no repetition */ text-shadow: 0 1px calc(3em + 2em*cos(var(--hue))) hsl(var(--hue) 100% 50%); animation: hue 5s linear infinite } @keyframes hue { to { --hue: 1turn } } ```
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

Because someone just hearted this demo on @codepen
codepen.io/thebabydino/pen/wvy

This was one of the very first demos I made using trigonometric functions back in '22. They were only supported by Safari at that point and it was a lot of trouble to get to actually try this as I'm on Linux.

Client Info

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