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!
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.
Reposted by Ana Tudor
Earlier today, I was notified that someone was at my door.
This is who it was:
This is who it was:
November 21, 2025 at 12:59 AM
Earlier today, I was notified that someone was at my door.
This is who it was:
This is who it was:
Reposted by Ana Tudor
#tinyCSStip
What's the point of setting background on an img anyway? 🤷
Well, it's useful if we want a border pattern only possible with multiple gradients (border-image only allows one)/ if we also want to have rounded corners (border-image + border-radius = 💩).
codepen.io/thebabydino/...
#CSS
What's the point of setting background on an img anyway? 🤷
Well, it's useful if we want a border pattern only possible with multiple gradients (border-image only allows one)/ if we also want to have rounded corners (border-image + border-radius = 💩).
codepen.io/thebabydino/...
#CSS
November 26, 2024 at 5:45 PM
#tinyCSStip
What's the point of setting background on an img anyway? 🤷
Well, it's useful if we want a border pattern only possible with multiple gradients (border-image only allows one)/ if we also want to have rounded corners (border-image + border-radius = 💩).
codepen.io/thebabydino/...
#CSS
What's the point of setting background on an img anyway? 🤷
Well, it's useful if we want a border pattern only possible with multiple gradients (border-image only allows one)/ if we also want to have rounded corners (border-image + border-radius = 💩).
codepen.io/thebabydino/...
#CSS
Reposted by Ana Tudor
Family Portrait. @danieljcox.bsky.social
November 20, 2025 at 3:24 PM
Family Portrait. @danieljcox.bsky.social
Soon going back to the country where my SVG filter journey started for real two years ago.
Can you guess without looking up?
www.youtube.com/watch?v=qc98...
Too cryptic?
www.youtube.com/watch?v=vYNA...
Not enough?
www.youtube.com/watch?v=CO8C...
Oh, come on!
www.youtube.com/watch?v=WBs3...
Can you guess without looking up?
www.youtube.com/watch?v=qc98...
Too cryptic?
www.youtube.com/watch?v=vYNA...
Not enough?
www.youtube.com/watch?v=CO8C...
Oh, come on!
www.youtube.com/watch?v=WBs3...
November 20, 2025 at 7:53 AM
Soon going back to the country where my SVG filter journey started for real two years ago.
Can you guess without looking up?
www.youtube.com/watch?v=qc98...
Too cryptic?
www.youtube.com/watch?v=vYNA...
Not enough?
www.youtube.com/watch?v=CO8C...
Oh, come on!
www.youtube.com/watch?v=WBs3...
Can you guess without looking up?
www.youtube.com/watch?v=qc98...
Too cryptic?
www.youtube.com/watch?v=vYNA...
Not enough?
www.youtube.com/watch?v=CO8C...
Oh, come on!
www.youtube.com/watch?v=WBs3...
No need to multiply by 9999, nest min() & max() now that we have sign()!
We can get the sign of the difference
--sgn: sign(100vw - var(-cutoff))
a bit value (0 if sign is -1 or 0, 1 otherwise)
--bit: round(down, .5*(1 + var(--sgn)))
finally
border-radius: calc(var(--bit)*8px)
#tinyCSStip #CSS
We can get the sign of the difference
--sgn: sign(100vw - var(-cutoff))
a bit value (0 if sign is -1 or 0, 1 otherwise)
--bit: round(down, .5*(1 + var(--sgn)))
finally
border-radius: calc(var(--bit)*8px)
#tinyCSStip #CSS
November 20, 2025 at 7:01 AM
No need to multiply by 9999, nest min() & max() now that we have sign()!
We can get the sign of the difference
--sgn: sign(100vw - var(-cutoff))
a bit value (0 if sign is -1 or 0, 1 otherwise)
--bit: round(down, .5*(1 + var(--sgn)))
finally
border-radius: calc(var(--bit)*8px)
#tinyCSStip #CSS
We can get the sign of the difference
--sgn: sign(100vw - var(-cutoff))
a bit value (0 if sign is -1 or 0, 1 otherwise)
--bit: round(down, .5*(1 + var(--sgn)))
finally
border-radius: calc(var(--bit)*8px)
#tinyCSStip #CSS
LLMs already reference this article 👀 frontendmasters.com/blog/count-a...
Get the number of auto-fit/auto-fill columns in CSS
The whole point of auto-fit and auto-fill is that you aren't saying how many columns to use. But if you knew how many the browser chose, you can make nice design decisions.
frontendmasters.com
November 19, 2025 at 7:48 PM
LLMs already reference this article 👀 frontendmasters.com/blog/count-a...
Reposted by Ana Tudor
You probably don’t need `aria-label` for that thing.
It doesn’t auto-translate:
adrianroselli.com/2019/11/aria...
It’s code smell:
ericwbailey.website/published/ar...
You can probably use better methods:
adrianroselli.com/2020/01/my-p...
#accessibility #a11y #ARIA
It doesn’t auto-translate:
adrianroselli.com/2019/11/aria...
It’s code smell:
ericwbailey.website/published/ar...
You can probably use better methods:
adrianroselli.com/2020/01/my-p...
#accessibility #a11y #ARIA
aria-label is a code smell
If it is important enough to need words, it is important enough to use text content..
ericwbailey.website
November 19, 2025 at 5:39 PM
You probably don’t need `aria-label` for that thing.
It doesn’t auto-translate:
adrianroselli.com/2019/11/aria...
It’s code smell:
ericwbailey.website/published/ar...
You can probably use better methods:
adrianroselli.com/2020/01/my-p...
#accessibility #a11y #ARIA
It doesn’t auto-translate:
adrianroselli.com/2019/11/aria...
It’s code smell:
ericwbailey.website/published/ar...
You can probably use better methods:
adrianroselli.com/2020/01/my-p...
#accessibility #a11y #ARIA
Reposted by Ana Tudor
Reposted by Ana Tudor
Tuesday touch. Photogrpah by @danieljcox.bsky.social
November 18, 2025 at 3:34 PM
Tuesday touch. Photogrpah by @danieljcox.bsky.social
I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.
This is what subgrid was made for!
#CSS
This is what subgrid was made for!
#CSS
November 18, 2025 at 3:26 PM
I am begging you, please don't split your heading into two separate `h2` elements with an `img` in between just to have the image in between your heading words.
This is what subgrid was made for!
#CSS
This is what subgrid was made for!
#CSS
Please, @bsky.app give us the ability to send images/ videos in Chat 🐈 so we can stop with the "sent you a screenshot/ recording in twitter DMs" ridiculousness once and for all...
This is the one feature I'm really missing.
This is the one feature I'm really missing.
November 18, 2025 at 10:07 AM
Please, @bsky.app give us the ability to send images/ videos in Chat 🐈 so we can stop with the "sent you a screenshot/ recording in twitter DMs" ridiculousness once and for all...
This is the one feature I'm really missing.
This is the one feature I'm really missing.
@ko-fi.com Is it possible to add some basic code formatting options for posts? Just the option to be able to use a monoapaced font would make a big difference.
Thanks!
Thanks!
November 18, 2025 at 9:10 AM
@ko-fi.com Is it possible to add some basic code formatting options for posts? Just the option to be able to use a monoapaced font would make a big difference.
Thanks!
Thanks!