News for hackers. Stuff that matters.

A comment on Material 3 Expressive: Better, Easier, Emotional UX. Parent comment

Re:Material 3 Expressive: Better, Easier, Emotional UX by Ajedi32 on Friday May 16, 2025 @11:12AM (#44006455)
In this case it looks like they didn't just want an image though, they wanted the cursor to invert the color of whatever part of the web page it's over, and to seamlessly morph into a selection highlight whenever you mouse over certain controls. Seems like that's a lot harder to make performant.
[ Parent | on HN ]
Re:Material 3 Expressive: Better, Easier, Emotional UX by freeone3000 on Friday May 16, 2025 @04:32PM (#44009559)
You can do that by changing the cursor icon for the elements in question. The CSS rule does support per-element swapping (because of course it does, that’s how a text input has a bar but a button has a pointer).
[ Parent | on HN ]
Re:Material 3 Expressive: Better, Easier, Emotional UX by jampekka on Friday May 16, 2025 @05:16PM (#44009877)
The cursor color inversion can't be done with CSS though.
[ Parent | on HN ]
Re:Material 3 Expressive: Better, Easier, Emotional UX by freeone3000 on Friday May 16, 2025 @05:17PM (#44009879)
Use a different colored image.

The background colour of the hovered element is known. When you specify the bgcolor, also override the cursor image.

[ Parent | on HN ]
Re:Material 3 Expressive: Better, Easier, Emotional UX by jampekka on Saturday May 17, 2025 @02:55AM (#44012520)
The effect on the page is per-pixel, it doesn't change the whole cursor color when the hovered element changes.

For normal elements this can be done with mix-blend-mode, but that's not available for the cursor.

[ Parent | on HN ]
Re:Material 3 Expressive: Better, Easier, Emotional UX by johnisgood on Friday May 16, 2025 @06:19PM (#44010273)
I am pretty sure it is doable in CSS.
[ Parent | on HN ]