iiinova — where your digital self keeps evolving

If you're supporting me on Ko-fi or Patreon, then first of all thank you! And second, there's new stuff today... as was yesterday and the day before that... because when I can't find time to post these things, they just add up... ❇️ ko-fi.com/anatudor/posts ❇️ www.patreon.com/cw/anatudor/... #CSS

If you like my work and you want me to be able to continue coding, please consider supporting it.

032

Reposted by Ana Tudor

Adrian Roselli, pH0 @aardrian.bsky.social · 30/09/2026

I’ve been banging the drum about *not* using ARIA menu roles for site navigation for nearly a decade. I’ve just updated my 2017 post with what has become my general point-by-point refutation when I see them proposed: adrianroselli.com/2017/10/dont... #HTML #accessibility #a11y #ARIA

adrianroselli.com

Don’t Use ARIA Menu Roles for Site Nav

Once again, the advice is in the title of the post. But I will ramble anyway since you scrolled this far. First run with the advice, and then review some background on ARIA and how navigation and menu...

193

Reposted by Ana Tudor

Cincinnati Zoo @cincinnatizoo.bsky.social · 30/09/2026

Rozi the cheetah purrs 😻 Sound on for beautiful cheetah purrs! Cats can either roar or purr, they can’t do both. Lions & tigers can roar, but they can’t purr. Cheetahs can purr, but they can’t roar.

416544

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 20/05/2026

Simplest sliced text with absolutely no duplication - not in the markup, not in any pseudos. This means it's contenteditable without requiring JS! Live demo on @codepen.io: codepen.io/thebabydino/... #CSS #SVG #filter

082

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 09/02/2026

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

0162

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 16/05/2024

Same text effect: ✨pure #CSS codepen.io/thebabydino/... ✨with an #SVG filter codepen.io/thebabydino/... Pure CSS version obviously requires a wrapper and if you're thinking why is the SVG version so overly complicated, well... browser bugs. Ironically, not even SVG, but CSS bugs...🪲

On a black to purple top to bottom grainy gradient, the text "stay alive" in all caps, split across two lines, one word on each. Each line has an aqua to deeppink gradient with small horizontal gaps. The gradient stripes cast a shadow to the bottom right.

0112

Ana Tudor @anatudor.bsky.social · 17/06/2025

Stupid #a11y question: if multiple images form a logo and I wrap these `img` elements in a `div` with `role='img'` and an `aria-label`, do I still need to set an empty `alt` on the `img` elements?

021

Reposted by Ana Tudor

Didn't get to do anything for this week's @codepen.io challenge yet, but here's an older demo: pure #CSS sphere of spheres codepen.io/thebabydino/... #CodePenChallenge Uses the spherical distribution tactic described 👇 then ensure no two spheres intersect. Also: pure CSS #3D shading!

0144

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 05/02/2026

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.

0162

Reposted by Ana Tudor

ESA Exploration @exploration.esa.int · 30/09/2026

Happy New Mars Year! 🥳 At exactly 10:16 CEST/08:16 UTC on Earth, the Red Planet begins a new orbit around our Sun. Join us in celebrating martian year 39 🎉

Infographic with facts and figures about New Mars Year 39.

312040

If you like my work and you want me to be able to continue coding, please consider supporting it.

032

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 29/09/2026

Beside the fact that borders, shadows & so on apply to it, `border-shape` is different from `clip-path` in another way: `filter` gets applied after `border-shape`, but before `clip-path`. Both orders can be useful. But before, we didn't have both & we needed to nest elements to emulate that. #CSS

141

Ana Tudor @anatudor.bsky.social · 31/12/2025

I'm a real human and I'm never visiting again any website that does this. This is unsplash. That bar takes forever to move and it makes my laptop sound like it's about to take off. I was willing to give it a chance, but it took too long, my laptop was overheating and sounding scary, so I closed it.

Screenshot of a making sure you're not a bot page.

080

Reposted by Ana Tudor

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!

If you like my work and you want me to be able to continue coding, please consider supporting it.

0113

Ana Tudor @anatudor.bsky.social · 29/09/2026

141

Ana Tudor @anatudor.bsky.social · 29/09/2026

So there was this garbage dump. Over the course of tens of years, the garbage hole turned into a massive hill. Over the past few months, I've seen they were creating paths over the hill. And now I've learned it's being turned into a park. The garbage dump is becoming a park...

