0

I want to create a text where the body of each letter is to be completely transparent (or set a certain opacity) but the shape of it is to be just the border.

In this post I saw a way to create a border around text. However, it is created based on the actual state of the text, so if I change its opacity, the border responds to that.

How could I create this border I am looking for?

Community
  • 1
  • 1
dabadaba
  • 9,064
  • 21
  • 85
  • 155
  • So you're basically looking for CSS that only shows the _outline_ of the text? – S.B. Apr 17 '14 at 21:44
  • Something like this? http://jsfiddle.net/B3zCq/ – S.B. Apr 17 '14 at 21:50
  • @S.B. not exactly, you are setting the color to white, while it should be transparent, the *content* of the letter should be the image or whatever is in the background – dabadaba Apr 17 '14 at 21:59

1 Answers1

0

The best way to do this is to set color of the text to rgba(255,255,255,0), the -webkit-text-stroke-width to 1px and the -webkit-text-stroke-color to #000 or any other color you would like to use

So it will be like this :

h1 {
    color:rgba(255,255,255,0);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
}

Maybe this link will help you, it has more details about RGBA colors

A brief introduction to Opacity and RGBA

Hope this will help you ...

MujtabaFR
  • 5,956
  • 6
  • 40
  • 66
  • I used `text-shadow` instead, but the key to the matter was to set the color to `rgba(255,255,255,0)`. I was using just `opacity`. – dabadaba Apr 17 '14 at 21:58
  • If you used `text-shadow` in combination with a transparent font color, the shadow would always be visible behind the "transparent color", so this doesn't exactly work as you described it. – S.B. Apr 17 '14 at 22:04
  • @S.B. that is what I exactly want. The shadow acts as a border. – dabadaba Apr 18 '14 at 16:58
  • No, that shadow will also act as a fill-in, like this: http://jsfiddle.net/B3zCq/1/. Either your question is misleading or you can't use text-shadow then. – S.B. Apr 19 '14 at 12:55