Geek Answers Handbook

How to make a text stroke with transparent text

I found this solution: Contour effect for text. This is great, but is it possible to make text transparent and draw only contour? This happens, for example, with a shadow box, because even if there is no background in the field, you will not see a shadow "under". But with the text, if it is transparent, you see the whole type shadow. Is it possible to get only an outline with transparent text?

EDIT: The problem is to have a good reserve for browsers that do not support, for example, -webkit-text-outline, because they will not draw the outline, and they will make the text invisible ...

+5
source share
3 answers

You can get transparent text with a text stroke using the built-in svg.

You can use the <text> element ( more information about MDN ) set the fill property to none or transparent to make the text transparent and use stroke porperty to create the text. stroke-width and stroke-color can determine the thickness and color of the texte stream

Here is an example: a transparent text with a white stroke and background image showing 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>
+9
source

Well, using CSS3 is possible, but only with some browser prefixes. The combination of color: transparent will generate what you are looking for.

For instance:

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

jsFiddle Demo

However, it is worth noting that the use of text-stroke-* is still limited. See Can I use .

If you need a good reserve, you can use a media query:

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

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

 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 like @supports and has been implemented in most webkit browsers such as chrome and opera for several years now.

+2
source

More articles:


All Articles