Container style queries: a new era of declarative viewport-based UI variations on the web mobalti.com/responsive-c... cc @miriam.codes @tabatkins.com @nerdy.dev #CSS

Prop For That 📣 An a-la-carte #JS library for #CSS developers that writes meaningful realtime CSS variables to an element: - value of an input - pointer position - size of scrollbar(s) - colors in an image/video - element's visibility - tons more… nerdy.dev/prop-for-that

Firefox 151 is out now, and brings with it some tasty new web platform features: 🎉 Container style() queries 🎉 Web Serial API 🎉 Document Picture-in-Picture API 🎉 keyboardLock on requestFullscreen …and more! developer.mozilla.org/en-US/docs/M...

Style queries fail when the container and the query are in separate stylesheets or `<style>` blocks. Firefox Nightly (149.0a1) 🦊 bugzilla.mozilla.org/show_bug.cgi... @webdevs.firefox.com @jakearchibald.com #CSS #WebDev

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... #CSS @codepen.io @developer.chrome.com

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... #CSS @codepen.io @developer.chrome.com

CSS `@function` + relative colors = adaptive palettes that match content tone. Demo: codepen.io/mobalti/full... cc @miriam.codes @tabatkins.com @lea.verou.me #CSS

I re-created Open Props 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/... cc @miriam.codes @tabatkins.com @bram.us

Hero in Monochrome The elegance of OKLCH in action: adaptive color with built-in accessibility Built with Open Props CodePen: codepen.io/mobalti/full... #css #html #webDev

Cards with animated gradient borders Modern CSS ⚡💪 Gradient from gradient.style CodePen: codepen.io/mobalti/pen/... @codepen.io #CSS

Meet the future of carousels: no JS, just CSS! ✅ Scroll Buttons ✅ Scroll Markers ✅ Scroll-State Queries ✅ Scroll Initial Target ✅ Anchor As @nerdy.dev said: "It'd be very difficult to make a more accessible carousel than this." @codepen.io 👉 codepen.io/mobalti/full...

Infinite Orbit Animation with CSS Trigonometry & @property ✅ Pure CSS Orbit Animation → No JavaScript required ✅ Dynamic Tooltips → Auto-adjust position & alignment with Style Queries Huge thanks to @bram.us for the fantastic article! @codepen.io Live demo : codepen.io/mobalti/full... #CSS

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 (beta) leveraging the EyeDropper API props-color-finder.netlify.app

Check out this AI chat hero section example on @codepen.io with a cool backdrop. It creates a futuristic feel that influences user behavior. It is a perfect fusion of aesthetics and functionality. CodePen: codepen.io/mobalti/full...

Using the Web Audio API, I built this Beat Reactor (audio-reactive) with a 3D text effect. Crafted with Open Props. Check it out on CodePen: codepen.io/mobalti/full... @codepen.io #CSS #HTML