Extend gradient decorator to work similarly to -webkit-gradient

[MatthiasJFM]

I'm looking to fade-out content on an element with a partially transparent background, but this feature would be useful for any background that is not a solid colour or has complex patterns.
The current gradient decorator is used for background gradients, I'm looking for a mask-gradient on the content (in my case for opacity) which can set on a particular area of the element.

For a use case, picture a scrolling area with a partially transparent background with a narrow region at the top and bottom where content can fade out into transparency.

Would be interested to know if it's doable!

[mikke89]

Thanks for the suggestion. So this would probably fit perfectly with the filter feature we have been discussing a bit on the chat. In essence this would be like an enhanced decorator, where render commands such as render begin and all children rendered are sent through the render API. Then the user could act on these commands. For example in your case you could make all children render to an off-screen texture, and then at the end render that texture with fading applied using a custom shader.

Of course, this would still require some customization on the client side. If we wanted to to make it more ergonomic we could possibly think about making some new render API for render-to-texture support and somehow custom shaders.

You could already do this with some creativity. Eg. making the container element use a special texture source name that the render API acts upon, and a "dummy" element as the last child to say that all children have been rendered.

[mikke89]

The mask-image property is now being worked on for RmlUi 5.0. This will also support gradients and all other decorators being used as alpha masks. Here is a basic example (currently being worked on in the filter branch):

The second box uses a gradient and an image decorator to alpha mask the contents of the element.

[mikke89]

For trivia sake, this feature was asked for all the way back in #1 :)