Color Border On Letters

Foundry
1

In this post Colored Border on Letters, it suggests the solution is to use Blacksmith.

I want to apply this to text in an F3 Header and it isn’t obvious to me as to what Blacksmith option(s) to use to get a clearly defined border to a letter e.g. dark blue outline to white text?

Any pointers, gratefully received. :slight_smile:

2

Hi, I experimented in blacksmith with different coloured shadows for to achieve something similar as in the F2 Thunder Pack Header Plus.
Give it a try, good luck.

Bildschirmfoto 2024-01-18 um 16.37.16
Bildschirmfoto 2024-01-18 um 16.37.16766×908 37.8 KB

3

Many thanks for taking the time and trouble experimenting to get the effect. :slight_smile:

I have tried your suggestion and played around with it a bit. It gets close but not quite as good as the F2 Thunder Pack Header Plus, especially as I was also adding shadowing to the F2 text.

Is this the only way it can be done?

Presumably, F2 Thunder Pack Header Plus used CSS of some sort to achieve the effect?

4

Well, I have not found another way to get a similar result, but it is not as good as in F2.
I’m sorry I can’t be of more help.

5

Header Plus used a CSS property that was a webkit only (at the time) feature called text-stroke. I believe many more browsers allow it now. When I wrote Foundry 3 it wasn’t as widely available, if I remember correctly, and also had some odd interactions with other style properties. Give text-stroke a search on the web and you can try it out.

1 Like
6

Hi Adam,
You beat me to it, I have just found that it can work, if it is pasted into the site wide css panel:

h3 {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
h1 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}
2 Likes
7

You should also include the now-webkit specific version as well in your code.

8

I am not sure what you mean by that? :thinking:

9

For information: I have tested it from an Apple Mac in: Safari, Edge, Firefox and Brave and it works OK.

10

This is specific to webkit:

-webkit-text-stroke-width
-webkit-text-stroke-color

Other browsers may accept it, but it is not a standard, and they could stop accepting it at some point. The standard property is:

text-stroke-width
text-stroke-color

When working with properties like this you need to include both.

  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  text-stroke-width: 2px;
  text-stroke-color: black;
2 Likes