Streaming live at 10am (PST)

Can you add a stroke to text?


#1

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…


#2

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?


#3

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;}


#4

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>

#5

Killer. Thank you :slight_smile: