Mastering CSS blend modes | Hacker News Reader

Mastering CSS blend modes

kodingkitty.com

111 pointsKodingKitty19 comments

This is a way better article than OP, which is really more of a visual reference.

That's great. Thanks for sharing.

i really like your marker style ngl

it's not mine but I'm happy to say thanks on behalf of the author!

We recently migrated all our native apps to webapps. Yes it's possible these days with same user experience. It's a blessing. Designing apps with css is just so nice. There isn't a single native solution which come even slightly close. Css is super nice these days.

React native let’s you use flex box and has a lot of feature parity to css

React Native is essentially just writing web apps, once RN has css grid I will be happy enough with everything it has.

There's something to be said for writing web apps in RN purely for the option of porting to iOS, Android and even MacOS/Windows now.

Fair enough. I hardly ever use grid cause I usually find flex handles 99% of my cases. But grid can be nice in certain instances. Haven’t tried RN for anything other than ios and android but am curious about the other platforms. And I guess the rest of the argument is just the age old debate of web vs native app. I think for some apps you’d be hard pressed to convince users to open a browser every time and type in a url, but certainly for other apps it’s fine. I won’t rehash that whole debate though :)

A webapp can live within a native app. The native app just acts as a holder and maybe has some functionality like social logins, ads, push notifications etc.

Something to note though, these are typically extremely slow to render on mobile (at least in my experience) and can mean the difference between a functional web app and a laggy mess if you're redrawing often.

That’s usually the fault of funky JS or bloated bundles etc, rather than the CSS portion.

Plus it’s completely avoidable l, just many teams do not care, unfortunately

Well I assume the reasoning is that hardly anyone uses these blend modes, so why spend time optimizing it when there are more common things that could use more of a speedup.

It’s incredible just how much there is in CSS. And so much of it is very fast in comparison to other imperative ways to getting the same effects.

Is there a blend mode for subtractive color mixing, to get the effect of layering transparent plastic sheets on top of each other?

I did this with the multiply blend mode. I did it in a really convoluted way to take a single color image, split it into CMYK channels, and then overlay the transparencies, in html+css.

http://deepf.art/cmyk.html

It seems to work, thanks!

How to use blend modes to create text that is always visible over the picture, dark or light? e.g. negates the background color or something.

`mix-blend-mode: difference;`

Example: https://jsfiddle.net/m3kajfbc/4/

Reply on news.ycombinator.com