Topics

Kevin Powell - Community•2y ago

TheBassGuy 🎸

I want to add an outside stroke to my text

Hi, I want to add an outside stroke to my text but with -webkit-text-stroke I am only able to apply inside stroke and with the text-shadow trick, it looks broken

11 Replies

TheBassGuy 🎸OP•2y ago

this is what it looks like with the text-shadow trick

TheBassGuy 🎸OP•2y ago

.font-outline-4 {
  /* -webkit-text-stroke: 4px black outside; */
  text-shadow: -4px -4px 0 #000000, 4px 4px 0 #000000, -4px 4px 0 #000000, 4px -4px 0 #000000;
}

.font-outline-4 {
  /* -webkit-text-stroke: 4px black outside; */
  text-shadow: -4px -4px 0 #000000, 4px 4px 0 #000000, -4px 4px 0 #000000, 4px -4px 0 #000000;
}

TheBassGuy 🎸OP•2y ago

I want it to look like this

~MARSMAN~•2y ago

You can use drop-shadow Use it for the shadow. And use the -webkit-text-stroke for the outline around the letters.

~MARSMAN~•2y ago

https://codepen.io/ThatMartianDev/pen/yLEEMEz

CodePen

...

~MARSMAN~•2y ago

But you gonna need to control the shadow position specially if your font size is responsive

Electronic•2y ago

Would have thought a text shadow will do but nice solution marsman

~MARSMAN~•2y ago

True text shadow is even more compatible than filter 🙌

TheBassGuy 🎸OP•2y ago

which one shall I use? and the -webkit-text-stroke gives an inside text stroke, what should I do to get an outside text stroke?

~MARSMAN~•2y ago

Both gives same result, but go with text shadow Hmm I'm not really sure.. I just woke up so brain still out of service lol

TheBassGuy 🎸OP•2y ago

no worries dude, if some idea comes up, then I'm here :D

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

35KMembers

View on Discord

Want results from more Discord servers?

Add your server