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
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
The item page has ~20 screenshots of how it works with different fonts, as well as screenshots of what it looks like when using the DevTools vision deficiency emulator. This was actually what prompted me to try to max out the selection highlight contrast by choosing the complementary.
February 13, 2026 at 12:15 PM
The item page has ~20 screenshots of how it works with different fonts, as well as screenshots of what it looks like when using the DevTools vision deficiency emulator. This was actually what prompted me to try to max out the selection highlight contrast by choosing the complementary.
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...
Yeah, continuous errors here too. No extensions and I can be certain of that, I just don't use any. Except for WebMaker (offline version of @codepen.io because CodePen doesn't have that and I *badly* need it) and that's in *another browser*.
February 13, 2026 at 6:11 AM
Yeah, continuous errors here too. No extensions and I can be certain of that, I just don't use any. Except for WebMaker (offline version of @codepen.io because CodePen doesn't have that and I *badly* need it) and that's in *another browser*.
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
Remember this? The gold selection background - I extended its area using an SVG filter on the selection parent. And extracting just the (maybe overlapping when there are multiple lines) selection background (but not the element's background or text) from the filter input is an adventure on its own.
February 11, 2026 at 4:23 PM
Remember this? The gold selection background - I extended its area using an SVG filter on the selection parent. And extracting just the (maybe overlapping when there are multiple lines) selection background (but not the element's background or text) from the filter input is an adventure on its own.
If the `::selection` background is so tall that it overlaps the previous line at a not low at all `line-height` just so it catches all ascenders and descenders, can't it be wide enough too?
February 11, 2026 at 3:32 PM
If the `::selection` background is so tall that it overlaps the previous line at a not low at all `line-height` just so it catches all ascenders and descenders, can't it be wide enough too?
#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!
Reposted by Ana Tudor
Other texture options codepen.io/thebabydino/...
February 11, 2026 at 3:08 AM
Other texture options codepen.io/thebabydino/...
Variation. Many palette variations possible.
February 10, 2026 at 6:21 PM
Variation. Many palette variations possible.