5 ms·
Mastering CSS blend modes
- airstrike 3y agoSee also https://garden.bradwoods.io/notes/css/blend-modes https://garden.bradwoods.io/notes/css/blend-modes
- 4RealFreedom 3y agoThat's great. Thanks for sharing.
- bloudermilk 3y agoThis is a way better article than OP, which is really more of a visual reference.
- wahidislam 3y agoi really like your marker style ngl
- airstrike 3y agoit's not mine but I'm happy to say thanks on behalf of the author!
- Waterluvian 3y agoIt’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.
- holoduke 3y agoWe 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.
- schrodingerscow 3y agoReact native let’s you use flex box and has a lot of feature parity to css
- paradaux 3y agoReact 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.
- schrodingerscow 3y agoFair 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 :)
- holoduke 3y agoA 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.
- cubefox 3y agoIs there a blend mode for subtractive color mixing, to get the effect of layering transparent plastic sheets on top of each other?
- aimor 3y agoI 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 http://deepf.art/cmyk.html
- cubefox 3y agoIt seems to work, thanks!
- deleted 3y ago[deleted]
- Inviz 3y agoHow 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.
- dzuc 3y ago`mix-blend-mode: difference;` Example: https://jsfiddle.net/m3kajfbc/4/ https://jsfiddle.net/m3kajfbc/4/
- moffkalast 3y agoSomething 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.
- photonerd 3y agoThat’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
- moffkalast 3y agoWell 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.