030

Reposted by Ana Tudor

ESA Space Science @science.esa.int · 29/09/2026

A galactic house of mirrors 🌌🪞 Webb has captured this spectacular view of the galaxy cluster MACS J0454.1-0300. Its gravity is warping & multiplying the images of background galaxies, which appear like they have stepped into a house of mirrors! Read more 👉 www.esa.int/ESA_Multimed... 🔭 🧪

A massive galaxy cluster, made of many golden elliptical galaxies with the largest, brightest one in the centre. Heavily distorted orange galaxies appear all around the cluster, the largest concentrated in a large arc around the cluster's centre; these are images of very distant galaxies, created by gravitational lensing. A few galaxies are large and bluish-white in colour; bright, nearby stars are the same colour. Credit: ESA/Webb, NASA & CSA, L. Furtak, S. Fujimoto

124471

Reposted by Ana Tudor

Patrick Brosset @patrickbrosset.com · 29/09/2026

Oh very nice! CSS Grid Lanes (aka Masonry) is enabled in Firefox Nightly (159) 😍 Wonder if this will "ride the trains" to the stable channel. Anyone know?

My computer screen, showing 2 Firefox windows, each one containing a different CSS Grid Lanes (aka Masonry) demo proving that the new layout system now works in Firefox. A third small window shows the About Firefox Nightly information, containing the version number 159.0a1.

2265

Ana Tudor @anatudor.bsky.social · 27/09/2026

Oh, my... 😻 Best thing I've seen all month...

030

Reposted by Ana Tudor

explore.org @explore.org · 27/09/2026

Jolly and her Jollies - cuddle puddle.

323252

Ana Tudor @anatudor.bsky.social · 27/09/2026

It's mind blowing that cygnets are so adorable... and then they grow up and turn into some of the scariest things around. 😱

020

Reposted by Ana Tudor

Woodland Park Zoo @woodlandparkzoo.bsky.social · 26/09/2026

Kamari and Zawadi pounced on the chance to practice their gourd game before Pumpkin Bash, October 31, 2026! zoo.org/pumpkinbash

A young lion playfully bites a large pumpkin while lying on grass.

A young lion is lying on grass next to a large pumpkin, with a wooden log nearby. Other lions can be seen resting in the background.

Three lions are resting on grass, with one lion cub playing with an orange pumpkin. The cub is in the foreground, while the two adult lions are lying in the background. The scene is serene and natural.

Two young lions are playfully biting and holding onto pumpkins on a grassy area with scattered logs.

27723

Reposted by Ana Tudor

Northwest Trek Wildlife Park @nwtrek.bsky.social · 26/09/2026

Browse break with rescued moose, Luna! 🫎

18922

Ana Tudor @anatudor.bsky.social · 24/09/2026

How I didn't make it in CSS and learned to use Matplotlib only to not use those generated 3D graphics and end up using plotly.js... and not learn anything because it's just JSON and the exact same Maths I used in the CSS and then later in the Python code...

040

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 23/09/2026

Please vote for this github.com/web-platform... I've talked about it here bsky.app/profile/anat... I've written articles on how it can make our life easier by applying filter effects only to backgrounds blog.master.dev/non-square-i... Safari supports it since summer '15! No Chrome or Firefox yet.

Screenshot. The same 2×2 square grid containing 4 non-square images, each tightly contained in the middle square box and with a blur extension filling the empty cell space along the axis of its shorter edge. The problem of the semi-transparent pixels close to the cell edges is now fixed: all pixels of the blur extension are now fully opaque, something made obvious by the checkerboard pattern backdrop behind.

042

Ana Tudor @anatudor.bsky.social · 24/09/2026

Please vote for this github.com/web-platform... 🙏 It's been around in Firefox forever and it allows for massively cool and fun #CSS effects like the one below.

070

Ana Tudor @anatudor.bsky.social · 24/09/2026

The WebKit blog does not show post dates on the index page. You have to click on a post to see its date. Super annoying when looking for something published around a certain date years ago.

010

Ana Tudor @anatudor.bsky.social · 23/09/2026

042

Ana Tudor @anatudor.bsky.social · 23/09/2026

If you're supporting me on Ko-fi or Patreon, then first of all thank you! And second, I've been posting stuff lately 😼 ❇️ ko-fi.com/anatudor ❇️ www.patreon.com/c/anatudor #code #Maths #3D