Text Outline & Clip

How it works

The first step to follow is to clone the Webflow project your can reach by clicking on the button below.

Clone project

<style>[outline-text=”1″]{-webkit-text-stroke-width: 1px;}[outline-text=”2″] {-webkit-text-stroke-width: 2px;}[outline-text=”3″] {-webkit-text-stroke-width: 3px;}[outline-text=”4″] {-webkit-text-stroke-width: 4px;}[outline-text=”5″] {-webkit-text-stroke-width: 5px;}[outline-text=”6″] {-webkit-text-stroke-width: 6px;}[outline-text=”7″] {-webkit-text-stroke-width: 7px;}[outline-text=”8″] {-webkit-text-stroke-width: 8px;}[outline-text=”9″] {-webkit-text-stroke-width: 9px;}[outline-text=”10″] {-webkit-text-stroke-width: 10px;}[outline-text] {-webkit-text-fill-color: transparent;}[clip-text] {background-clip: text;-webkit-background-clip: text;color: transparent;}</style>

Text outline

Insert a text element with the attribute:

In this way you can manage the thickness of your text.

Clipping

Insert the attribute:

In this way you can insert a background image or a gif clipped to the text.

How to add a custom attribute

Select the element you want to add the custom attribute to
Go to the Element settings Panel (D)
Add [+] a custom attribute
Specify the name and the value
Click Save

For example:

In this case you defined the Facebook Post

Made with Udesly