Hype Blendmodes (with full IDE support)

This is a full extension offering blendmodes. You can assign them by using the attribute data-blendmode (assigning MODENAME) or by class blendmode-MODENAME.

MODENAME are color, color-burn, color-dodge, darken, difference, exclusion, hard-light, hue, lighten, luminosity, multiply, overlay, saturation, screen, soft-light.

Demo:
HypeBlendModes.html

Example Download:
HypeBlendModes.hype.zip

Source:
HypeBlendModes.js
HypeBlendModes.min.js

Version history
1.0 Initial release under MIT-license
1.2 Converted into full IDE plugin
1.3 Fixed IDE support, added dataset variation

PS: there is an older version of this project using an symbol but this take is much more versatile, in my opinion.

5 Likes

Here is a simple trick using the blendmode multiply to color a chair.

Demo:
HypeBlendModes_Chair.html

Download:
HypeBlendModes_Chair.hype.zip

6 Likes

I just came across this article:

But I think your extension and Hype’s editor makes the process much easier!

I think this “extension” is so trivial that it should be part of Hype.

though, i like the idea of components loaded when needed and not one big library containing the whole thing.

1 Like

Yes, true. I am with you on this. I was just thinking that blend modes are so basic and only require a couple of lines of code.

edit: Moved thoughts to …

↑ look at project
1.3 Fixed IDE support, added dataset variation

1 Like

This would be neat to recreate in Hype using blendmodes
https://codepen.io/kyleshook/full/GRKVgeZ

Nice work!!

Easy to use :slight_smile:

I have been using something similar for a while:

Very cool! (In Chrome)

This pen doesn’t work as intended in Safari (13.0.2) or Firefox (70.0).

Playing around with Blendmode and Textstroke:

Mix-Blend-Mode-And-Text-Outline-Test.hype.zip (529,8 KB)

based on https://ishadeed.com/article/blending-modes-css/

2 Likes