Ana Tudor

if you see this, do it!

☆ pronouns: Stop
☆ height: Giving
☆ zodiac: Out
☆ smoke: Personal
☆ tattoos: Information
☆ piercings: In
☆ fav colour: Online
☆ fav drink: Chains

YouTube video by AFM Records LYRIEL - Leverage (2012) // Official Music Video // AFM Records

Songs are about what you want them to be www.youtube.com/watch?v=vFiN...

You may not need that “AI” voice thing that reads your web pages aloud to users. It comes free in the browser:

• Edge’s Read Aloud (Ctrl + Shift + U),
• Firefox’s and Chrome’s reader mode text-to-speech,
• Safari’s Speech feature.

Stop adding trackers to your sites. Don’t add WCAG risk.

YouTube video by BETONTOD Betontod - Flügel aus Stahl [ Lyric Video ]

Because this just came in my auto-playlist www.youtube.com/watch?v=P3yE...

What this demo was trying to show is that backdrop-filter opacity() doesn't do anything on its own in any browser. Easily testable in Firefox with the DevTools picker.

The fact that it has no effect on its own is *not* a bug/ due to lack of support. That's exactly what *should* happen.

Applying backdrop-filter on the div does nothing because one, there's no backdrop behind it and two, the div is opaque. The element/ pseudo that gets the backdrop-filter needs to have either no background (as it is the case here to avoid confusion about opacity() effect) or a semi-transparent one.

The div is the backdrop. The pseudo is the rectangle on top, on which we set the backdrop-filter property. Which affects the backdrop area underneath the pseudo.

The stacking order doesn't matter as long as whichever is on top gets mix-blend-mode: difference.

backdrop-filter: opacity() does nothing (NOT a bug) ...

Test for `backdrop-filter: opacity()` codepen.io/thebabydino/...

If the 3rd rectangle is completely black, then the result of applying `backdrop-filter: opacity(.5)` is identical to no `backdrop-filter` at all since that last rectangle is the difference between them (`mix-blend-mode: difference`).

opacity + drop-shadow = you see the shadow between the semi-transparent layer resulting from opacity and the fully opaque one behind.

(I was also really bummed to learn that's how backdrop-filter: opacity() works.)

With backdrop-filter, the result of the filter is painted *on top* of the unfiltered opaque backdrop version (so opacity has no effect). The filter result also gets clipped to the element that has backdrop (so you cannot see a drop-shadow outside of it).

YouTube video by Kvelertak - Topic Krøterveg Te Helvete

If it's the last one ever...

www.youtube.com/watch?v=Phwa...

opacity() and drop-shadow() don't actually do anything as backdrop-filter values. Not a bug.

cc @wesbos.com - is there anyone else I should tag to get this fixed?

Scooped corners with jagged edges.

`border-radius` creates corner edges issues when that corner is masked.

Zoom into the jagged scop edges.

Zoom to better show the hairline corner issue.

So I saw someone link to madcss.com and the first thing I noticed was the jagged scoop edges - see frontendmasters.com/blog/obsessi...

And the hairline corner issue (solved by simply removing the `border-radius` declarations that aren't needed anyway). And the choppy nav animation.

Sumatran tiger.

Amur leopard.

Snow leopard.

Iberian lynx.

Today is World Wildlife Day.

So here are four wild cats I'd like to hope we won't see extinct during our lifetimes.

#cat #WorldWildlifeDay

I think right now I'm witnessing the "other cats will all commence congregating on the fence" part of that song...

... one, two, three, four... 🐈🐈‍⬛🐈🐈‍⬛

So they should melt then?

Thanks all!

Filed a bug:
🪲 bugs.webkit.org/show_bug.cgi...

Then also filed a Chrome bug:
🪲 issues.chromium.org/issues/48928...

And a Firefox bug:
🪲 bugzilla.mozilla.org/show_bug.cgi...

Because, you know...

(I want to throw my laptop out the window and myself with it about 80 times a day)

#CSS

The selection is generally always too tall and there's no way to control that.

This is why "pushing down" never occurred to me, but rather "eating into".

Why use div and not output for the tooltips?

Epiphany screenshot. The selection background on the second line of text doesn't stretch across the full height of the letters.

Firefox screenshot. The selection background on the second line of text doesn't look clipped like in Epiphany.

Hi, Bluesky 🦋 - could you help me out?

If you can test in actual Safari, what do you see when selecting *the second line* of text?

codepen.io/thebabydino/...

Does the selection background cover the letters fully (as expected/ as in Chrome/ Firefox) or only partially (as in Epiphany)? Thx!

#CSS

Exactly 6 years after my "Unfortunately, `clip-path: path()` is Still a No-Go" post got published css-tricks.com/unfortunatel...

#CSS

Serenity - Decorah North. #raptors #birds

This is precisely the one I've been working on towards adding to the shop bsky.app/profile/anat...

There are some things I'm still not happy with and I guess I've been waiting it out... There's a better (less hacky) way of doing it, but it relies on something only *very* recently fixed in Safari...

Sunday smiles, courtesy of this feathered friend! 😊

Sunday snoozin’ with Clara & Moea 🦦

Rescued sea otters Clara and Moea are taking their Sunday very seriously, naps first, everything else later. 💤 In the wild, otters will often link paws, sometimes called forming a “raft”, so they don’t drift apart while floating on their backs.

What?

Only happened to me once... bsky.app/profile/anat...

Googly eyes placed on the top bar a railing in front of a tree that somehow grew around the bar right underneath. The googly eyes seem to belong to the bar chewing tree.

Concrete bollard with a broken part that looks like a giant mouth thanks to the googly eyes placed above it.

Rusty pipe looking shocked thanks to googly eyes placed right above its opening and making it look like a wide open mouth.

Googly eyes placed on a small sphere on top of a concrete post. The snow fallen on top makes the sphere look like a head with a white cap.

In case you needed this... 👀🙃

streetartutopia.com/2026/02/28/j...

Also, a lot of my other notes apply even if you keep it in the CSS. What happens in the case of user preferences like high contrast, prefers reduced transparency. What happens in the case of selection (fucked in desktop Safari and even more so in iOS Safari).

You can easily control that from the CSS without ever touching the SVG filter. That's why the paint bucket area.

That's not a problem.

The SVG bugs (wide gamut in Chrome, the only very recently fixed the relative lengths bugs in Safari) are however a big problem and why I'd rather keep it in CSS.