Streaming live at 10am (PST)

Additive overlay in webflow


#1

can we do additive overlay in webflow?


#2

Are you refering to blend modes? Blend mode can be achieved with Canvas properties or Javascript, but also with CSS3. Here are the available parameters.

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

The "additive" label isn't used that much nowadays. In Photoshop, it's called Linear Dodge and has appropriate results when only used without opacity.

What are you trying to achieve?


#3

https://preview.webflow.com/preview/dtsgold?preview=c45940e8cb3f3cfe4e3a88e740afa19c

this is the link to the site, I am trying to create a flowing experience on the front page when you scroll down.

the game designer said I should use linear dodge. How do I use that to get that effect that all elements are the same.


#4

(your link does not work)

The game designer knows his stuff. Sadly, linear dodge isn't available as a CSS filter. I'm still wondering why you need it smile I guess I'll get it if I see the page...

There is a blending JS library call Processing with an ADD filter in it: http://processingjs.org/reference/blend_/

I tried to find a way with Canvas but I hardly know what I'm talking about regarding Canvas, also I found lists of blending modes for canvas but linear-dodge wasn't one of them.


#5

the link for some reason doesn't work, I am sorry about that.

this one does http://dtsgold.webflow.com/

can u help? Maybe we can use a different dodge to use the same effect. It's just to make lighting on the page more dynamic, like the sun influencing the light and shading on different aspects


#6

the site isn't enough for me to understand what you want to do and why you need live blending. Is there a art reference?


#7

@vincent I will ask the game designer. In the mean while, where can I check these mix blend modes within webflow?


#8

Hi @Aimanisms, if you are referring to mix-blend-mode as found here, is that correct? https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

We do not yet have a native interface to change these values, (although good idea for that smile however, you can add the custom css to your site in the Header. That is one thing you may try. I hope that helps smile Cheers, Dave


#9

@cyberdave do I just add that list as is in the header or do I need to surround it with more code? The site wasn't specific enough on that.


#10

Hi @Aimanisms, custom code would go in the Header or Footer or using an Embed Widget. I would suggest the following:

  1. Create a test site that you can share with others and play around with to create some working example
  2. Do some research how the mix-blend-mode is applied in real world situations. Stackoverflow.com is a good source for this kind of research
  3. Implement said research (code examples etc) into the site and start experimenting.
  4. After every change, always check your published page for any errors. You can check those by using Chrome DevTools: https://developer.chrome.com/devtools

That is how I do these kinds of things, where there is no tutorial in Webflow yet existing. I will also continue to check on this, as I want to know how this would work smile If you find out some more info, or get a working example going, please let me know smile Cheers, Dave


#11

Hi all!

Just wondering, did anyone figure out how to do this? I'm trying to create a sort of venn diagram animation on my site (screenshot below) where two circles move together then overlap, becoming one, and would love if when the circles overlapped they had a blend mode (multiply) on them.

I've tried inputting the mix-blend codes that Vincent provided into an embed block, but with no results.

Any thoughts would be great! Cheers,
Jamie


#12

Rather add code to the custom-code area of your site's dashboard. Like:

<style>
.multiply {mix-blend-mode: multiply}
</style>

And add a multiply class to your image in the webflow designer


#13

Thanks Vincent, I didn't know how to get to the custom-code area so thanks very much! I'm not on a paid plan atm so I can't see the results but once I've got my subscription set up I'll give it a test.

Cheers,
Jamie


#14

Why? I don't see a custom code limitation on the free plan. Simply publish your site on webflow to see the results.


#15

Hi Vincent I also thought it was a bit strange as I couldn't see a custom code limitation on the plans, but I tried again, here are 2 screenshots

The first is before I clicked save changes

Then I was redirected to here...

Bit weird!

Cheers,
Jamie


#16

Then you're right, it's limited. I didn't know.


#17

Think it's time for me to stop being a cheapskate and get a real account! haha, thanks for the code though


#18

haha.

i'm making a quick demo of the blending mode for you to see.


#19

Cheers man, very much appreciated!


#20

A selection of the blend modes:

http://sab.webflow.com/blend-modes