Ana Tudor
LightNews LightNews
banner
anatudor.bsky.social
Ana Tudor
@anatudor.bsky.social
5.3K followers 59 following 2.7K posts
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/
Posts Replies Media Videos
anatudor.bsky.social
Nothing happens until it happens, but... less than 72 hours left...
Poster for the Pretty Maids show in Stockholm on the 5th of December 2025.
December 2, 2025 at 9:58 PM
anatudor.bsky.social
I have a new article out on @frontendmasters.com: Non-Square Image Blur Extensions frontendmasters.com/blog/non-squ...

It details the how behind creating the base effect with a single `img` element and only 4 #CSS declarations, then... well, check the article, I promise you'll learn something new!
Screenshot collage, showing the desired result in two stages. First, on the left we have the base case with the non-square images being padded with a blurred version of themselves up to a square along the axis of their shorter side. Second, on the right, we have an extra touch, the non-square images fade smoothly into their blurred copy on the sides.
December 2, 2025 at 12:34 PM
anatudor.bsky.social
Finally made time to file this Chrome bug issues.chromium.org/issues/46514...

#CSS
December 2, 2025 at 11:38 AM
anatudor.bsky.social
I made an interactive demo to illustrate the `contain` vs. `cover` values. You can play with picking various combinations of box and actual image aspect ratios.

Live demo on @codepen.io: codepen.io/thebabydino/...

#CSS
December 1, 2025 at 4:11 PM
anatudor.bsky.social
An Amur tiger's canine tooth. My swollen finger for comparison.

This cat's equipment is no joke.

#tiger 🐯 #Wilhelma #Stuttgart
just what the post says: an Amur tiger's canine tooth is slightly longer and significantly thicker than my swollen finger
November 30, 2025 at 9:36 AM
anatudor.bsky.social
🍌 tree?

Well, 🍌 tree-lookalike. There's no wood trunk, there are just those huuuge leaf stems (the so called "dwarf" varieties have 3m stems).

Also: a cluster of bananas may weigh more than me.

(hate I even need to specify this, but not AI, all photos taken by me @ Wilhelma in Stuttgart)
Part of a banana plant, showing leaves emerging from tall stems and the flower and fruit. Close-up of a cluster of bananas, still green. Inflorescence, barely starting to open. Close-up at some riper bananas, including an overripe one that has cracked open.
November 27, 2025 at 7:48 AM
anatudor.bsky.social
A fun simple little pure #CSS demo on @codepen.io: bubbles pattern codepen.io/thebabydino/...
Bubbles pattern screenshot. Shows golden, magenta and purple gradient bubbles with shadows over a blue background.
November 22, 2025 at 5:05 PM
anatudor.bsky.social
#Caturday

Meow! Hoping to see this kitty in Stuttgart soon!
Amur tiger walking through the water.
November 22, 2025 at 12:56 PM
anatudor.bsky.social
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
cat in rubbish bin
November 21, 2025 at 10:50 AM
anatudor.bsky.social
My original article on @frontendmasters.com frontendmasters.com/blog/overlap...

It took 3 weeks to write and being able to come up with the solution in there is the result of years of work. Just under the svg-filter tag, there are hundreds of demos on my @codepen.io codepen.io/thebabydino/...

#SVG
Screenshot of my CodePen profile showing well over 400 demos tagged with svg-filter. And who knows how many I forgot to tag.
November 21, 2025 at 8:08 AM
anatudor.bsky.social
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.
My original article, dated March 18, 2025. The lame copy from Talent 500, dated March 24, 2025, 6 days after mine. Yet somehow Talent 500 ranks higher in search results than Frontend Masters.
November 21, 2025 at 7:51 AM
anatudor.bsky.social
This works cross-browser however.
.weather-card { --rain: max(0, sign(var(--rain-percent) - 45%)); background: color-mix(in srgb, blue calc(var(--rain)*100%), grey) }
November 20, 2025 at 11:07 AM
anatudor.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...
evergreen trees along a river and a giant clothes peg sculpture
November 20, 2025 at 7:53 AM
anatudor.bsky.social
Good point.

