Ana Tudor
@anatudor.bsky.social
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/
https://thebabydino.github.io/
Pinned
Ana Tudor
@anatudor.bsky.social
· Jul 31
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
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!
ko-fi.com/anatudor
Because praise doesn't keep me afloat... but you can!
Because I had this in my head while cleaning my room earlier www.youtube.com/watch?v=VOCY...
#MotorheadMonday
#MotorheadMonday
Motörhead – Damage Case (Official Audio)
YouTube video by Motörhead Official
www.youtube.com
December 1, 2025 at 8:45 PM
Because I had this in my head while cleaning my room earlier www.youtube.com/watch?v=VOCY...
#MotorheadMonday
#MotorheadMonday
Reposted by Ana Tudor
Real transparency behind text/ around scrollable image. Shape changes as the text reflows. No JS, text isn't split into a span per line.
Can you figure out how to do this before checking out my solution? www.reddit.com/r/css/commen...
Live on @codepen.io: codepen.io/thebabydino/...
#CSS #concave
Can you figure out how to do this before checking out my solution? www.reddit.com/r/css/commen...
Live on @codepen.io: codepen.io/thebabydino/...
#CSS #concave
October 30, 2025 at 9:14 AM
Real transparency behind text/ around scrollable image. Shape changes as the text reflows. No JS, text isn't split into a span per line.
Can you figure out how to do this before checking out my solution? www.reddit.com/r/css/commen...
Live on @codepen.io: codepen.io/thebabydino/...
#CSS #concave
Can you figure out how to do this before checking out my solution? www.reddit.com/r/css/commen...
Live on @codepen.io: codepen.io/thebabydino/...
#CSS #concave
I made an interactive demo to illustrate the `contain` vs. `cover` values. You can play with picking various combinations of box and actual image aspect ratios.
Live demo on @codepen.io: codepen.io/thebabydino/...
#CSS
Live demo on @codepen.io: codepen.io/thebabydino/...
#CSS
December 1, 2025 at 4:11 PM
I made an interactive demo to illustrate the `contain` vs. `cover` values. You can play with picking various combinations of box and actual image aspect ratios.
Live demo on @codepen.io: codepen.io/thebabydino/...
#CSS
Live demo on @codepen.io: codepen.io/thebabydino/...
#CSS
Monday morning tunes
www.youtube.com/watch?v=l5-b...
Still love this song. Shows don't happen until they happen, but, you know... 4 days and a half to go...
www.youtube.com/watch?v=l5-b...
Still love this song. Shows don't happen until they happen, but, you know... 4 days and a half to go...
Pretty Maids - "Undress Your Madness" (Official Audio) #PrettyMaids #UndressYourMadness
YouTube video by Frontiers Music srl
www.youtube.com
December 1, 2025 at 10:32 AM
Monday morning tunes
www.youtube.com/watch?v=l5-b...
Still love this song. Shows don't happen until they happen, but, you know... 4 days and a half to go...
www.youtube.com/watch?v=l5-b...
Still love this song. Shows don't happen until they happen, but, you know... 4 days and a half to go...
Reposted by Ana Tudor
The classic Breadcrumb Navigation using the below technique.
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
November 27, 2025 at 7:53 PM
The classic Breadcrumb Navigation using the below technique.
Demo: codepen.io/t_afif/full/... via @codepen.io
Demo: codepen.io/t_afif/full/... via @codepen.io
Reposted by Ana Tudor
And yet, the only way I was able to build this UI was by giving the AI the right answer, telling it to use subgrid instead of `display: contents`.
If I didn’t understand the mechanisms and limitations of CSS Grid layout myself, I wouldn’t have been able to provide this guidance.
If I didn’t understand the mechanisms and limitations of CSS Grid layout myself, I wouldn’t have been able to provide this guidance.
November 30, 2025 at 4:31 PM
And yet, the only way I was able to build this UI was by giving the AI the right answer, telling it to use subgrid instead of `display: contents`.
If I didn’t understand the mechanisms and limitations of CSS Grid layout myself, I wouldn’t have been able to provide this guidance.
If I didn’t understand the mechanisms and limitations of CSS Grid layout myself, I wouldn’t have been able to provide this guidance.
Reposted by Ana Tudor
An Amur tiger's canine tooth. My swollen finger for comparison.
This cat's equipment is no joke.
#tiger 🐯 #Wilhelma #Stuttgart
This cat's equipment is no joke.
#tiger 🐯 #Wilhelma #Stuttgart
November 30, 2025 at 9:36 AM
An Amur tiger's canine tooth. My swollen finger for comparison.
This cat's equipment is no joke.
#tiger 🐯 #Wilhelma #Stuttgart
This cat's equipment is no joke.
#tiger 🐯 #Wilhelma #Stuttgart
Reposted by Ana Tudor
Reposted by Ana Tudor
Augsburg, you've been lovely!
Well, minus the shit weather yesterday, when I got the feeling some of the animals at the zoo were giving me "never thought I'd see someone stupid enough to go around in this weather" looks.
Well, minus the shit weather yesterday, when I got the feeling some of the animals at the zoo were giving me "never thought I'd see someone stupid enough to go around in this weather" looks.
November 27, 2025 at 1:47 PM
Augsburg, you've been lovely!
Well, minus the shit weather yesterday, when I got the feeling some of the animals at the zoo were giving me "never thought I'd see someone stupid enough to go around in this weather" looks.
Well, minus the shit weather yesterday, when I got the feeling some of the animals at the zoo were giving me "never thought I'd see someone stupid enough to go around in this weather" looks.
🍌 tree?
Well, 🍌 tree-lookalike. There's no wood trunk, there are just those huuuge leaf stems (the so called "dwarf" varieties have 3m stems).
Also: a cluster of bananas may weigh more than me.
(hate I even need to specify this, but not AI, all photos taken by me @ Wilhelma in Stuttgart)
Well, 🍌 tree-lookalike. There's no wood trunk, there are just those huuuge leaf stems (the so called "dwarf" varieties have 3m stems).
Also: a cluster of bananas may weigh more than me.
(hate I even need to specify this, but not AI, all photos taken by me @ Wilhelma in Stuttgart)
November 27, 2025 at 7:48 AM
🍌 tree?
Well, 🍌 tree-lookalike. There's no wood trunk, there are just those huuuge leaf stems (the so called "dwarf" varieties have 3m stems).
Also: a cluster of bananas may weigh more than me.
(hate I even need to specify this, but not AI, all photos taken by me @ Wilhelma in Stuttgart)
Well, 🍌 tree-lookalike. There's no wood trunk, there are just those huuuge leaf stems (the so called "dwarf" varieties have 3m stems).
Also: a cluster of bananas may weigh more than me.
(hate I even need to specify this, but not AI, all photos taken by me @ Wilhelma in Stuttgart)
Reposted by Ana Tudor
Foxy fun on our Arctic cam!
November 25, 2025 at 4:09 PM
Foxy fun on our Arctic cam!
Reposted by Ana Tudor
Reposted by Ana Tudor
My mom, my pillow. @danieljcox.bsky.social
November 24, 2025 at 4:17 PM
My mom, my pillow. @danieljcox.bsky.social
November 22, 2025 at 5:05 PM
Reposted by Ana Tudor
Saturday Sweetness. Photograph image by Daniel J. Cox. @danieljcox.bsky.social
November 22, 2025 at 4:06 PM
Saturday Sweetness. Photograph image by Daniel J. Cox. @danieljcox.bsky.social
Nowadays, we can do better:
```
box-shadow: 0 1px 2px
rgb(from currentcolor r g b/ .65)
```
Cross-browser since September 2024.
#tinyCSStip #CSS
```
box-shadow: 0 1px 2px
rgb(from currentcolor r g b/ .65)
```
Cross-browser since September 2024.
#tinyCSStip #CSS
#tinyCSStip
Want the shadow of an element or some other visual to be a semitransparent version of the `currentColor`?
Use `color-mix()`!
Cross-browser, btw. 😼
Want the shadow of an element or some other visual to be a semitransparent version of the `currentColor`?
Use `color-mix()`!
Cross-browser, btw. 😼
November 22, 2025 at 3:24 PM
Nowadays, we can do better:
```
box-shadow: 0 1px 2px
rgb(from currentcolor r g b/ .65)
```
Cross-browser since September 2024.
#tinyCSStip #CSS
```
box-shadow: 0 1px 2px
rgb(from currentcolor r g b/ .65)
```
Cross-browser since September 2024.
#tinyCSStip #CSS
November 22, 2025 at 12:56 PM
Reposted by Ana Tudor
Over a decade ago, I made this single div tooltip on @codepen.io, but things have changed for the better on the web since, so here's an improved 2024 version codepen.io/thebabydino/...
Instead of aligning gradients of div and its pseudos, it's using #CSS #masking and a simple #SVG #filter.
Instead of aligning gradients of div and its pseudos, it's using #CSS #masking and a simple #SVG #filter.
1 div tooltip, 2024 update
Got the idea from [this pen](http://codepen.io/davidsturgeon/pen/caEzL) I forked. 2024 version uses a single pseudo, less CSS, no covers and a simple S...
codepen.io
October 25, 2024 at 7:01 AM
Over a decade ago, I made this single div tooltip on @codepen.io, but things have changed for the better on the web since, so here's an improved 2024 version codepen.io/thebabydino/...
Instead of aligning gradients of div and its pseudos, it's using #CSS #masking and a simple #SVG #filter.
Instead of aligning gradients of div and its pseudos, it's using #CSS #masking and a simple #SVG #filter.
Reposted by Ana Tudor
Reposted by Ana Tudor
color-mix() has now been supported in all major browsers for more than 2 years.
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
November 21, 2025 at 1:24 PM
color-mix() has now been supported in all major browsers for more than 2 years.
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
It's a really useful way to create a bunch of colors from just one color.
Now is time to take a look and use it in your projects!
Docs: developer.mozilla.org/en-US/docs/W...
Demo: patrickbrosset.com/lab/2024-02-...
If you're a Ko-fi or Patreon supporter, then first of all, thank you for helping this stray cat stay afloat. And second, you should know I've posted a few things this past week.
❇️ ko-fi.com/anatudor
❇️ www.patreon.com/c/anatudor
#CSS #SVG
❇️ ko-fi.com/anatudor
❇️ www.patreon.com/c/anatudor
#CSS #SVG
November 21, 2025 at 10:50 AM
If you're a Ko-fi or Patreon supporter, then first of all, thank you for helping this stray cat stay afloat. And second, you should know I've posted a few things this past week.
❇️ ko-fi.com/anatudor
❇️ www.patreon.com/c/anatudor
#CSS #SVG
❇️ ko-fi.com/anatudor
❇️ www.patreon.com/c/anatudor
#CSS #SVG
Today in thieves, cheats & grifters on the internet.
Talent500, who have a gold check account on twitter, copied a few bits of my article that I worked for 3 weeks on. Could not even be bothered to copy enough to get to a working solution, stopped at intermediary steps. And "forgot" to give credit.
Talent500, who have a gold check account on twitter, copied a few bits of my article that I worked for 3 weeks on. Could not even be bothered to copy enough to get to a working solution, stopped at intermediary steps. And "forgot" to give credit.
November 21, 2025 at 7:51 AM
Today in thieves, cheats & grifters on the internet.
Talent500, who have a gold check account on twitter, copied a few bits of my article that I worked for 3 weeks on. Could not even be bothered to copy enough to get to a working solution, stopped at intermediary steps. And "forgot" to give credit.
Talent500, who have a gold check account on twitter, copied a few bits of my article that I worked for 3 weeks on. Could not even be bothered to copy enough to get to a working solution, stopped at intermediary steps. And "forgot" to give credit.