@mobalti

Frontend Developer

mobalti.com/
Joined December 2021
  • Tweets196
  • Following199
  • Followers107
62Media
CSS style() queries landed in Firefox 151 making them newly available across engines. Here's how they work:
2
17
1
104
8,522
The future of the web is more native than you think! Check out this customizable select element with an animated backdrop. CodePen: codepen.io/mobalti/full/myPP… #CSS #WebDevelopment @CodePen
69
CSS `@function` + relative colors = adaptive palettes that match content tone. Demo: codepen.io/mobalti/full/bNEW… cc @Una @bramus #CSS
1
101
When colors match the emotional tone of the content, the brain perceives less friction between “frame” and “picture.
71
I re-created @openprops shadows with the new CSS function. This spec is wild ♥️ and it solves problems we’ve been chasing in CSS for years. Demo 👉 codepen.io/mobalti/pen/jEWqz… #CSS #WebDev
1
65
Hero in Monochrome The elegance of OKLCH in action: adaptive color with built-in accessibility Built with @openprops CodePen: codepen.io/mobalti/full/myVy… #CSS @CodePen #WebDevelopment
1
19
3,266
Cards with animated gradient borders Modern CSS ⚡💪 Gradient from gradient.style CodePen: codepen.io/mobalti/pen/GgpVr… @CodePen #CSS
1
106
Meet the future of carousels: no JS, just CSS! ✅ Scroll Buttons ✅ Scroll Markers ✅ Scroll-State Queries ✅ Scroll Initial Target ✅ Anchor As @argyleink said: "It'd be very difficult to make a more accessible carousel than this." @CodePen 👉 codepen.io/mobalti/full/LEEO…
3
1
6
428
Here’s the same carousel in Firefox. No scroll buttons or markers yet, but still fully functional and accessible.
98
Infinite Orbit Animation with CSS Trigonometry & @property Built on top of @bramus's article. ✅ Pure CSS Orbit Animation → No JavaScript required ✅ Dynamic Tooltips → Auto-adjust position & alignment with Style Queries @CodePen codepen.io/mobalti/full/Byay…
1
3
213
Props Color Finder Updates: - Enhanced contrast for picked colors - Added option to pick the closest named CSS colors - Introduced OKLCH color picking - Enabled LAB Mode for perceptual color matching - Added Quick Pick button props-color-finder.netlify.a… #CSS @openprops
1
1
4
450
The "Quick Pick Button" was added as a progressive enhancement. It will only appear in browsers that support the EyeDropper API. @ChromiumDev
1
102
Check out this AI chat hero section example with a cool backdrop. It creates a futuristic feel that influences user behavior. It's a fusion of aesthetics and functionality. Built with @openprops Check the reply for the @CodePen link #CSS #AI #WebDevelopment
3
3
7
2,285
When using glass effects with backdrop-filter, wrap it in: ```#css @media (prefers-reduced-transparency: no-preference) { /* ... */ } ``` This makes it easier for users sensitive to blur effects.
1
288
CodePen: codepen.io/mobalti/full/EaYV…

AI Hero Chat - Popover API Example

AI chat hero section example using the Popover API, built with Open Props. ...

codepen.io
1
109
Leveraging the Web Audio API, I created this Beat Reactor (audio-reactive) with a sleek 3D text effect, powered by the new "paint-order" CSS property. Built with @openprops. CodePen: codepen.io/mobalti/full/MWNZ… #CSS @CodePen #WebDevelopment
1
2
199
Check out how you can enhance focus by applying visual effects to the snapped element using Scroll Snap Events in this slider demo! Built with @openprops 🔥 CodePen: codepen.io/mobalti/full/XWva… #CSS #webdev @CodePen
1
1
6
499
To learn more about Scroll Snap Events, check out this great article by @argyleink: developer.chrome.com/blog/sc…

Scroll Snap Events  |  Chrome for Developers

Introducing two new JavaScript events: scrollSnapChange and scrollSnapChanging.

developer.chrome.com
1
101
Got inspired by the "Mini Web Machines" series by @argyleink to build this tabbed interface! Using :has to manage the visual state and transition-behavior for smooth transitions. Built with @openprops. Check it out on CodePen: codepen.io/mobalti/full/jOjg… #CSS @CodePen #webdev
1
2
11
2,831
Sticky Slider CTA Cards Uses: - Scroll-Driven Animations - Container Queries Built with @openprops CodePen: codepen.io/mobalti/full/xxop… @CodePen #CSS #WebDev
3
5
32
3,973
Load more