Custom shape as mask / Custom fonts as text

[alex....@novahaus.com.br]

Is there any way to perform a custom shape mask to reveal text like the example.gif? If it's not, how do you guys work around that limitation?

Also, as you can see, that font isn't a standard one. Is there a way to work with custom fonts in GWD? I'm new about that tool and want to make the best use of it :)

Thanks in advance and hope you guys can help me and others with same issues =)

[Kent]

I could not see animation in your attached GIF (just plain white), but the best way to mask text is by wrapping your text in a div set to overflow:hidden, then animate the width or height of that div. Best practice for fonts is to use Google Fonts, there are over 800 faces.

Hope that helps,

Kent

Google Web Designer team

[alex....@novahaus.com.br]

Thats odd, well, my doubt is about transversal masks like that image (took from gif)
http://prntscr.com/iv08v2

As you can see I drew how the mask suppose to be, hope it helps you to understand my question =)

Thank you Kent for reply about the font, hope you can help me with that one too <3

[Kent]

I see, you are using a polygon shape to mask the text. Unfortunately that is not supported natively in GWD at this time.

Our best solution is to use the wrapped div overflow method I described which limits you to rectangles.

There are some partial solutions available if you don't need to support all browsers. This blog article discuss limitations of masking in GWD in detail.

You should be able to implement any standard HTML5 solution manually in GWD. Here is an article about SVG masking and one about CSS masking.

[ajrsil...@gmail.com]

Ooh that's exactly what I was trying to explain =]

Well it's almost 2am here and I'm too sleepy to comprehend these articles but later I'll check it and come back to provide feedback, thanks buddy you're a legend