Ana Tudor

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.

Oh, and please don't use color(display-p3 0 0 1) for blue and color(display-p3 1 0 0) for red in all cases to avoid the `color-gamut` MQ. It produces jagged text & shape edges for everyone not using Chrome on a wide gamut device.

Also, with selection, there's this bug in Safari to get around bugs.webkit.org/show_bug.cgi... They fuck it up with blending, so that's what I use to unfuck it too (overlay to max out the ch). But it requires putting a span inside, unfuck selection on that, have the shape on the element outside.

Note that you should have a forced-colors MQ so things don't get fucked in high contrast mode (maybe prefers-reduced-transparency too) and also a color-gamut MQ to get around this Chrome bug issues.chromium.org/issues/37341...

+pass text selection on its own channel mastodon.social/@AmeliaBR@fr...

separately via a feColorMatrix (see bsky.app/profile/anat...), then paint them from absolutely positioned buckets passed from the CSS to the `filter` outside the actual element's boundary (a technique that works cross-browser if you consider Safari TP, but the bugs only got fixed in January, so...).

I really don't understand why the tooltip cannot just be made semitransparent via masking in these cases?

But then again, I also don't understand anchor positioning.

In any event, the SVG solution would be to put different shapes on different RGB channels (text blue, tooltip red), extract them...

#Caturday cuteness.

YouTube video by Motörhead - Topic Overnight Sensation

Evening tunes www.youtube.com/watch?v=k1sa...

Oh, wow...

I think I fell into those eyes... 😻

This is looking out to be the shittiest spring of the millennium so far...

And I don't even have much of a recollection of '05, '06, '07 or '11. Must have puked my brains out in a lot of public toilets (and somehow got my only job ever in between as a joke), but they all just blend into each other.

If you're supporting my work on Ko-fi or Patreon, then first of all thank you for helping me get by and second, you should know I've posted a bunch of things this week, things you won't see done anywhere else on the internet.

❇️ ko-fi.com/anatudor

❇️ www.patreon.com/anatudor

Lessons Learned from Failed Demos: Pure CSS Nav Thumb Flip on Scroll A list of items with thumbnails that flip into place as needed. Can we ditch the JavaScript?

Here it is, my latest article again, unfucked frontendmasters.com/blog/nav-thu...

#CSS

If my minimal example doesn't show the same think in Safari as in FF or chrome, then it's a bug for me.

As for the Spec it's here: www.w3.org/TR/CSS22/zin... but not easy to decipher ... basically, borders are painted in one step and content in a later step

Please send cute animals. Not having a good day...

And today is International Polar Bear Day... 🐻‍❄️

I wouldn't mind those comments if I didn't mention it, but sometimes people reply with that to posts where I'm saying that explicitly. It says it doesn't work in [whatever] browser in the 300 char limited post they're replying to, was even that too much to read?

And sorry for the erratic posting schedule. It's just that sometimes I just get really fixated on things I can't get just right and fall behind on posting stuff on Ko-fi and Patreon and then I'm left with a lot of stuff to post and don't know when to cram it all. Right now, I have a lot in line...

If you're supporting my work on Ko-fi or Patreon, then first of all thank you for helping me get by and second, you should know I've posted a bunch of things this week, things you won't see done anywhere else on the internet.

❇️ ko-fi.com/anatudor

❇️ www.patreon.com/anatudor

Screenshot of the blocks looking again broken in the editor when I reopen it.

And then if I close the editor and open it again, the blocks show up as broken again. Even though I just fixed them.

Also, I swear on my first change I did not touch anything other than the alignment of that first image and still all got broken.

I am never ever touching WordPress again. 😭

Editor screenshot with the fixed blocks.

The live page, still broken.

If I even knew how to switch to the classic editor/ HTML, I would.

I'm just using the one as it first opened.

And since they looked broken, I clicked Attempt recovery and everything now looks fine in the editor, but when I check it out live, it still looks broken.

Seriously, nothing works. Restoring to a previous revision, still broken. Fixing the code blocks, all looking fine in the editor, actual page still broken.

Fuck. I noticed one image was left aligned while the rest were middle aligned, so I fixed that and now everything about the post broke.

First thing I do after getting access to edit my post because maybe that's faster.

This is 100% my fault and I am really sorry, but I have no idea how to fix it.

I start writing posts about demos I made and thought were cool all the time. While doing that, I keep finding faults with both the demos and posts, some of which I fix, some of which I can't. And then the (usually at that point 7K to 35K words writeup) dies. This time I published one anyway... #CSS

❌ Instead of:

if (map.has(key)) {
return map.get(key);
}
map.set(key, value);
return value;

✅ Write:

return map.getOrInsert(key, value);

This now works in all browsers!

I'm three murders behind... 👀

(things that might sound dubious out of context)

YouTube video by The Halo Effect - Topic Gateways

Deep inside the violence rages...

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

An older thing I made on @codepen.io: icon glassmorphism nav!

Live demo codepen.io/thebabydino/...

#CSS #SVG

XOR nav blob with no content duplication.

Check out the live demo on @codepen.io: codepen.io/thebabydino/...

No covers, allows for an image background behind.

PS - uses JS because it should work on click, not hover.

#CSS #SVG #filter

Screenshot of the default on Ko-fi: the alt text field isn't shown.

Screenshot when the alt text field is shown.

Most common edit reason for @ko-fi.com posts: I forgot yet again that the featured image alt text field isn't shown by default (you have to click an <a role='button'>) & put the alt text in the embedded URL field, which is shown in the same place as the alt text field when that one isn't shown... 🫠