How to make a text stroke with transparent text

Question

I found this solution: Outline effect to text Which is great, but is it posible to make the text transparent and only the outline to draw? This happens with box-shadow, for example, as even if the box doesn't have a background, you won't see the shadow "under" the box. But with text, if it is transparent, you se the whole shadow of the type. Is it posible to get only the outline with transparent text?

EDIT: The problem with this is to have a nice fallback for browsers that don't support for example -webkit-text-outline, because they wouldn't draw the outline and they would make the text invisible...

Answer 1

You can achieve the transparent text with text-stroke with an inline svg.

You can use the <text> element (more info on MDN) set the fill property to none or transparent to make the text transparent and use the stroke porperty to make the text outline. stroke-width and stroke-color can define the texte stroke thickness and color

Here is an example: transparent text with a white stroke and a background image showing through the text:

body {
  background-size: cover;
}
svg{
  width:100%;
  background-color: #333;
  box-shadow: inset -50px -50px 100px pink;
}

<svg viewbox="0 0 10 2">
  <text x="5" y="1" text-anchor="middle" font-size="1" fill="none" stroke-width=".015" stroke="#fff" font-family="sans-serif">Text stroke</text>
</svg>

Answer 2

Well, using CSS3 this is possible, but only with certain browser prefixes. Combining color: transparent will generate what you're looking for.

For example:

span {
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

jsFiddle Demo

It's worth noting though, that use of text-stroke-* is still limited. Please refer to Can I Use.

If you want a nice fallback, you can use a media query:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    span {
        color: #000;
    }
}

Answer 3

I finally found a responsive answer to the webkit stroke problem:

span{
    color: white;
    text-shadow: 1px 1px black, -1px -1px black;
}
@supports(-webkit-text-stroke: 1px black){
    span{
        color: transparent;
        -webkit-text-stroke: 1px black;
        text-shadow: none;
    }
}

This works as @supports has been implemented in most webkit browsers like chrome and opera for some time now.