Ana Tudor
@anatudor.bsky.social
Same me, another platform. Authentic Transylvanian vampire. I code stuff. Usually involves some Maths. I enjoy music mandatory religion classes warned me about. And other things that may kill me.
Replies usually restricted.
https://thebabydino.github.io/
Replies usually restricted.
https://thebabydino.github.io/
Pinned
Ana Tudor
@anatudor.bsky.social
· Dec 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! #KofiChallenge
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
A thing I've been working on to add to my shop ko-fi.com/anatudor/shop
You may have seen sliced & offset text before, but this also has its selection not only inverting the text, punching a hole through to the backdrop, but the selection is also sliced & offset. This you won't find elsewhere.
#CSS
You may have seen sliced & offset text before, but this also has its selection not only inverting the text, punching a hole through to the backdrop, but the selection is also sliced & offset. This you won't find elsewhere.
#CSS
February 15, 2026 at 6:44 PM
A thing I've been working on to add to my shop ko-fi.com/anatudor/shop
You may have seen sliced & offset text before, but this also has its selection not only inverting the text, punching a hole through to the backdrop, but the selection is also sliced & offset. This you won't find elsewhere.
#CSS
You may have seen sliced & offset text before, but this also has its selection not only inverting the text, punching a hole through to the backdrop, but the selection is also sliced & offset. This you won't find elsewhere.
#CSS
Weird Epiphany¹ issues I've hit this weekend:
🧐 `display: grid` on an element caused `text-indent` not to be applied
🙄 `padding` on an element caused its `mask`² not to be applied
😞 viewport-relative `margin` on an element caused its `mask`² not to be applied above a certain viewport (this sucks)
🧐 `display: grid` on an element caused `text-indent` not to be applied
🙄 `padding` on an element caused its `mask`² not to be applied
😞 viewport-relative `margin` on an element caused its `mask`² not to be applied above a certain viewport (this sucks)
February 15, 2026 at 2:04 PM
Weird Epiphany¹ issues I've hit this weekend:
🧐 `display: grid` on an element caused `text-indent` not to be applied
🙄 `padding` on an element caused its `mask`² not to be applied
😞 viewport-relative `margin` on an element caused its `mask`² not to be applied above a certain viewport (this sucks)
🧐 `display: grid` on an element caused `text-indent` not to be applied
🙄 `padding` on an element caused its `mask`² not to be applied
😞 viewport-relative `margin` on an element caused its `mask`² not to be applied above a certain viewport (this sucks)
Band announces spring tour somewhere where they've toured pretty much every damn year.
"But they're not coming to my city, they have to do another tour here this fall."
Oh, the entitlement...🙄
I think fans from Latin America reading that would want to chop that guy into pieces. And rightfully so.
"But they're not coming to my city, they have to do another tour here this fall."
Oh, the entitlement...🙄
I think fans from Latin America reading that would want to chop that guy into pieces. And rightfully so.
February 15, 2026 at 9:39 AM
Band announces spring tour somewhere where they've toured pretty much every damn year.
"But they're not coming to my city, they have to do another tour here this fall."
Oh, the entitlement...🙄
I think fans from Latin America reading that would want to chop that guy into pieces. And rightfully so.
"But they're not coming to my city, they have to do another tour here this fall."
Oh, the entitlement...🙄
I think fans from Latin America reading that would want to chop that guy into pieces. And rightfully so.
This www.humancode.us/2025/12/13/y...
Quite honestly, I think a lot of my own work sucks huge donkey dicks. I couldn't think of anything but how to make it suck less, I tried thing after thing to make it suck less... still sucks. Less than that of most people, but that's a fucking low bar to clear.
Quite honestly, I think a lot of my own work sucks huge donkey dicks. I couldn't think of anything but how to make it suck less, I tried thing after thing to make it suck less... still sucks. Less than that of most people, but that's a fucking low bar to clear.
Your work can suck even when you work hard
Because you “worked hard” on something doesn’t entitle you to be free from harsh criticism of your *public* work. An observer is entitled to form their own opinion of your work *regardless* of how muc...
www.humancode.us
February 14, 2026 at 12:57 PM
This www.humancode.us/2025/12/13/y...
Quite honestly, I think a lot of my own work sucks huge donkey dicks. I couldn't think of anything but how to make it suck less, I tried thing after thing to make it suck less... still sucks. Less than that of most people, but that's a fucking low bar to clear.
Quite honestly, I think a lot of my own work sucks huge donkey dicks. I couldn't think of anything but how to make it suck less, I tried thing after thing to make it suck less... still sucks. Less than that of most people, but that's a fucking low bar to clear.
So I saw this on Mastodon and fuck, I'm Charles Darwin every day, every hour, every minute, every second, every moment, every scream...
Yeah, okay, that went straight into Alice Cooper lyrics, but still... that's 100% me all the damn time.
Yeah, okay, that went straight into Alice Cooper lyrics, but still... that's 100% me all the damn time.
February 14, 2026 at 10:51 AM
So I saw this on Mastodon and fuck, I'm Charles Darwin every day, every hour, every minute, every second, every moment, every scream...
Yeah, okay, that went straight into Alice Cooper lyrics, but still... that's 100% me all the damn time.
Yeah, okay, that went straight into Alice Cooper lyrics, but still... that's 100% me all the damn time.
So it looks like there is already a bug filed... 8 years ago!
🪲 bugs.webkit.org/show_bug.cgi...
Last active 4 years ago 😭
So right about now, my problem is Safari.
I have spent an unholy amount of time lately to ensure my SVG filter produces a legible result in the selection case...
#CSS
🪲 bugs.webkit.org/show_bug.cgi...
Last active 4 years ago 😭
So right about now, my problem is Safari.
I have spent an unholy amount of time lately to ensure my SVG filter produces a legible result in the selection case...
#CSS
February 14, 2026 at 8:03 AM
So it looks like there is already a bug filed... 8 years ago!
🪲 bugs.webkit.org/show_bug.cgi...
Last active 4 years ago 😭
So right about now, my problem is Safari.
I have spent an unholy amount of time lately to ensure my SVG filter produces a legible result in the selection case...
#CSS
🪲 bugs.webkit.org/show_bug.cgi...
Last active 4 years ago 😭
So right about now, my problem is Safari.
I have spent an unholy amount of time lately to ensure my SVG filter produces a legible result in the selection case...
#CSS
Hi, Bluesky 🦋 can you help me out?
If you can test in actual Safari, what does the selection background look like when selecting text?
cdpn.io/pen/debug/xb...
Is it white like I set it/ like Chrome/ Firefox? Or grey like I'm seeing in Epiphany?
If you cannot test, reposts appreciated. Thx! #CSS
If you can test in actual Safari, what does the selection background look like when selecting text?
cdpn.io/pen/debug/xb...
Is it white like I set it/ like Chrome/ Firefox? Or grey like I'm seeing in Epiphany?
If you cannot test, reposts appreciated. Thx! #CSS
February 14, 2026 at 3:30 AM
Hi, Bluesky 🦋 can you help me out?
If you can test in actual Safari, what does the selection background look like when selecting text?
cdpn.io/pen/debug/xb...
Is it white like I set it/ like Chrome/ Firefox? Or grey like I'm seeing in Epiphany?
If you cannot test, reposts appreciated. Thx! #CSS
If you can test in actual Safari, what does the selection background look like when selecting text?
cdpn.io/pen/debug/xb...
Is it white like I set it/ like Chrome/ Firefox? Or grey like I'm seeing in Epiphany?
If you cannot test, reposts appreciated. Thx! #CSS
Reposted by Ana Tudor
This is to collect research for HTML input pickers such as date, time, datetime and colour. "Please send us examples of good (or bad) ones. Even if they have extra functionality that doesn't exist yet (e.g. date ranges, perhaps we can add that in)." github.com/openui/open-...
Research Issue for pickers · Issue #1371 · openui/open-ui
This is to collect research for pickers such as date, time, datetime and colour. Please send us examples of good (or bad) ones. Even if they have extra functionality that doesn't exist yet (e.g. da...
github.com
February 13, 2026 at 7:06 PM
This is to collect research for HTML input pickers such as date, time, datetime and colour. "Please send us examples of good (or bad) ones. Even if they have extra functionality that doesn't exist yet (e.g. date ranges, perhaps we can add that in)." github.com/openui/open-...
"Invalid property value, expected type ''"
Chrome DevTools, this IS an angle!
By the way, the code works just fine. It's just that DevTools incorrectly displays that.
cc @developer.chrome.com
Chrome DevTools, this IS an angle!
By the way, the code works just fine. It's just that DevTools incorrectly displays that.
cc @developer.chrome.com
February 13, 2026 at 5:42 PM
"Invalid property value, expected type ''"
Chrome DevTools, this IS an angle!
By the way, the code works just fine. It's just that DevTools incorrectly displays that.
cc @developer.chrome.com
Chrome DevTools, this IS an angle!
By the way, the code works just fine. It's just that DevTools incorrectly displays that.
cc @developer.chrome.com
The vertical misalignment of the arrows of the next/ previous @ko-fi.com gallery buttons bothers me deeply.
And it could be fixed so easily...
Add:
```
display: grid;
place-content: center;
```
Remove:
```
vertical-align: middle;
text-align: center;
```
#CSS
And it could be fixed so easily...
Add:
```
display: grid;
place-content: center;
```
Remove:
```
vertical-align: middle;
text-align: center;
```
#CSS
February 13, 2026 at 2:39 PM
The vertical misalignment of the arrows of the next/ previous @ko-fi.com gallery buttons bothers me deeply.
And it could be fixed so easily...
Add:
```
display: grid;
place-content: center;
```
Remove:
```
vertical-align: middle;
text-align: center;
```
#CSS
And it could be fixed so easily...
Add:
```
display: grid;
place-content: center;
```
Remove:
```
vertical-align: middle;
text-align: center;
```
#CSS
I have now added another item to the shop!
Mono textured embossed + engraved text
ko-fi.com/s/875f207bd5
#CSS #SVG #filter
Mono textured embossed + engraved text
ko-fi.com/s/875f207bd5
#CSS #SVG #filter
February 13, 2026 at 11:51 AM
I have now added another item to the shop!
Mono textured embossed + engraved text
ko-fi.com/s/875f207bd5
#CSS #SVG #filter
Mono textured embossed + engraved text
ko-fi.com/s/875f207bd5
#CSS #SVG #filter
Before you share your "cool" button code for AI to spread it further, maybe learn HTML basics to ensure the elements you crammed inside (which you don't need anyway, could easily ditch them & get the same result with a single pseudo) are permitted inside button
developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...
February 13, 2026 at 9:07 AM
Before you share your "cool" button code for AI to spread it further, maybe learn HTML basics to ensure the elements you crammed inside (which you don't need anyway, could easily ditch them & get the same result with a single pseudo) are permitted inside button
developer.mozilla.org/en-US/docs/W...
developer.mozilla.org/en-US/docs/W...
Reposted by Ana Tudor
How would you create such a sliding glow effect on :hover? Trivial with corner-shape, but what about making it work cross-browser now?
Think about it, then check my solution on @codepen.io: codepen.io/thebabydino/...
Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. #CSS
Think about it, then check my solution on @codepen.io: codepen.io/thebabydino/...
Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. #CSS
January 14, 2026 at 5:40 PM
How would you create such a sliding glow effect on :hover? Trivial with corner-shape, but what about making it work cross-browser now?
Think about it, then check my solution on @codepen.io: codepen.io/thebabydino/...
Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. #CSS
Think about it, then check my solution on @codepen.io: codepen.io/thebabydino/...
Detailed explanation of the Maths behind (with drawings) on Ko-fi/ Patreon. #CSS
Reposted by Ana Tudor
#cssWish `padding` and `box-decoration-break` support on `::selection`.
Generally, a way to control the `::selection` background area.
With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.
Generally, a way to control the `::selection` background area.
With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.
February 11, 2026 at 3:29 PM
#cssWish `padding` and `box-decoration-break` support on `::selection`.
Generally, a way to control the `::selection` background area.
With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.
Generally, a way to control the `::selection` background area.
With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.
I just got reminded of that rainy, yet suffocatingly hot night when I walked from Obertraubling to Regensburg.
I wouldn't dare do that here, there are bears.
I wouldn't dare do that here, there are bears.
February 12, 2026 at 11:10 AM
I just got reminded of that rainy, yet suffocatingly hot night when I walked from Obertraubling to Regensburg.
I wouldn't dare do that here, there are bears.
I wouldn't dare do that here, there are bears.
Reposted by Ana Tudor
Me: *works making accessible components at a company*
Also me: *leaves company*
Company [months later]: We are replacing the old components with this new set of completely inaccessible components. Enjoy!
Cheerio. 🙁
Also me: *leaves company*
Company [months later]: We are replacing the old components with this new set of completely inaccessible components. Enjoy!
Cheerio. 🙁
February 12, 2026 at 3:49 AM
Me: *works making accessible components at a company*
Also me: *leaves company*
Company [months later]: We are replacing the old components with this new set of completely inaccessible components. Enjoy!
Cheerio. 🙁
Also me: *leaves company*
Company [months later]: We are replacing the old components with this new set of completely inaccessible components. Enjoy!
Cheerio. 🙁
Mood www.youtube.com/watch?v=sqTh...
What about your future?
It's defective
And you can shove it up your ass
What about your future?
It's defective
And you can shove it up your ass
Life Is A Lemon And I Want My Money Back
YouTube video by Meat Loaf - Topic
www.youtube.com
February 11, 2026 at 9:16 PM
Mood www.youtube.com/watch?v=sqTh...
What about your future?
It's defective
And you can shove it up your ass
What about your future?
It's defective
And you can shove it up your ass
#cssWish `padding` and `box-decoration-break` support on `::selection`.
Generally, a way to control the `::selection` background area.
With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.
Generally, a way to control the `::selection` background area.
With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.
February 11, 2026 at 3:29 PM
#cssWish `padding` and `box-decoration-break` support on `::selection`.
Generally, a way to control the `::selection` background area.
With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.
Generally, a way to control the `::selection` background area.
With a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.
Reposted by Ana Tudor
January 9, 2026 at 6:56 PM
Reposted by Ana Tudor
Live demo on @codepen.io: codepen.io/thebabydino/...
Proposal by @bram.us: expose pointer position information on hovered elements github.com/w3c/csswg-dr...
Proposal by @bram.us: expose pointer position information on hovered elements github.com/w3c/csswg-dr...
May 9, 2025 at 2:22 PM
Live demo on @codepen.io: codepen.io/thebabydino/...
Proposal by @bram.us: expose pointer position information on hovered elements github.com/w3c/csswg-dr...
Proposal by @bram.us: expose pointer position information on hovered elements github.com/w3c/csswg-dr...
Reposted by Ana Tudor
💡 CSS Tip!
Percentage heights are always a nightmare, but what if we can solve all of the problems with one line of code?
css-tip.com/percentage-h...
It may look strange and unreadable, but it will be a lifesaver and probably your new favorite CSS trick in the future!
Percentage heights are always a nightmare, but what if we can solve all of the problems with one line of code?
css-tip.com/percentage-h...
It may look strange and unreadable, but it will be a lifesaver and probably your new favorite CSS trick in the future!
February 10, 2026 at 11:19 AM
💡 CSS Tip!
Percentage heights are always a nightmare, but what if we can solve all of the problems with one line of code?
css-tip.com/percentage-h...
It may look strange and unreadable, but it will be a lifesaver and probably your new favorite CSS trick in the future!
Percentage heights are always a nightmare, but what if we can solve all of the problems with one line of code?
css-tip.com/percentage-h...
It may look strange and unreadable, but it will be a lifesaver and probably your new favorite CSS trick in the future!