Lightnews — Scholar-powered news

Arby @mobalti.bsky.social · 19h

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

Arby @mobalti.bsky.social · 19h

CSS `@function` + relative colors = adaptive palettes that match content tone.
Demo: codepen.io/mobalti/full...

cc @miriam.codes @tabatkins.com @lea.verou.me

#CSS

1 1 5

Arby @mobalti.bsky.social · 2d

The ones that impact my codebase most are light-dark() and relative colors. The first gives me more control over theming, and the second helps me move fast by keeping the core color set small.

1

Arby @mobalti.bsky.social · 2d

min() & max()

1 1

Arby @mobalti.bsky.social · 10d

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

6 39

Arby @mobalti.bsky.social · 18d

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

Arby @mobalti.bsky.social · 24d

Cards with animated gradient borders
Modern CSS ⚡💪
Gradient from gradient.style

CodePen: codepen.io/mobalti/pen/...

@codepen.io #CSS

1 2

Arby @mobalti.bsky.social · 26d

Congrats, Adam! 🎉👏🔥

1

Arby @mobalti.bsky.social · Aug 29

It’s one of my favorite tools, I use it all the time. So excited about the new layer feature. Thanks, Adam! ♥️

1

Arby @mobalti.bsky.social · Aug 15

Thanks Miriam!

3

Arby @mobalti.bsky.social · Jul 2

Did something similar here, might help
codepen.io/mobalti/pen/...

CSS Carousel

A CSS-only accessible carousel demo using modern overflow features—no JavaScript needed. - Scroll Buttons - Scroll Markers - Scroll-State Queries - ...

codepen.io

2

Arby @mobalti.bsky.social · May 31

That’s great! Feels like libraries have been ignoring logical properties lately, so this makes me really happy!

1

Arby @mobalti.bsky.social · May 31

So clean with logical properties all over. Great job!

1

Arby @mobalti.bsky.social · May 31

I read mostly on a Kobo, and Pocket let me send articles straight to it. It’s basically my article database!

2

Arby @mobalti.bsky.social · May 31

One of Mozilla’s best products is gone. So frustrating!

1 1

Arby @mobalti.bsky.social · May 12

I really enjoy reading these posts, I've bookmarked so many of them and often use them as refs. My fav is "10 Powerful Ways to Use CSS Variables."

2

Arby @mobalti.bsky.social · May 1

This really helps manage vertical spacing in markdown-style content, especially as we move toward more prompt-based interfaces. Also love the logical values!

Arby @mobalti.bsky.social · Apr 29

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

Arby @mobalti.bsky.social · Apr 29

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...

1 2

Arby @mobalti.bsky.social · Apr 25

This is awesome! Love how the animation really enhances the UX, it makes it so clear to the user what just happened when they open the `<details>` element. Smooth and smart!

4

Arby @mobalti.bsky.social · Apr 11

❤️❤️❤️

Arby @mobalti.bsky.social · Mar 13

Awesome! ❤️

1

Arby @mobalti.bsky.social · Feb 13

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

1 2

Arby @mobalti.bsky.social · Jan 7

It’s like image optimization. In my opinion, it should be treated on a case-by-case basis.

Another benefit of text-wrap: balance is when the text gets translated to languages other than English. This allows the author to prevent weird behavior if the text becomes longer or shorter.

1

Arby @mobalti.bsky.social · Dec 19

In Props Color Finder, I added an option to select named CSS colors, so every time you pick a color, you'll get the closest named CSS color. Check it out:
bsky.app/profile/moba...

Arby @mobalti.bsky.social · Dec 10

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

3