Ana Tudor
LightNews LightNews
banner
anatudor.bsky.social
Ana Tudor
@anatudor.bsky.social
5.3K followers 58 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
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
anatudor.bsky.social
Grainy abstract #SVG backgrounds.

A little @codepen.io demo:
codepen.io/thebabydino/...

Enjoy!

(created for my grainy gradients article frontendmasters.com/blog/grainy-...)
Screenshot. Shows a 3⨯3 grid of blobby grainy glow backgrounds.
November 3, 2025 at 2:08 PM
anatudor.bsky.social
Um... Firefox, are you okay?!
In the Accessibility tab, Firefox tells me my focusable separator may be missing focus styles. In the Inspector tab, Firefox can see my separator has :focus styles.
November 1, 2025 at 2:07 PM
anatudor.bsky.social
I have a new article out!

Super Simple Full-Bleed & Breakout Styles
frontendmasters.com/blog/super-s... - my take on an old problem using modern CSS solutions.

Using a spooky made up Halloween recipe to illustrate concepts.

PS @chriscoyier.net told me to be proud of it 😛

#CSS
October 31, 2025 at 6:28 PM
anatudor.bsky.social
Gooey reflowable text: a little Haloween demo on @codepen.io: codepen.io/thebabydino/...

#SVG #filter
middle aligned inline text with a background strictly behind the inline text, not the whole bounding rectangle, this background having its corners rounded (both convex and concave); there is also a border following the rounded corners shape
October 31, 2025 at 4:39 PM
anatudor.bsky.social
Base gradient is:
linear-gradient(in hsl 90deg, #fb8500, #219ebc)
But... you know, should be animated.

The image used is the one below. But the solution should work for any image of any size/ aspect-ratio.

If you're a Cheetah+ supporter on Ko-fi/ Patreon, you know where to find my solution 😼

#CSS
Image of a public square in Oslo.
October 31, 2025 at 8:34 AM
anatudor.bsky.social
#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filters

#CSS
October 31, 2025 at 8:06 AM