Streaming live at 10am (PST)

How to clip and mask a text title?


#1

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


Transparent heading
Can I create this effect on Webflow? (clip and mask video)
#2

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


#3

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.


Submit button interaction
#4

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


#5

Yes exactly ! @DFerroF1


#6

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


#7

Uau! You are great ! :wink: Thank you


#8

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!)


#9

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