FORUMS: list search recent posts

CSS Blend Modes Without Canvass!

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Emily Carmichael
CSS Blend Modes Without Canvass!
on Feb 22, 2012 at 6:01:50 am

So, I've got this website:

I'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.

Return to posts index

Curtis Thompson
Re: CSS Blend Modes Without Canvass!
on Mar 5, 2012 at 10:43:08 pm


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:

hope that helps!


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved