Lightnews — Scholar-powered news

Ana Tudor

@anatudor.bsky.social

5.2K followers 58 following 2.5K posts

Same me, another platform. I code stuff. It usually involves some Maths. I enjoy music mandatory religion classes warned me about. And other things that may kill me. https://thebabydino.github.io/

thebabydino.github.io

Posts Media Videos Starter Packs

Pinned

Ana Tudor @anatudor.bsky.social · Jul 31

For anyone who missed it: I have now set up membership tiers on Ko-fi! #KofiMembershipChallenge

ko-fi.com/anatudor

Because praise doesn't keep me afloat... but you can!

Support Ana Tudor

If you like my work and you want me to be able to continue coding, please consider supporting it.

ko-fi.com

2 4

Ana Tudor @anatudor.bsky.social · 6h

The time of year to remember this absolute gem... 😈

www.youtube.com/watch?v=a8u1...

Pretty Songs with Death Metal Lyrics!

YouTube video by Steve Terreberry

www.youtube.com

Ana Tudor @anatudor.bsky.social · 7h

Forgive me for I have sinned and asked Gemini for dummy text for CodePen demos...

Partial screenshot of me asking Gemini for "an unreal Halloween recipe featuring things that are bound to sound disgusting like spider webs, human limbs, roaches, mud, snake venom?" and getting back a "gloriously grotesque" recipe for "Grave Dirt and Viper's Brew".

Ana Tudor @anatudor.bsky.social · 9h

They don't factor in scrollbars. Not per spec & last I checked, not in practice in browsers either.

www.smashingmagazine.com/2023/12/new-...

`dvh` helps if the keyboard pops up or smth. But `dvw` & `svw` include the vertical scrollbar.

Container query units are the answer bsky.app/profile/anat...

1 2

Ana Tudor @anatudor.bsky.social · 19h

As for the `margin`, I'd either zero it on all elements (poor man's reset):

```
* { margin: 0 }
```

Or specifically on the `body`.

```
body { margin: 0 }
```

The `html` doesn't have a `margin` by default. And neither do `div` elements, which I'm assuming `#app` is.

Ana Tudor @anatudor.bsky.social · 19h

Why?

Assuming `#app` is the one visible child of the `body`, you can have it cover all available viewport space minus any scrollbars with:

```
html, body { display: grid }
html { min-height: 100% }
```

Then you can set any styles you want on the `#app`, including a flex layout if that works best.

2 4

Ana Tudor @anatudor.bsky.social · 19h

Even if it wasn't problematic, setting `width: 100vw` on the `body` would still be unnecessary.

And now we have container query units. Make the `html` a container, use `100cqw`. Like here codepen.io/thebabydino/...

If other containers are needed, we can do this frontendmasters.com/blog/using-c...

Super simple full-bleed + breakout tactic

