[HN Gopher] Mastering CSS blend modes
       ___________________________________________________________________
        
       Mastering CSS blend modes
        
       Author : KodingKitty
       Score  : 80 points
       Date   : 2023-05-28 14:18 UTC (8 hours ago)
        
 (HTM) web link (www.kodingkitty.com)
 (TXT) w3m dump (www.kodingkitty.com)
        
       | Waterluvian wrote:
       | 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.
        
       | holoduke wrote:
       | 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.
        
         | schrodingerscow wrote:
         | React native let's you use flex box and has a lot of feature
         | parity to css
        
           | paradaux wrote:
           | 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.
        
             | schrodingerscow wrote:
             | 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 :)
        
               | holoduke wrote:
               | 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.
        
       | Inviz wrote:
       | 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.
        
         | dzuc wrote:
         | `mix-blend-mode: difference;`
         | 
         | Example: https://jsfiddle.net/m3kajfbc/4/
        
       | cubefox wrote:
       | Is there a blend mode for subtractive color mixing, to get the
       | effect of layering transparent plastic sheets on top of each
       | other?
        
         | aimor wrote:
         | 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
        
           | cubefox wrote:
           | It seems to work, thanks!
        
         | [deleted]
        
       | moffkalast wrote:
       | 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.
        
       | airstrike wrote:
       | See also https://garden.bradwoods.io/notes/css/blend-modes
        
         | wahidislam wrote:
         | i really like your marker style ngl
        
         | 4RealFreedom wrote:
         | That's great. Thanks for sharing.
        
         | bloudermilk wrote:
         | This is a way better article than OP, which is really more of a
         | visual reference.
        
       ___________________________________________________________________
       (page generated 2023-05-28 23:01 UTC)