7

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...

Community
  • 1
  • 1
Vandervals
  • 5,774
  • 6
  • 48
  • 94

3 Answers3

18

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:

Transparent text with stroke and background image

body {
  background: url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size: cover;
}
svg{width:100%;}
<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>
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • 1
    @Vandervals that is wrong. It is responsive, indexable by google and selectable just like plain html. ([since 2010](http://googlewebmastercentral.blogspot.fr/2010/08/google-now-indexes-svg.html)) – web-tiki May 05 '15 at 10:50
  • 1
    @Vandervals and I would add that it has much more browser support than `text-stroke` – web-tiki May 05 '15 at 10:54
  • 1
    Seems like a better option as text-stroke is an unofficial extension that has been removed from the w3c specs (and so, might be removed in chrome etc. in coming updates) – zelexir May 05 '15 at 10:55
  • The problem is that this is not a css solution... What would happen if you'd introduce that svg as a base64 encoded in the css? – Vandervals May 05 '15 at 11:01
  • Why would you want to do that? can't you edit the html? – web-tiki May 05 '15 at 11:04
  • 1
    call me newbie or puritan but I like to have style and content separated – Vandervals May 05 '15 at 11:31
  • @Vandervals you can specify all the styles (`stroke-width stroke fill font-size font-family...`) in the CSS file and keep only the content of the inline SVG in the HTML. This way, you can seperate style and content. Here is an example : https://jsfiddle.net/7goyzfwL/2/ – web-tiki Mar 20 '18 at 09:26
  • Can i use word wrap for this text ? – Chi Bui Mar 11 '20 at 08:34
  • @ChiBui no, word wrap doesn't work in the svg `` element – web-tiki Mar 11 '20 at 10:02
13

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;
    }
}
BenM
  • 52,573
  • 26
  • 113
  • 168
  • is there not a moz and ms version for this? because the problem with this is that you can't say: "if you aren't webkit, do not display the color as transparent" (otherwise it wouldn't be very responsive). Of course you can check it with js and include that as an specific class, but is there a css only solution? – Vandervals May 05 '15 at 10:46
  • You can use a media query such as `@media screen and (-webkit-min-device-pixel-ratio:0)` for that. – BenM May 05 '15 at 10:48
  • I think there's a semi-standard'ish `text-stroke` now? – rogerdpack Apr 20 '17 at 06:29
  • @rogerdpack Yes indeed, seems to be pretty standard now: http://caniuse.com/#feat=text-stroke – BenM Apr 20 '17 at 09:23
6

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.

Vandervals
  • 5,774
  • 6
  • 48
  • 94
  • I guess that is totally depending on your browser audience. http://caniuse.com/#feat=css-featurequeries compared to http://caniuse.com/#search=svg – zelexir May 05 '15 at 11:04
  • of course! it deppends on how important for your styling it is but this looks like a great trick for problems with other rules as well. – Vandervals May 05 '15 at 11:08
  • combining browser support for both properties this will display the text stoke only in chrome opera and android browser – web-tiki May 05 '15 at 11:16
  • @web-tiki look again. The stroke will always be displayed, either as a stroke or as a text-shadow, what changes is thrat the font will be transparent or white. THe good thing is that you can match the color of the background or the general color, in case it is an image. – Vandervals May 05 '15 at 11:19
  • @Vandervals don't get me wrong, I was talking about the `text-stroke` property only beeing displayed in those browsers. Others will display the text shadow as you say. – web-tiki May 05 '15 at 11:24
  • but what is the point? wasn't a fallback what I was asking for? I think your answer is good too (and surely better for design purposes), but is it posible to introduce it on the css in any way? – Vandervals May 05 '15 at 11:27
  • @Vandervals you edited the fallback part after I had answered. I understand your will to keep style and content seperate but for this particular task the browser support is much better with the svg approach. I doubt text in a base64 encoded svg is indexed by google as it would be considered as a `background-image` so I won't recommend it. But you can do this http://jsfiddle.net/webtiki/j04nz9yd/ – web-tiki May 05 '15 at 11:48