[My take on a question asked on reddit](https://www.reddit.com/r/css/comments/1o3j0cl/comment/niwx1pj/). --- If the work I've been putting out since ...

codepen.io

1 6

Ana Tudor @anatudor.bsky.social · 20h

Please stop setting `width: 100vw` on the `body`.

It's unnecessary. By default, the `body` stretches horizontally as much as necessary.

It's problematic. Setting `width: 100vw` on it can cause overflow even if you remove the default `margin`... because the page may have a scrollbar.

#CSS

5 8 52

Reposted by Ana Tudor

Camil Stoenescu @camilstoenescu.bsky.social · 21h

Stray beauty #cat #Bucharest

1 15

Ana Tudor @anatudor.bsky.social · 1d

This uses JS and a circle for each dot. However, it can be done with pure CSS and one element using this technique frontendmasters.com/blog/pure-cs...

7 33

Ana Tudor @anatudor.bsky.social · 1d

Old code in general is a thing with LLMs frontendmasters.com/blog/chatgpt...

ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch

It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s wha...

frontendmasters.com

2 10

Ana Tudor @anatudor.bsky.social · 2d

I know that, but from a practical standpoint, `curve` doesn't work in Firefox at this point even with the flag enabled (`arc` does). At the same time, if you do have the flag enabled, the `@supports` test with a `curve` in it passes, so in addition to `shape()` failing, the fallback fails too.

Ana Tudor @anatudor.bsky.social · 2d

Also in theses cases, it's really useful to either min the height to twice the rounding size or max the rounding to half the height.

Ana Tudor @anatudor.bsky.social · 2d

Did something similar with `arc` instead of `curve`
codepen.io/thebabydino/...

`arc` is already supported in Firefox behind a flag. While `curve` isn't, but the `@supports` test with a `curve` path still passes, so then it doesn't even use the fallback.

Cool concave rounding header component

Mentioned in my [Obsessing Over Smooth `radial-gradient()` Disc Edges](https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edge...

codepen.io

3 3

Ana Tudor @anatudor.bsky.social · 2d

Don't miss your flight. I once heard my name called because I was so lost in CSS, it didn't register with me people were boarding.

1 2

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Jul 20

#tinyCSStip: sphere volume distribution with polar coordinates!

u = rand(0, 1)
v = rand(0, 1)
w = rand(0, 1)

θ = 2·π·u
φ = acos(2·v - 1) - π/2

❌ DON'T (middle cluster)
r = R·w

✅ DO
r = R·∛w

➞ x,y,z
x = r·cos(φ)·sin(θ)
y = r·sin(φ)
z = r·cos(φ)·cos(θ)

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

Uniform distribution of dots within the volume of a sphere.

1 1

Ana Tudor @anatudor.bsky.social · 3d

For over a decade, by far my most popular Stack Overflow answer codepen.io/thebabydino/...

#CSS

Arched menu (no JS, no SVG)

2015 version of [a menu I created back in 2012](http://dabblet.com/gist/3979221/cb69c5e8ccf0745fff2c94b47b27b108931f1a15) to answer [this SO question](...

codepen.io

Ana Tudor @anatudor.bsky.social · 3d

Little seasonal thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen.io demo
codepen.io/thebabydino/...

Detailed explanation of the how behind in this @css-tricks.bsky.social post css-tricks.com/css-ing-cand...

Bonus: a hover animated, Chrome-only version codepen.io/thebabydino/...

#CSS

Same buttons in various stages of hover, when the filling content-box get XOR-ed with the text.

2 4

Ana Tudor @anatudor.bsky.social · 3d

An older little #canvas demo on @codepen.io: codepen.io/thebabydino/...

mouseover the 🔺🔻 - your eyes see what your mind wants to see 😼

#JS

Screenshot of the linked CodePen demo. A grid of randomly oriented, randomly smaller or bigger equilateral triangles. This grid of triangles is painted using a rainbow radial gradient at the mouse cursor position, with triangles further away from the cursor also fading a little.

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Jun 18

Turn black to red CSS linear gradient into step one with a super simple #SVG #filter: interactive demo allowing to drag a slider to change the number of steps n and see how the visual result and relevant part of the filter code change.

@codepen.io demo codepen.io/thebabydino/...

Feedback?

#CSS

Red channel n steps gradient - the interactive demo

...

codepen.io

3 3 16

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · May 20

A little simple corner only gradient border on @codepen.io: codepen.io/thebabydino/...

Allows for semi-transparent background. Minimal code, easy to tweak to your needs, just change the variables. Heavily commented. Corner spacing around text adjusts with border rounding.

#CSS

Corner-only border (allows for corner rounding & gradient border)

Continuous gradient border, but only at the rounded corners. The element also has a transparent background through which we can see the image backdrop ...

codepen.io

1 7

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Oct 16

Someone hearted my orbits loader so I just had to scramble to quickly update it to use CSS grid instead of absolute positioning, CSS trig instead of precomputing tan in the Pug & passing it to the #CSS as a custom property & individual transform functions.
On @codepen.io 👉 codepen.io/thebabydino/...

Pastel balls going around on concentric orbits. The bigger the orbit, the more balls on it.

3 18

Ana Tudor @anatudor.bsky.social · 3d

One of my earliest #3D @codepen.io demos got a '25 remake codepen.io/thebabydino/...

Uses #CSS variables + trigonometric functions. If you've ever looked at the MDN trig function examples & wondered "why would I ever use that?" - I get it, those are bad examples. This demo has better ones.

#Maths

Pure CSS Rotating Spiral Image Gallery

2025 remake using modern CSS. --- If the work I've been putting out since early 2012 has helped you in any way or you just like it, then please remem...

codepen.io

Reposted by Ana Tudor

rem / Remy Sharp @remysharp.com · 3d

We don't have a sponsor for #FFConf 2025 scholarship programme (we didn't last year too) I really don't want to have to add this terrible sticker again…

The sponsorship allows us budget not only for ticket allocation, but also travel and hotel for under represented groups.

💌 [email protected]

A crappy 90's style clipart that reads "Rem & Jules" being the scholarship sponsors.

1 6 4

Ana Tudor @anatudor.bsky.social · 3d

A little pure #CSS demo I made a while back on @codepen.io: codepen.io/thebabydino/...

Ana Tudor @anatudor.bsky.social · 3d

Because someone just hearted this demo I made over half a decade ago on @codepen.io:

codepen.io/thebabydino/...

It's a pure #CSS Platonic solids gallery. They animate on hover/ tap. All is computed, there are no magic numbers.

#Maths #3D #Geometry

Pure CSS Platonic solids gallery (fully responsive, hover/ tap to animate)

Both the shapes and the shading are pure CSS. The polygonal faces are created using `clip-path`, so the demo only works in modern browsers supporting t...

codepen.io

2 21