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
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.
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*.
Do you use zoom? OS level, browser level?
February 6, 2026 at 5:43 PM
Do you use zoom? OS level, browser level?
Reposted by Ana Tudor
"AI AGEnTS wIll DO AlL The TEDIoUS WOrk FOR YOU LIKE booKING trIpS"
Meanwhile, AI maps:
Meanwhile, AI maps:
February 6, 2026 at 4:19 PM
"AI AGEnTS wIll DO AlL The TEDIoUS WOrk FOR YOU LIKE booKING trIpS"
Meanwhile, AI maps:
Meanwhile, AI maps:
Hi Bluesky 🦋 can you help me out if you can test in actual Safari?
codepen.io/thebabydino/... looks faded in Epiphany + spills out on the left and top in TP
codepen.io/thebabydino/... has 1st row/ col half cropped in Epiphany TP in Editor View, but not in debug cdpn.io/pen/debug/az...
continued 👇
codepen.io/thebabydino/... looks faded in Epiphany + spills out on the left and top in TP
codepen.io/thebabydino/... has 1st row/ col half cropped in Epiphany TP in Editor View, but not in debug cdpn.io/pen/debug/az...
continued 👇
February 6, 2026 at 12:55 PM
Hi Bluesky 🦋 can you help me out if you can test in actual Safari?
codepen.io/thebabydino/... looks faded in Epiphany + spills out on the left and top in TP
codepen.io/thebabydino/... has 1st row/ col half cropped in Epiphany TP in Editor View, but not in debug cdpn.io/pen/debug/az...
continued 👇
codepen.io/thebabydino/... looks faded in Epiphany + spills out on the left and top in TP
codepen.io/thebabydino/... has 1st row/ col half cropped in Epiphany TP in Editor View, but not in debug cdpn.io/pen/debug/az...
continued 👇
Reposted by Ana Tudor
"The website with the biggest CSS of all shipped a whopping 131 MB!"
more insights (and nightmare full) in The CSS Selection from @projectwallace.com
www.projectwallace.com/the-css-sele...
#FrontEnd #CSS #WebDev #WebDesign
more insights (and nightmare full) in The CSS Selection from @projectwallace.com
www.projectwallace.com/the-css-sele...
#FrontEnd #CSS #WebDev #WebDesign
The CSS Selection - 2026 Edition - Project Wallace
The CSS Selection shows real-world CSS usage from over 100,000 websites and looks at the most important metrics.
www.projectwallace.com
February 6, 2026 at 11:13 AM
"The website with the biggest CSS of all shipped a whopping 131 MB!"
more insights (and nightmare full) in The CSS Selection from @projectwallace.com
www.projectwallace.com/the-css-sele...
#FrontEnd #CSS #WebDev #WebDesign
more insights (and nightmare full) in The CSS Selection from @projectwallace.com
www.projectwallace.com/the-css-sele...
#FrontEnd #CSS #WebDev #WebDesign
I've just typed `font` wrong three times in a row... 😩
February 6, 2026 at 11:23 AM
I've just typed `font` wrong three times in a row... 😩
Because someone hearted this old @codepen.io demo done with 2 radio buttons + their labels in a group and it made me notice the title still said "smooth transition Chromium only" - it's been working cross-browser since the summer of 2024! 🥳🎉🎇
codepen.io/thebabydino/...
#CSS
codepen.io/thebabydino/...
#CSS
February 6, 2026 at 10:20 AM
Because someone hearted this old @codepen.io demo done with 2 radio buttons + their labels in a group and it made me notice the title still said "smooth transition Chromium only" - it's been working cross-browser since the summer of 2024! 🥳🎉🎇
codepen.io/thebabydino/...
#CSS
codepen.io/thebabydino/...
#CSS
This getting taken away from me again...
I had a ticket for one of the final shows of their final tour in 2016 and I was so happy nitter.net/anatudor/sta...
Then that whole festival day got cancelled.
Now I thought I would finally get my chance...
I had a ticket for one of the final shows of their final tour in 2016 and I was so happy nitter.net/anatudor/sta...
Then that whole festival day got cancelled.
Now I thought I would finally get my chance...
February 6, 2026 at 7:57 AM
This getting taken away from me again...
I had a ticket for one of the final shows of their final tour in 2016 and I was so happy nitter.net/anatudor/sta...
Then that whole festival day got cancelled.
Now I thought I would finally get my chance...
I had a ticket for one of the final shows of their final tour in 2016 and I was so happy nitter.net/anatudor/sta...
Then that whole festival day got cancelled.
Now I thought I would finally get my chance...
Songs with lyrics that include the word "cinnamon" www.youtube.com/watch?v=0vqg...
R.E.M. - Imitation Of Life (Official Music Video)
YouTube video by remhq
www.youtube.com
February 5, 2026 at 8:59 PM
Songs with lyrics that include the word "cinnamon" www.youtube.com/watch?v=0vqg...
You have cat to be kitten me right meow... all those divs with all those styles for the frame around the content?! The frame that could be done with two gradient layers?!
Here you go codepen.io/thebabydino/...
Here you go codepen.io/thebabydino/...
February 5, 2026 at 8:34 PM
You have cat to be kitten me right meow... all those divs with all those styles for the frame around the content?! The frame that could be done with two gradient layers?!
Here you go codepen.io/thebabydino/...
Here you go codepen.io/thebabydino/...
Reposted by Ana Tudor
You seem to like the no JS char by char on scroll reveal effect, so here's a gallery of various such effects on
@codepen.io codepen.io/thebabydino/...
Which is your fave? I oscillate between undissolve & wave.🤔
Also an entry for this week's #CodePenChallenge.
cc @bram.us
@codepen.io codepen.io/thebabydino/...
Which is your fave? I oscillate between undissolve & wave.🤔
Also an entry for this week's #CodePenChallenge.
cc @bram.us
June 25, 2024 at 8:41 AM
You seem to like the no JS char by char on scroll reveal effect, so here's a gallery of various such effects on
@codepen.io codepen.io/thebabydino/...
Which is your fave? I oscillate between undissolve & wave.🤔
Also an entry for this week's #CodePenChallenge.
cc @bram.us
@codepen.io codepen.io/thebabydino/...
Which is your fave? I oscillate between undissolve & wave.🤔
Also an entry for this week's #CodePenChallenge.
cc @bram.us
Reposted by Ana Tudor
Please stop splitting words into their constituent letters. GSAP SplitText is not as robust as you think.
adrianroselli.com/2026/02/you-...
#HTML #accessibility #a11y #ARIA
adrianroselli.com/2026/02/you-...
#HTML #accessibility #a11y #ARIA
You Know What? Just Don’t Split Words into Letters
This is an unplanned part two for Barriers from Links with ARIA. The title reflects my exasperation because this isn’t new, ‘veI simply failed to be explicit about it over the last decade or so. In 20...
adrianroselli.com
February 5, 2026 at 5:46 PM
Please stop splitting words into their constituent letters. GSAP SplitText is not as robust as you think.
adrianroselli.com/2026/02/you-...
#HTML #accessibility #a11y #ARIA
adrianroselli.com/2026/02/you-...
#HTML #accessibility #a11y #ARIA
Hi, Bluesky 🦋 can you help me out?
Could you test codepen.io/thebabydino/... in actual Safari?
Do you get those ugly dashes around the `padding-box` too? Any idea what might cause them? I'm not hitting the problem in Epiphany.
If you cannot test, reposts appreciated.
Thanks!
#CSS
Could you test codepen.io/thebabydino/... in actual Safari?
Do you get those ugly dashes around the `padding-box` too? Any idea what might cause them? I'm not hitting the problem in Epiphany.
If you cannot test, reposts appreciated.
Thanks!
#CSS
February 5, 2026 at 4:03 PM
Hi, Bluesky 🦋 can you help me out?
Could you test codepen.io/thebabydino/... in actual Safari?
Do you get those ugly dashes around the `padding-box` too? Any idea what might cause them? I'm not hitting the problem in Epiphany.
If you cannot test, reposts appreciated.
Thanks!
#CSS
Could you test codepen.io/thebabydino/... in actual Safari?
Do you get those ugly dashes around the `padding-box` too? Any idea what might cause them? I'm not hitting the problem in Epiphany.
If you cannot test, reposts appreciated.
Thanks!
#CSS
Video fill text on @codepen.io codepen.io/thebabydino/...
Wraps naturally, is selectable, easily stylable from the #CSS. May have anything around text: an interactive canvas, another vid.
Gets play button for vid if browser blocks autoplay/ prefers-reduced-data/ motion. Paused if outside viewport.
Wraps naturally, is selectable, easily stylable from the #CSS. May have anything around text: an interactive canvas, another vid.
Gets play button for vid if browser blocks autoplay/ prefers-reduced-data/ motion. Paused if outside viewport.
February 5, 2026 at 12:03 PM
Video fill text on @codepen.io codepen.io/thebabydino/...
Wraps naturally, is selectable, easily stylable from the #CSS. May have anything around text: an interactive canvas, another vid.
Gets play button for vid if browser blocks autoplay/ prefers-reduced-data/ motion. Paused if outside viewport.
Wraps naturally, is selectable, easily stylable from the #CSS. May have anything around text: an interactive canvas, another vid.
Gets play button for vid if browser blocks autoplay/ prefers-reduced-data/ motion. Paused if outside viewport.
Reposted by Ana Tudor
💡 CSS Tip!
Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!
css-tip.com/clamp-auto/
The same applies to all the sizing values (min-content, max-content, fit-content, etc.)
Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!
css-tip.com/clamp-auto/
The same applies to all the sizing values (min-content, max-content, fit-content, etc.)
February 5, 2026 at 11:10 AM
💡 CSS Tip!
Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!
css-tip.com/clamp-auto/
The same applies to all the sizing values (min-content, max-content, fit-content, etc.)
Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!
css-tip.com/clamp-auto/
The same applies to all the sizing values (min-content, max-content, fit-content, etc.)
Reposted by Ana Tudor
