DEV Community

Cover image for The RGB split effect with css and a bit of javascript

The RGB split effect with css and a bit of javascript

John Kapantzakis on September 16, 2019

While developing my personal website, I came accross this amazing library, Blotter.js, which exposes several methods (materials) that apply various...
Collapse
 
raigo profile image
rudotriton

Great work, a small inconsistency I noticed in the effect on the hero image at the top and your code. The hero image uses mix-blend-mode: screen which means that red, green and blue add up to white, while you use difference which gets a tint based on the background color.

Collapse
 
kinduff profile image
Alejandro AR

Very interesting. Thanks for sharing.

You can skip Javascript if you want to do it with CSS only, you can use before & after pseudo-classes. Check it out here jsfiddle.net/kinduff/r70ve5bd/1/

Collapse
 
kapantzak profile image
John Kapantzakis

Thanks Alejandro! Very interesting approach!