Getting to know CSS Blend Modes(

over 7 years ago from Matt Achariam, Intent Renderer

  • Alex TebbsAlex Tebbs, over 7 years ago

    This and CSS filters are the next big CSS things I am excited for. Often I get a PSD from a designer w/ blend modes all over the place. Sometimes you can just bake the blend mode into the image and you're fine, but this isn't always the case.

    For example, a caption w/ image background over a hero image slider. The caption has a blend mode that interacts with the dynamic image below. There's no way to recreate this kind of situation in CSS currently.

    For those looking for a demo:

    You'll need to check "Enable experimental Web Platform" under chrome://flags.

    2 points
    • Dirk HCM van BoxtelDirk HCM van Boxtel, over 7 years ago

      Hah. I used to make that mistake as a designer, blend moding the crap out of everything. This was the 90's mind you. The internet was one big image.

      I'd have a chat with your designers if I were you ;)

      0 points
      • Oskar RoughOskar Rough, over 7 years ago

        A difficult implementation isn't necessarily a bad design choice. The world isn't flat ;)

        0 points
        • Dirk HCM van BoxtelDirk HCM van Boxtel, over 7 years ago

          I was responding to his post, where he actually encountered an impossible implementation. Text with a blend mode over a hero image. This technology isn't (yet) available in even most modern browsers.

          That's bad design.

          I'm 100% okay with the world not being flat. I'm not okay with designers that can't work with the (less and less) constraints given to us by the platform.

          0 points
          • Alex TebbsAlex Tebbs, over 7 years ago

            Yep. It's not that the design was BAD, it's just they designed something that was impossible to implement and didn't realize it :(

            For the record, I don't think it's always the designer's job to keep up to date with exactly what is and isn't supported on the web. I think designers who don't code should assume the sky is the limit and then have developers talk with them about what can and cannot be implemented, and make changes to the design accordingly.

            1 point