How do I make a border around text ?

  • Hi everyone

    How do I make a border around text ?

    I'm using a custom Webfont, works fine. I tried to add borders in stylesheet.css but it didn't worked.

    (tried with text-shadow and -webkit-text-stroke, it didn't work)

    Thanks if you got an idea !

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I wondered this early on, too. I don't believe it has a border property to set for text. One idea is to create a sprite that matches the size of your text-box, then pin your text-box to that sprite. And if the sprite's inner part is transparent but there's a small-ish outer part, it could serve as a border for your text.

  • c13303 punkineo - yeah, unless there is a better way, just spawn a copy of the text that is slightly bigger/different color to fake it.

  • Oh that kind of a border! I see what you mean now. I like what Manley23 came up with better, then.

  • Thanks for the idea. Unfortunately a bigger font won't fit with the original font, unless you enlarge letter-spacing and resultats will be really random ... You can make a shadow or "height" effect that way, however.

    I was hoping to get a stroke function in order to make a Lucasarts-like font for my point'n'click.

    I will try to figure out with a sprite font.

  • Actually your idea is not that bad ! Instead of creating a bigger font in the back, I'll create 4 back-fonts of same size. That should create a stroke effect !

  • that works perflecty ! thanks

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)