Guess I'm just too used to the guardrails because my most common uses are for angles and similar.
screenshot from a work in progress article showing this use
November 20, 2025 at 7:41 AM
anatudor.bsky.social
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
.card { /* OLD WAY 🧓 */ border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))); /* or */ border-radius: clamp(0px, ((100vw - 4px) - 100%) * 9999, 8px); /* NEW WAY 🐤 */ --sgn: sign(100vw - 4px - 100%); /* if sign is -1: floor(.5*(1 - 1)) = floor(.5*0) = floor(0) = 0 * if sign is 0: floor(.5*(1 + 0)) = floor(.5*1) = floor(.5) = 0 * if sign is +1: floor(.5*(1 + 1)) = floor(.5*2) = floor(1) = 1 */ --bit: round(down, .5*(1 + var(--sgn))); border-radius: calc(var(--bit)*8px) }
November 20, 2025 at 7:01 AM
anatudor.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
HTML: ``` <!-- ❌ DON'T DO THIS 🚫 --> <section> <h2>Classic</h2> <img src='classic-bar.png' alt=''/> <h2>Flavour</h2> </section> <!-- ✅ DO THIS ✅ --> <section> <h2> <span>Classic</span> <span>Flavour</span> </h2> <img src='classic-bar.png' alt='the classic chocolate bar'/> </section> ``` CSS: ``` section, h2 { display: grid } section { grid-template-rows: repeat(3, auto) } h2 { grid-area: 1/ 1/ span 3; grid-template-rows: subgrid; span:last-child { grid-row: 3 } } img { grid-area: 2/ 1 } ```
November 18, 2025 at 3:26 PM
anatudor.bsky.social
Funky forms on @codepen.io codepen.io/thebabydino/...

Full 3D form option vs. weird 2D shape. Which do you prefer?

#CSS
Screenshot of the linked demo. Shows a form all rotated in 3D on the left, while on the right there's a form with about the same shape as the 3D projection, except its contents are not transformed.
November 18, 2025 at 8:20 AM
anatudor.bsky.social
Guess who's going back to Germany in about a week?

(you have no idea how grateful I am this is happening and how relieved I am to have something to force me to take a break...)
Poster for the Phil Campbell and the Bastard Sons Celebrating 50 Years of Motörhead.
November 15, 2025 at 1:10 PM
anatudor.bsky.social
If you're a Cheetah+ supporter on Ko-fi or Patreon, then first off, thanks for helping this stray cat stay afloat and then know there's something new and cool I've posted for you!

❇️ ko-fi.com/post/CSS-cus...

❇️ www.patreon.com/posts/pure-c...

#CSS
cat in garbage can
November 13, 2025 at 2:34 PM
anatudor.bsky.social
Red and black.

Signed, an authentic Transylvanian vampire.

And lots of metal bands agree. See Kreator's most recent single, Tränenpalast, inspired by the 1977 horror Suspiria, Iron Maiden's The Red and the Black. Or Red Before Black by Cannibal Corpse.
Suspiria poster artwork. Still from the Tränenpalast music video. Iron Maiden - The Red and the Black Cannibal Corpse - Red Before Black
November 13, 2025 at 2:27 PM
anatudor.bsky.social
I am a cat: a little @codepen.io demo codepen.io/thebabydino/...

(for context www.reddit.com/r/css/commen...)

#CSS
November 5, 2025 at 3:20 PM
anatudor.bsky.social
#cssChallenge2025

How would you code this (pad non-square image to square with blurred version of itself) using:

✳️ a single `img` elem, no wrappers/ pseudos
✳️ at most 4 #CSS declarations (without the grid layout)
✳️ an #SVG `filter`
a 2⨯2 grid of images. each is in a square box whose edge equals the biggest image side. the square box uses a bigger, blurred version of the image as the background.
November 3, 2025 at 8:17 PM
anatudor.bsky.social
In case this helps.
Stable: 144.0.2 Nightly: 145.0a1 (2025-10-03)
November 3, 2025 at 4:02 PM
anatudor.bsky.social
Yeah, that was Nightly, I can tell now from the DevTools zoom level in the screenshot. But the same happens in stable.
Firefox stable screenshot. Shows the same issue as in Nightly.
November 3, 2025 at 3:56 PM
anatudor.bsky.social
Concave rounding header. Shape on the right depends on content on the left. Real transparency. Using #CSS subgrid and #SVG filters.

Live demo on @codepen.io: codepen.io/thebabydino/...

How would you do this? Try to think about it before checking my solution!
Screenshot. Shows a page with a header having on the right and image shaped in steps depending on the size of the content on the left. The steps are rounded at both the convex and concave corners.
November 3, 2025 at 3:24 PM