Streaming live at 10am (PST)

Can you add a stroke to text?

Is it possible to add a stroke to text like this. I want to make an editable cms title so that it would display as seen in this screenshot…

there’s a tutorial for creating knock-out text (the sort where it looks like text has been cut out of an image) somewhere. Should be able to use that for this sort of effect as well? Or create two versions of the text, one styled like the full white ‘hello’ and another like the outline? Put them on tom of each other with position absolute?

1 Like

Yes. I did it for this:
http://stranger-things-title.webflow.io/workshop

Here’s the custom code:

.letter {-webkit-text-stroke: 3px #c11b1f; color:black !important; -webkit-font-smoothing: subpixel-antialiased;}

2 Likes

Thanks @sarahfrison! I did a little raccooning around on the web and I found some code. It works perfectly…

<style>
 .outline-heading {
	-webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px #B79170;
  }
</style>
3 Likes

Killer. Thank you :slight_smile:

1 Like

Hi @PixelGeek I’m trying to create the same effect here but when I add the Webkit code into the page header tag the styles are marked red and don’t seem to go through - any idea why this might be the case? Is there somewhere else I should be putting them?

Screenshot here for the current css I have placed.

CSS Not Working

Mine are colored with a red background also. That seems to be new. However, the effect should work. You have opening and closing style tags right? Also double check you have your text element spelled correctly.

@spoulos thanks for writing back! I figured it out - the issue was that one of this headings parents had a defined text color that was overriding the custom CSS. Silly mistake, but being a beginner on the custom code side, I assumed it was an issue with what I had written and not the general styling/hierarchy of the layout.

Thanks again for the reply!!
Jn