CSS blend modes in Gtk+

As part of my work on Endless, I have to maintain and adapt GNOME applications to better suit our needs. This usually includes fixing bugs, working around limitations of the toolkit, and sometimes implementing new features.

Some time ago, I was asked by multiple designers about the CSS blending modes. This is a well-known feature that is widely used in photo manipulation apps like Photoshop®, and recently Adobe is trying to port this to CSS3 spec.

This allows designers to be more flexible and have a finer control over the rendering, and saves some bandwidth because we don’t have to send the blended image as an asset.

This marvelous feature is starting to see its light in Gtk+.

Captura de tela de 2016-07-03 11-45-06
Background blend mode is about to land.

This is the second time I’m working on something big on Gtk+ (the first one being the Other Locations view) and I’m pretty excited! This was requested by our beloved designer Lapo and also by Endless designers.

When it lands on master, we’ll also have a nice demo in Gtk3-demo app. And, as tradition dictates, a demo video:

In the near future, I plan to work and support more blending operations and CSS properties. Hopefully, this puts Gtk+ ahead of many browsers that doesn’t support these operations. What do you think? Share your comments, ideas and suggestions! 🙂


9 responses to “CSS blend modes in Gtk+”

  1. lapocala Avatar
    lapocala

    Cool, feel free to implement filters now! 😉

    1. Dumbass…

  2. Salamandar Avatar
    Salamandar

    May be really useful to create coloured buttons, and not juste white/red but also green 😉

  3. ElectricPrism Avatar
    ElectricPrism

    Fantastic

  4. oliverp Avatar
    oliverp

    Cool, keep up the good work 🙂

  5. when it will be “backdrop-filter”? Really need…

    1. When someone implements it, obviously.

  6. […] поддержка режимов смешивания CSS, позволяющих на лету […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.