Streaming live at 10am (PST)

How to clip and mask a text title?

Hello Everyone. Anyone knows how this inverted video look and type are done in this website? Possible in webflow ?
I think the result is so so cool. Thank you

https://www.designdisruptors.com/

Hey @AlexandraDesign,

I’ve quickly done it here with overlay svg

http://forum-fb483f.webflow.io/

https://preview.webflow.com/preview/forum-fb483f?preview=ee3fc19efe30c6eb592776c5d9ce8c4a

@vincent also told me about cleaner solutions in css
Here

1 Like

Thanks @zbrah the zebra

So yes, there are tons of CSS possibilities for that.

You can use clip-path with a SVG mask for example. Read everything about clipping and masking here (the SVG mask part is around the middle)

But you can also use CSS clip-text, and then use just a font for the clipping. So you could even make that work with the CMS.

For example the title of this site: http://wars.webflow.io/ works with background-clip.

<style>

/* textured text using clip */
.clipped {
	       /* -webkit-background-clip clips the background of the element to the text */
	       -webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */
	       -webkit-background-clip: text;
         }
</style>

To use this to make your header, first design a large box with the animated background. Duplicate it and make the duplicate exactly on top of the original. In the duplicate, position your text and apply the bg-clip.

3 Likes

So I understand an SVG was used, but is there a way to make regular text become a mask in webflow without custom code?

Yes exactly ! @DFerroF1

huh? I asked a question :frowning: Are you saying that you have the same question?

Uau! You are great ! :wink: Thank you

Ahah sorry @DFerroF1 i read too fast.
No without custom code you can’t make a regular font become a mask (But it’s not a lot of code!)

Do you have the code? And where do you paste the code in webflow?