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
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.
Reposted by Ana Tudor
The Great Grey Owl - nature is perfection.
February 10, 2026 at 4:05 PM
The Great Grey Owl - nature is perfection.
Reposted by Ana Tudor
Reposted by Ana Tudor
A 🆒 no JS, no text duplication, no shadows #3D text effect I made on @codepen.io for the week's #CodePenChallenge codepen.io/thebabydino/...
Just a bit of #SVG #filter magic!🪄
#Pug code generating the SVG filter is ~1KB and the CSS is half of that (20 declarations including prettifying and layout)
Just a bit of #SVG #filter magic!🪄
#Pug code generating the SVG filter is ~1KB and the CSS is half of that (20 declarations including prettifying and layout)
November 5, 2024 at 10:12 AM
A 🆒 no JS, no text duplication, no shadows #3D text effect I made on @codepen.io for the week's #CodePenChallenge codepen.io/thebabydino/...
Just a bit of #SVG #filter magic!🪄
#Pug code generating the SVG filter is ~1KB and the CSS is half of that (20 declarations including prettifying and layout)
Just a bit of #SVG #filter magic!🪄
#Pug code generating the SVG filter is ~1KB and the CSS is half of that (20 declarations including prettifying and layout)
Reposted by Ana Tudor
Just in case anyone is wondering how to do this in a better, cross-browser, responsive way... here is a demo on @codepen.io: codepen.io/thebabydino/...
I've added an #SVG #filter enhacement for a torn edge look, but the rest is just one `p` element. With `:first-letter` for the drop-cap.
#CSS
I've added an #SVG #filter enhacement for a torn edge look, but the rest is just one `p` element. With `:first-letter` for the drop-cap.
#CSS
May 10, 2025 at 3:11 PM
Just in case anyone is wondering how to do this in a better, cross-browser, responsive way... here is a demo on @codepen.io: codepen.io/thebabydino/...
I've added an #SVG #filter enhacement for a torn edge look, but the rest is just one `p` element. With `:first-letter` for the drop-cap.
#CSS
I've added an #SVG #filter enhacement for a torn edge look, but the rest is just one `p` element. With `:first-letter` for the drop-cap.
#CSS
Reposted by Ana Tudor
I've recently made a little animated #3D thing with minimal #CSS and it got featured on @codepen.io: codepen.io/thebabydino/...
January 28, 2026 at 2:48 PM
I've recently made a little animated #3D thing with minimal #CSS and it got featured on @codepen.io: codepen.io/thebabydino/...
Cards with concave rounding on irregular grid codepen.io/thebabydino/...
All is responsive. Real transparency for the gaps between cards and buttons. No sharp corners, all rounded. Card shapes adapt to changes in button size and shape - try changing just the font-size of the button elements! #CSS
All is responsive. Real transparency for the gaps between cards and buttons. No sharp corners, all rounded. Card shapes adapt to changes in button size and shape - try changing just the font-size of the button elements! #CSS
February 9, 2026 at 10:13 AM
Cards with concave rounding on irregular grid codepen.io/thebabydino/...
All is responsive. Real transparency for the gaps between cards and buttons. No sharp corners, all rounded. Card shapes adapt to changes in button size and shape - try changing just the font-size of the button elements! #CSS
All is responsive. Real transparency for the gaps between cards and buttons. No sharp corners, all rounded. Card shapes adapt to changes in button size and shape - try changing just the font-size of the button elements! #CSS
Love the cats, but please don't call them Cheetos. 😭
They're adorable, not disgusting processed garbage.
They're adorable, not disgusting processed garbage.
February 9, 2026 at 8:18 AM
Love the cats, but please don't call them Cheetos. 😭
They're adorable, not disgusting processed garbage.
They're adorable, not disgusting processed garbage.
I never have any idea how much booze goes into my cakes. Pour some Cointreau in, drink some...
I also have no idea if they're any good or if everyone is just too... happy 🥴 to even care.
I also have no idea if they're any good or if everyone is just too... happy 🥴 to even care.
February 7, 2026 at 4:47 PM
I never have any idea how much booze goes into my cakes. Pour some Cointreau in, drink some...
I also have no idea if they're any good or if everyone is just too... happy 🥴 to even care.
I also have no idea if they're any good or if everyone is just too... happy 🥴 to even care.
TutorialPedia dot org has come up in my searches often lately. It's AI-generated garbage with code examples that *don't even work*.
DuckDuckGo have a Share feedback about this site option. Where I wrote exactly that - AI-generated garbage with code examples that *don't even work*.
DuckDuckGo have a Share feedback about this site option. Where I wrote exactly that - AI-generated garbage with code examples that *don't even work*.
February 7, 2026 at 1:20 PM
TutorialPedia dot org has come up in my searches often lately. It's AI-generated garbage with code examples that *don't even work*.
DuckDuckGo have a Share feedback about this site option. Where I wrote exactly that - AI-generated garbage with code examples that *don't even work*.
DuckDuckGo have a Share feedback about this site option. Where I wrote exactly that - AI-generated garbage with code examples that *don't even work*.
+1 on the bug, I've hit it often too and it's actually the reason why I asked the question...
February 7, 2026 at 1:13 PM
+1 on the bug, I've hit it often too and it's actually the reason why I asked the question...
`aria-labelledby` is a completely different thing. It's for when you want the label to be visible somewhere. But when you don't want it to be visible anywhere, I don't see the point in using it for something you want to hide anyway.
February 7, 2026 at 9:45 AM
`aria-labelledby` is a completely different thing. It's for when you want the label to be visible somewhere. But when you don't want it to be visible anywhere, I don't see the point in using it for something you want to hide anyway.
You never mentioned `position: absolute` before, so I assumed you mean to replace that too.
And I personally find clipping easier than visibility and opacity since it doesn't have the same undesirable side effects to deal with.
And I personally find clipping easier than visibility and opacity since it doesn't have the same undesirable side effects to deal with.
February 7, 2026 at 9:45 AM
You never mentioned `position: absolute` before, so I assumed you mean to replace that too.
And I personally find clipping easier than visibility and opacity since it doesn't have the same undesirable side effects to deal with.
And I personally find clipping easier than visibility and opacity since it doesn't have the same undesirable side effects to deal with.
Yeah, just like visibility: hidden (as seen in the screen from my previous post), opacity: 0 leaves empty space.
Re: some screen readers ignoring items with opacity: 0, yes, I recall reading that too a while back. No clue if that's still the case/ what OS + screen-reader + browser were problematic.
Re: some screen readers ignoring items with opacity: 0, yes, I recall reading that too a while back. No clue if that's still the case/ what OS + screen-reader + browser were problematic.
February 7, 2026 at 8:09 AM
Yeah, just like visibility: hidden (as seen in the screen from my previous post), opacity: 0 leaves empty space.
Re: some screen readers ignoring items with opacity: 0, yes, I recall reading that too a while back. No clue if that's still the case/ what OS + screen-reader + browser were problematic.
Re: some screen readers ignoring items with opacity: 0, yes, I recall reading that too a while back. No clue if that's still the case/ what OS + screen-reader + browser were problematic.
I... was not talking about that zoom. I was literally talking about zoom level. Zoom in, zoom out.
February 6, 2026 at 7:19 PM
I... was not talking about that zoom. I was literally talking about zoom level. Zoom in, zoom out.
I may have missed something because I don't know what this is about?
February 6, 2026 at 6:33 PM
I may have missed something because I don't know what this is about?
Do you use zoom? OS level, browser level?
February 6, 2026 at 5:43 PM
Do you use zoom? OS level, browser level?
In all fairness, rigorous testing can be difficult when you just don't have the devices.
Feels like half my posts lately are asking for help with testing stuff in actual Safari because something's off when I test in Epiphany.
Also totally understand not having the time or energy to help everyone.
Feels like half my posts lately are asking for help with testing stuff in actual Safari because something's off when I test in Epiphany.
Also totally understand not having the time or energy to help everyone.
February 6, 2026 at 5:41 PM
In all fairness, rigorous testing can be difficult when you just don't have the devices.
Feels like half my posts lately are asking for help with testing stuff in actual Safari because something's off when I test in Epiphany.
Also totally understand not having the time or energy to help everyone.
Feels like half my posts lately are asking for help with testing stuff in actual Safari because something's off when I test in Epiphany.
Also totally understand not having the time or energy to help everyone.