Arby retweeted
I really do think `linked-parameters` will change the Icon System game on websites.
blog.master.dev/svg-linked-p…
It means we can use `<img src="/icon.svg">` (caching! lazy loading? alt text, srcset, so much!) and have FULL styling control on the inside. It's all upsides.
Arby retweeted
CSS style() queries landed in Firefox 151 making them newly available across engines. Here's how they work:
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
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
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
Cards with animated gradient borders
Modern CSS ⚡💪
Gradient from gradient.style
CodePen: codepen.io/mobalti/pen/GgpVr…
@CodePen #CSS
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…
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…
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
The "Quick Pick Button" was added as a progressive enhancement. It will only appear in browsers that support the EyeDropper API. @ChromiumDev
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
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
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
To learn more about Scroll Snap Events, check out this great article by @argyleink:
developer.chrome.com/blog/sc…
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