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.

<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

  1. Select the element you want to add the custom attribute to

  2. Go to the Element settings Panel (D)

  3. Add [+] a custom attribute

  4. Specify the name and the value

  5. Click Save

White Arrow
For example:
In this case you defined the Facebook Post
udesly-logo
Made with Udesly