Mariana Beldi

It's-a me, 3D CSS Mario! 🍄 ⭐ I'm recreating Giles Goddard's iconic N64 face engine, so we can use it on the web. The rendering is handled by CSS matrix transforms, without WebGL or canvas. demo: codepen.io/alowpoly/pen... repo: github.com/layoutit/css...

Creating Memorable Web Experiences: A Modern CSS Toolkit, by @holasvg.com (@csstricks@mastodon.social): https://css-tricks.com/creating-memorable-web-experiences-a-modern-css-toolkit/?ref=frontenddogma.com #css #svg #animations #ux

🤯

What it looks like to peek inside the mind of a real master craftswoman at making memorable web experiences: css-tricks.com/creating-mem... This is like @holasvg.com giving an inspiring conference talk. 🧡

I'm working alongside @ledeluge.me on PolyCSS: a new CSS 3D engine for the DOM. It uses matrix3d() transforms to render polygon meshes as HTML elements, without WebGL. demo: polycss.com/gallery/?mod... repo: github.com/LayoutitStud...

Loading Smarter: SVG vs. Raster Loaders in Modern Web Design, by @holasvg.com (@csstricks@mastodon.social): https://css-tricks.com/loading-smarter-svg-vs-raster-loaders-in-modern-web-design/ #images #svg #progressindicators #performance

SVG or raster? The short answer to that question is: there’s almost no difference at all if you are working on something very small and specific. But it's more nuanced than that, and @holasvg.com has all the nerdy details you need. css-tricks.com/loading-smar...

"Why send pixels when you can send math?" SVG vs. Raster loaders: It’s about more than just performance. I wrote a new article for @css-tricks.bsky.social 🙃 You can read it here: css-tricks.com/loading-smar...

Gracias por venir ❤️ comparto el link a la presentación de hoy docs.google.com/presentation... @nerdearla.bsky.social #nerdearla

🤩 There’s a very – VERY! – exciting animations/performance change available in Chrome Canary: Under the right conditions, `width`/`height` animations will no longer automatically force a Main Thread animation, but can be allowed to run on the Compositor.

Este sábado voy a participar en #Nerdearla 2025 🇪🇸 Tres días de charlas, talleres y actividades junto a una gran comunidad tecnológica. 📅 Del 13 al 15 de noviembre 📍 @LaNaveMadrid + streaming ¡Nos vemos allí! 👉 nerdearla.es @nerdearla.bsky.social

There’s a new type of CSS scroll-state query coming: “scrolled”. This one remembers the last direction you scrolled into, which you can use to build “hidey bars”: when scrolling down (or having scrolled down), the hidey bar hides itself. When then scrolling back up, the hidey bar reveals itself.

¡Gracias @nerdearla.bsky.social por invitarme a ser parte del jurado en esta edición! Ya estamos evaluando las más de 800 propuestas de charlas y talleres que enviaron 🤓🚀 Más info en 👉 nerdear.la

I left just a few of these on the #cssday table, I hope you managed to grab one! ❤️

#CSS only carousels arrive in Chrome 135 ⤷ nerdy.dev/css-carousel...

Ain’t this brilliant 📦 🙌

my brother built a voxel editor using stacked CSS grids 🤯

International signal code flags

“What we have now requires no JavaScript, no dependencies, no libraries — just pure #CSS. And if that’s not exciting enough, these animations run off the main thread, delivering smooth, high-performance, GPU-accelerated experiences.” www.smashingmagazine.com/2024/12/intr... #animation #webdesign

An Introduction to CSS Scroll-Driven Animations: Scroll and View Progress Timelines, by @marianabeldi@x.com (@smashingmag@mastodon.social):

I was cleaning my Desktop and found this picture of Lorenzo 🐱 This is the typical image my coworkers see during our online meetings:

This is my @codepen.io collection of CSS scroll-driven animations demos: codepen.io/collection/W... #css #webdev

Wildest #CSS media query I've written in a while `@container (inline-size >= calc(100cqi - 120px))` yep, `calc()` in a MQ! WHY? to re-anchor buttons to be "inside" when space is tight Video: purple outline's are containers, buttons adapt to containers or the page nerdy.dev/carousel-ada...

I'm collecting CSS scroll-driven animation pens here: codepen.io/collection/a... Got one to share? Send it my way! #CSS #animations #scroll #codepen @codepen.io

🦌 An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines by Mariana Beldi @holasvg.bsky.social at @smashingmagazine.com #ScrollDrivenAnimation #css #webdev #ViewProgress www.smashingmagazine.com/2024/12/intr...

After almost 2 years without publishing, my first article for @smashingmagazine.com is live! 🎉 A 20-min read on CSS scroll-driven animations—creating scroll-based interactions with just CSS Big thanks to @geoffgraham.me for the amazing edits! www.smashingmagazine.com/2024/12/intr... #CSS #webdev

This is awesome 😂 give it a try: blueskyroast.com/roast/holasv...

🚨 This is your chance to grab Andy's #CSS course before the price goes up 👇

Take my <dialog> this one slides out from the side with an elegant inset, and also offers a mouse effect to show that it supports light-dismiss nerdy.dev/have-a-dialog

Dopamine 🧩 #charleyharper #thecoralreef

Thought a starter pack of CSS-Tricks authors would be a fun way to find folks. go.bsky.app/SNVx5Wc

😮 Bluesky pro-tip: in the accessibility settings, you can enforce that the images you post must have alt text. This is important for folks who use screen readers. Instead of seeing the image, the supplied text will be read to them instead.

Charley Harper + puzzle = 🤝