Make Text transparent with border

Question

I'm trying to display text (a number), which is displayed on a background image.

What I currently got is the following:

body {
  background-image: url("https://i.picsum.photos/id/10/800/800.jpg");
  background-repeat: no-repeat;
  background-position: center;
  width: 400px;
  height: 400px;
}

#age {
  /* 1 pixel black shadow to left, top, right and bottom */
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  font-family: sans;
  color: transparent;
  font-size: 40vw;
}

<h1 id="age">27</h1>

Basically, it works more or less as I want. However, the number itself is always filled with white color. What I would like though, is to have that number displayed huge there, have it filled with no color (transparent) and only use it with a border around the number itself. Later on, I want to upgrade to a counter, that visibly counts to the defined number first. However, the first step for me would be to display the number without the white fill.

Do you know any possible way to do this and only display a white border and have the background shine through for the rest?

related: https://stackoverflow.com/a/61828996/8620333 – Temani Afif Jun 07 '20 at 19:31 — Temani Afif, Jun 07 '20 at 19:31

score 1 · Answer 1 · answered Jun 07 '20 at 17:00

There is an experimental -webkit-text-stroke CSS property, that does what you need (see this answer):

#age-container {
  background-image: url("https://images.pexels.com/photos/68568/primula-catchfly-blossom-bloom-pink-68568.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 400px;
  height: 400px;
  display: flex;
}

#age {
  margin: auto;
  -webkit-text-stroke: 10px white;
  font-family: sans-serif;
  color: transparent;
  font-size: 250px;
}

<div id="age-container">
  <h1 id="age">27</h1>
</div>

Another option would be to use a font that already looks the way you need it to (like these).

Even an old fart learns something new every day! Never knew `text-stroke` was a css property — charlietfl, Jun 07 '20 at 17:39

Rounin · Answer 2 · 2020-06-07T20:17:16.457

The issue in 2020 with:

text-stroke
text-stroke-width
text-stroke-color
text-fill-color

is that - despite having been around for over half a decade - these are still experimental properties and have never yet been added to any offical spec (either W3C or WHAT-WG).

That's why, even though text-stroke now has wide support from browsers, all browsers (including Firefox) only support text-stroke with the -webkit prefix:

-webkit-text-stroke

See: https://caniuse.com/#feat=text-stroke

Using the -webkit- browser vendor prefix may not be an issue for you.

But if it is, there is another way to visually display a text-stroke-outlined transparent number within:

<h1 id="age">27</h1>

and that's to apply an SVG image background to the <h1> element.

Working Example:

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#age {
  position: relative;
  font-family: sans-serif;
  color: rgba(0, 0, 0, 0);
  background-image: url("https://images.pexels.com/photos/1749/fire-orange-emergency-burning.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
}

#age[data-age="27"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 400 400'><text x='204' y='320' text-anchor='middle' stroke='rgb(255, 255, 255)' stroke-width='6' fill='rgba(0, 0, 0, 0)' style='font: 320px sans-serif; font-weight: 700;'>27</text></svg>");
}

#age,
#age[data-age="27"]::after {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: center;
}

<h1 id="age" data-age="27">27</h1>

Make Text transparent with border

2 Answers2