Mariana Beldi
@holasvg.com
Monstruologist.
Designer - Illustrator - Developer
🏑player 🎸@beldi http://spoti.fi/3IjZVUg
Cookin' Free Open Source tools:
👉 icons.holasvg.com
👉 loaders.holasvg.com
👉 avatars.holasvg.com
Designer - Illustrator - Developer
🏑player 🎸@beldi http://spoti.fi/3IjZVUg
Cookin' Free Open Source tools:
👉 icons.holasvg.com
👉 loaders.holasvg.com
👉 avatars.holasvg.com
Pinned
Mariana Beldi
@holasvg.com
· Dec 12
An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines — Smashing Magazine
10 years after scroll-driven animations were first proposed, they’re finally here — no JavaScript, no dependencies, no libraries, just pure CSS.
www.smashingmagazine.com
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
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
En youTube ya están las charlas de @nerdearla.bsky.social España 2025 😍
Les dejo el link a la presentación que hice sobre diseño, código y animaciones web:
youtube.com/watch?v=hjGu...
#nerdearla #WebDesign #webdev
Les dejo el link a la presentación que hice sobre diseño, código y animaciones web:
youtube.com/watch?v=hjGu...
#nerdearla #WebDesign #webdev
Cómo crear experiencias web memorables: el código detrás del diseño que impacta - Mariana Beldi
YouTube video by Nerdearla
youtube.com
December 5, 2025 at 7:34 PM
En youTube ya están las charlas de @nerdearla.bsky.social España 2025 😍
Les dejo el link a la presentación que hice sobre diseño, código y animaciones web:
youtube.com/watch?v=hjGu...
#nerdearla #WebDesign #webdev
Les dejo el link a la presentación que hice sobre diseño, código y animaciones web:
youtube.com/watch?v=hjGu...
#nerdearla #WebDesign #webdev
Gracias por venir ❤️ comparto el link a la presentación de hoy
docs.google.com/presentation...
@nerdearla.bsky.social #nerdearla
docs.google.com/presentation...
@nerdearla.bsky.social #nerdearla
November 15, 2025 at 3:00 PM
Gracias por venir ❤️ comparto el link a la presentación de hoy
docs.google.com/presentation...
@nerdearla.bsky.social #nerdearla
docs.google.com/presentation...
@nerdearla.bsky.social #nerdearla
Reposted by Mariana Beldi
🤩 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.
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.
a close up of a person wearing sunglasses with the words `` wait , what ? ''
ALT: a close up of a person wearing sunglasses with the words `` wait , what ? ''
media.tenor.com
November 13, 2025 at 11:25 AM
🤩 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.
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
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
November 12, 2025 at 1:04 PM
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
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
Reposted by Mariana Beldi
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.
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.
October 22, 2025 at 4:48 PM
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.
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
Ya estamos evaluando las más de 800 propuestas de charlas y talleres que enviaron 🤓🚀
Más info en 👉 nerdear.la
June 19, 2025 at 1:08 PM
¡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
Ya estamos evaluando las más de 800 propuestas de charlas y talleres que enviaron 🤓🚀
Más info en 👉 nerdear.la
We came all the way from Argentina to attend the amazing #cssday conference in Amsterdam! It totally melted our brains in the best possible way
June 7, 2025 at 9:50 AM
We came all the way from Argentina to attend the amazing #cssday conference in Amsterdam! It totally melted our brains in the best possible way
Reposted by Mariana Beldi
March 20, 2025 at 4:40 PM
Ain’t this brilliant 📦 🙌
Pure CSS meets voxel art! 🧊✨
Agustin Capeletto takes us behind the scenes of the CSS Voxel Editor, showing how stacked grids, trans#3dc#css=#voxelartd#purecssext-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">forms, and perspective create a fully addressable 3D space—no JavaScript required: tympanus.net/codrops/2025...
#3d #css #voxelart #purecss
Agustin Capeletto takes us behind the scenes of the CSS Voxel Editor, showing how stacked grids, trans#3dc#css=#voxelartd#purecssext-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">forms, and perspective create a fully addressable 3D space—no JavaScript required: tympanus.net/codrops/2025...
#3d #css #voxelart #purecss
March 3, 2025 at 8:37 PM
Ain’t this brilliant 📦 🙌
Reposted by Mariana Beldi
my brother built a voxel editor using stacked CSS grids 🤯
Layoutit Voxels - 3D CSS Grid Generator
A voxel editor powered by CSS grid and 3D transforms. Build models with HTML cuboids!
voxels.layoutit.com
February 6, 2025 at 1:54 PM
my brother built a voxel editor using stacked CSS grids 🤯
International signal code flags
January 8, 2025 at 4:22 PM
International signal code flags
Reposted by Mariana Beldi
“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
www.smashingmagazine.com/2024/12/intr... #animation #webdesign
An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines — Smashing Magazine
10 years after scroll-driven animations were first proposed, they’re finally here — no JavaScript, no dependencies, no libraries, just pure CSS.
www.smashingmagazine.com
December 20, 2024 at 12:39 PM
“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
www.smashingmagazine.com/2024/12/intr... #animation #webdesign
Reposted by Mariana Beldi
An Introduction to CSS Scroll-Driven Animations: Scroll and View Progress Timelines, by @marianabeldi@x.com (@smashingmag@mastodon.social):
An Introduction to CSS Scroll-Driven Animations: Scroll and View Progress Timelines
www.smashingmagazine.com
December 27, 2024 at 10:30 PM
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 the typical image my coworkers see during our online meetings:
December 25, 2024 at 11:59 AM
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 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
codepen.io/collection/W...
#css #webdev
December 23, 2024 at 1:47 PM
This is my @codepen.io collection of CSS scroll-driven animations demos:
codepen.io/collection/W...
#css #webdev
codepen.io/collection/W...
#css #webdev
Reposted by Mariana Beldi
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...
`@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...
December 19, 2024 at 6:21 PM
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...
`@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
codepen.io/collection/a...
Got one to share? Send it my way!
#CSS #animations #scroll #codepen @codepen.io
Scroll-Driven Animations Examples - a Collection by Mariana Beldi on CodePen
Examples of Scroll Driven Animations with View Progress Timeline and Scroll Progress Timeline
codepen.io
December 17, 2024 at 11:52 PM
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
codepen.io/collection/a...
Got one to share? Send it my way!
#CSS #animations #scroll #codepen @codepen.io
Reposted by Mariana Beldi
🦌 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...
by Mariana Beldi
@holasvg.bsky.social
at @smashingmagazine.com
#ScrollDrivenAnimation #css #webdev #ViewProgress
www.smashingmagazine.com/2024/12/intr...
December 12, 2024 at 9:59 PM
🦌 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...
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
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
An Introduction To CSS Scroll-Driven Animations: Scroll And View Progress Timelines — Smashing Magazine
10 years after scroll-driven animations were first proposed, they’re finally here — no JavaScript, no dependencies, no libraries, just pure CSS.
www.smashingmagazine.com
December 12, 2024 at 4:49 PM
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
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
December 1, 2024 at 8:00 PM
Reposted by Mariana Beldi
🚨 This is your chance to grab Andy's #CSS course before the price goes up 👇
After nearly a year of production, Complete CSS is finally available for a limited Black Friday launch price of £189
Complete CSS is now live!
After nearly a year of production, Complete CSS is finally available for a limited Black Friday launch price of £189
buff.ly
November 26, 2024 at 4:07 PM
🚨 This is your chance to grab Andy's #CSS course before the price goes up 👇
Reposted by Mariana Beldi
November 10, 2024 at 2:44 PM