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

When colors match the emotional tone of the content, the brain perceives less friction between “frame” and “picture.

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

Here’s the same carousel in Firefox. No scroll buttons or markers yet, but still fully functional and accessible.

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

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.

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