-
CSS Blend Modes Without Canvass!
So, I’ve got this website:
https://www.liberocanto.org/ilcuorecanta/method.htmlI’m trying to have the text of the title turn green ONLY where it overlaps the red div element, like this:
I read up on globalCompositeOperation, which seems to be exactly what I need, but it’s used in something called a canvass, which is like this javascipt drawing mode thing, and it’s too complicated for me (I tried starting a canvass in the middle of one of my divs, and it didn’t even render.)Anyone have a smart workaround to do it in CSS? I’ve thought of having TWO different copies of the title right on top of each other with z-index, but I can’t figure out how to mask out one of them.
-
1 Reply
-
hello…
you could probably pull it off – rgba in css3, for example, but that wouldn’t work in all current browsers…but here’s something that you could perhaps learn from and build on:
https://spillerrec.wordpress.com/2011/11/30/color-independent-css-with-alpha-overlays/
hope that helps!
sitruc
Reply to this Discussion! Login or Sign Up