Layered Text Clipping

[Jerba]

I’m having an issue with text clipping, basically I’m trying to overlay two containers and have the text on the top layer be transparent showing the contents of the div below…

So, like this…

`.below {
// for example if this has a green background
background-color: green;
}

.above {
// and this has clipped text I want to be able to see the
// green background of ‘.below’ via the transparent text in this div.
}
`

I’ve tried a few ways and I can’t seem to get it working. I think i’m overlooking something obvious, but as of now I’m stuck!

Thanks for any help!

http://codepen.io/Responsive/pen/xbebrW

[Paulie_D]

…and your Codepen demo is where…?

[Paulie_D]

I followed Chris’ example for clipping

https://css-tricks.com/image-under-text/

http://codepen.io/Paulie-D/pen/jEeYpX

[Paulie_D]

Doubtful if it would with a canvas since a canvas is not a background or background-image.

[Paulie_D]

Would it be possible if i recreated a similar effect with css animations?

Doubtful, this effect relies, as I understand it, on a background (e.g. color or image) so that the text can be clipped to it.

Perhaps a SVG mask or clip might be a better option.

http://tutorials.jenkov.com/svg/clip-path.html#text-clip-paths

[Author]

Posts